WooCommerce & Greyd

Hi, this is Sandra from Greyd and in this video I’m going to show you how you can massively expand the possibilities of WooCommerce when you combine it with Greyd.Suite so you can create highly performing and individual, accessible web shops. For this I have prepared a stage here, where I’ve already activated and installed WooCommerce and also WooCommerce Germanized and I got two test products here. Greyd.Suite is fully based on Full Site Editing, so with this you got all the new WooCommerce templates at your disposal and also all the WooCommerce blocks, so you can design each and every part of your web shop individually and wherever WooCommerce allows it, you can also design, add and change things.

Here in your account, for example I could say, I want an additional headline here or whatever and then you can also benefit from all the Greyd custom features, for example. I will show you in a minute how you can replace the standard WooCommerce post overview and use a post overview of ours with a lot more design and functional options in terms of individual filters, you can even create interactive live searches here that automatically update themselves live on the website and much, much more. But we will start a little bit more general. There are lots of places where you benefit from the extensions of Greyd in the Block and Site Editor, for example when it comes to Global Styles. You do know the default WordPress global styles that come with Full Site Editing and with Greyd there is a lot more. We have a lot of additional global styles. Here for example we got fluid typography, we got several button variations with additional features like hover styles and all that. You can even use intrinsic web design and custom define the grid with modern CSS features. You can define individual breakpoints and all this without having to get into the code for example.

Then there are also a couple of custom blocks with Greyd.Suite for example our popover block that you can use in the navigation, for example to create popovers, dropdowns, mega menus, off-canvas, burger menus or like I said these kind of popovers where in this case I’ve included the live search. There’s of course an individual tutorial on the popover block as well in our Helpcenter. By the way, Greyd.Suite is built accessibility-ready, which means that all the technical parts of accessibility, the code output, has been taken care of by Greyd, so you only have to focus on the content and design part to make your web shop meet the directive of accessibility.

What’s really, really interesting in the combination of Greyd and WooCommerce is our advanced query and search features. To show you that I will go into the homepage, where you will see that this here is a Greyd post slider. Post sliders can be used to display any posts from any post type and of course also the WooCommerce product post type. Why should you do that? Because you get a lot of advanced filter options for example. You could add custom fields, meta fields or individual taxonomies for example to your WooCommerce post type which is possible in Greyd and then you can use these taxonomies or these filters here in the advanced filters. Or you can also filter by date, you can select individual posts, you can exclude individual posts, have a different kind of sorting… So there’s much more possibilities to individually define which posts are to be displaced on which pages. And you can even combine several filters here, so it’s really really individual.

Another feature that comes with the queries is our dynamic tags. You can see them here with Greyd.Suite, you got all fields and information of your post type, of your product post type and you can use it dynamically. This also includes any meta fields that you may have created individually. And with our dynamic tags, you can then insert these dynamic information in your post overview for example. And then when you have the price, you have a lot more design options for example, how and if you want to have a currency symbol, the format, how bigger numbers are to be displayed, whether you want to show cross prices… And for example if we change that here to the sales badge, you can define – you cannot see it here, let’s do it here – whether you want to show discounts for example.

When it’s about the product or post title, you can set a link to the product page and define it individually and a lot more options. So whenever you feel that the options that WooCommerce gives you are not enough, then you can always change and add blocks of Greyd and use our dynamic tags. They are available for buttons, for links, for headlines, texts and also there is a block called dynamic image, so you can also insert images individually. So for example if we go into any of the WooCommerce templates, I don’t know maybe here this archive, oh this is not a WooCommerce template, excuse me, let’s go into some kind of archive and then we could say for example, here we already have our dynamic tags but if this not enough for you, you see this is not an option here with the regular button but you could add for example a Greyd button, can style it individually but you can even use the dynamic tags here in the button by the way. You can also use it with # and then insert, I don’t know, any text you want to display and then get rid of the other button. So this is just an example.

Another feature that’s really interesting when combining Greyd and WooCommerce is our conditions. Let me show that to you as well and add a conditional content block here. What does this block do? With this block you can define a condition, for example based on URL parameters, cookie information, user role, time or post information for example. And with this, you could show different content, different products, different information to people that come via a dedicated campaign or newsletter as compared to regular visitors. Or you could say, in the morning I want these products to be highlighted, so whatever content you place in here, and then is set another container, so what to be displayed in the afternoon or in the evening for example. So lots of, lots of possibilities.

And you can even place the conditional content inside your post overview and then for example different the layout depending on some post meta fields. So for example if you say you have a meta field that says, I don’t know, location where it’s available, I don’t know, store in Munich and if this location is set or has a certain value like Munich, then you could add an information like “is in store in Munich” for example. Lots of, lots of possibilities. And with Greyd.Suite you also got forms, you get popups, you get custom user roles with which you can for example create individual user roles for certain customer groups for example and then with the conditions and some special login forms, you can create gated content areas that are only accessible to certain user groups for example. So there’s lots of, lots of possibilities.

And with our Global Content and Site Connector features, you could even connect several websites with each other and synchronize content, for example your products, over any number of websites. And these websites don’t even have to be on the same installation. They could be multisites, single sites on different servers, doesn’t matter. And with this you could for example display these products also on other websites without having to do the content management twice. So if you now change the price of this product to $100, it is going to be changed on all websites that are connected.

So these were just some examples of what you can do when combining Greyd.Suite with WooCommerce. So you see, there’s a lot of big features that I only just briefly introduced. We of course offer individual tutorial videos to each and every feature we offer in our Helpcenter and of course we’re also very happy to consult you personally in any questions you might have regarding WooCommerce.

For more videos and information, please visit our Helpcenter.