My Top 10 Blocks for WooCommerce

morning and welcome to my top 10 blocks for woocommerce so the wordpress block editor or gutenberg is fantastic now at letting you customize the key pages in your woocommerce store so your shop page your category pages and your product pages and also upsell your products throughout your site so this guide is going to talk you through the best blocks out there that are going to help you maximize your revenue so here we go we'll start with number 10 and we'll work our way to number one hope you find it useful okay this is the featured product block and it's a free block that comes with woocommerce now and so i'm just going to add it to this page and show you what it looks like but it's really nice for featuring your products in like a big banner that's what it's ideal for so here it is the featured product i'm just going to drag it across here and then the first thing it's going to ask us is to choose a product so i'll just choose the bracelet here click done and then we'll see how it takes the product image and adds a lovely sort of background image to that and you'll see it brings the product title in the product short description that's this section here your price and this shop now button you can change the height of it just by dragging it up and down so you can make it bigger so these are really great for banners or you might want to put this in a post to upsell your products within posts or you might want to feature this if you're customizing the shop page and i will put a link in the description on how you can customize your shop page and your category pages using a block like this you can over here on the right you'll see some options where you can show the description or show the price so you can just toggle those on and off i probably want to keep those on and then here you can change the overlay color and the opacity of that overlay color and so i'm just going to clear that and it defaults to about 50 i think which is kind of cool it shows you know your text will show but the image will show beneath it and then over here on the right you can also change the focal point so you can change the position of your product image behind there so there we go that's the featured product block it's a really really nice simple block to use if you want to change the product that you're featuring you just click on the block and you see this little pencil up here click on that and then here you can actually just select another product and again all the same options apply to that product so there we go there's the feature product block let's move on to the next one right this next one is a little bit of a cheat because it's not actually available yet but i'm so excited about it i wanted to show you um what's coming and it's called the recently viewed products block why it's so exciting to me is be is because we're starting to personalize uh woocommerce now to your visitors using blocks this is the first one that really does this so it's really really exciting so um it it just comes as a block so it's really really simple to use it's just called the recently let me just show you it's called the recently viewed product block here and that you just add it into your page and you can set the number of rows and columns you want over here on the right so let me just set this to one row so i'm just going to show one row um the the products that your customers have recently viewed and as they browse throughout the site this block will be dynamically updated so you can imagine this on your home page you know this will dynamically update uh with the products that your customers have actually been viewing as they're going through their store so probably the most interesting products to them you could also use this um incidentally on your individual product pages if you if you're using our woo builder blocks plugin instead of related products at the bottom you can actually have recently viewed and imagine how powerful that would be or you could dynamically inject them into your blog post using our block injector for woocommerce plugins so there's lots of use cases where this personalization is going to be extremely powerful so let me just show you how this works it's quite hard to demo because it's personalized to the person shopping but if i go and just view another product for example let's go and view this one here can you see up here now this site's got the debugging information left on it so we can actually see what's going sort of under the bonnet and can you see these are the products that i'm i've i viewed and i'm currently viewing this is the one i've just viewed which is the garmin phoenix 7. this one's been customized using our woo builder blocks plugin but it's still a product as far as um our new block is concerned and when i go back to that page where i inserted the block can you see it's actually put that product image in for me so it's dynamically updated the garmin fenix 8 product for me which is incredibly cool and incredibly powerful so there we go there's a sneak peek it should be out fairly soon it's called the recently viewed product block and i think you're going to love that one okay so this next one also falls into the realm of not being quite available yet but again it's so exciting and so powerful that i wanted to show you it give you a sneak preview it'll be out fairly soon it's called block injector for woocommerce the idea behind this is that you can dynamically inject content anywhere within your website so that's your posts your pages but it's also within all your key woocommerce pages as well uh so let me show you how it works and i'll explain a bit more about how it's going to interact with woocommerce but that the premise is that you create your content over here using the block injector menu and we're just using um gutenberg to create our content so you can create anything here you know if you can do it in gutenberg you can create your your um content type so what i've done here in fact let's start from scratch what i did here i just added the woocommerce featured product blog to start with now this store only has one product called the sports tour and i'm going to add that here so that's my content that i'm going to dynamically inject into specific places within my site and to do that over here on the right i've got this block injector tab this is where we set the location and there are a whole bunch of places where you can set the location so let me just show you what those are here we go so you can set them in the entire website and that's your posts or specific posts you can set them just to appear in post by category or tag you can also set them in all your pages or specific pages that you choose and then we're also building places specific places that you can put them in your woocommerce pages so all your woocommerce pages all your product pages you can tailor it to target it just to show in products by category or by tag you can say right just appear in specific products or you can also have it in your category pages your archive pages or just certain category pages you can have it showing your shop page your account your my account page or your basket page or your checkout page um there are also specific places where you can position those within each of those pages by default for the woocommerce ones that we're just talking about the woocommerce ones here you can have those at the top of those the bottom of those or also saying you can put them in places which are called custom hooks so if you don't know what hooks are they're basically think of them as likes preset places within your woocommerce pages where you can dynamically inject stuff and woocommerce there are a whole bunch of these in woocommerce here's an example that these guys have put together a visual representation of where the hooks are and this in this case they're just for the single product page but these exist on all your key woocommerce pages so we can be very specific and let you target that you know if you want this block to just come in just here and the woocommerce you know above or below the uh single product summary you'll be able to do that and we're going to make this this these hooks very visible for end users as well so you're going to be able to see them just by clicking on a link in the admin toolbar so that's the principles of it let me just flick back to um the one i'm showing you here so over here in this one all i've done is set right i want this to show in posts by category type and then here i've just selected because this is a rugby offer rugby okay so this offer is just going to appear in all my posts of category type rugby now i could also exclude certain posts from that filter if i wanted to as well but i'm happy with that now when i go and click on my posts here and view a rugby a post that has been categorized as rugby here's a good example this is a lions rugby tour post categorized in the middle as rugby we should see that offer sitting at the top because i set it to appear at the top of that post but if i go into the post itself we'll see that the offer isn't there it's just been dynamically injected which is just incredibly powerful if i go back and make a change to that post that uh injection place now let me just show you this let's go back to the rugby offer and what i'm going to do this time i'm going to let's have it still show in rugby but let's say i want to show after a certain number of blocks and let's have it after three blocks update it and now on all posts of type rugby that post will appear after the third block one two three there we go so there we go there's a there's a look a sneak look at the um the block injector for woocommerce it's coming very soon uh it's gonna be incredibly powerful you know you can imagine if you've got like 2 000 posts and you you want to try and sell your products within those 2000 posts at the moment you probably have to manually go through and add offers well this you can do it in one click and have them appear in multiple places so i think it's going to be incredibly powerful right the next one is the product card block and we've got an example of it here it's a really simple block but it's very elegant and what happens when you when your customers go to a product and hover over them they get to see more details on the product so it's really great block of being able to show those more details in an elegant transitional way just comes as a block this is part of our storefront blocks plug-in let me just show you how it works so i've added the storefront blocks plug-in to this site and i'm just going to search for product card it's this one here i'm just going to drag it across into the page it will load with some initial products and you'll see those if you click on the block and look in the block customizer over here you can actually hand pick which products you want so if you want any of these products to show so pick a few of these you'll see as i pick it's actually going to show some of those products for me um and let's just add a couple more so we've got a nice equal we've got two rows and you'll see when i hover over them by default they do this nice fade animation which is just basically picking up the gallery images automatically so when you create a woocommerce product you can set the gallery image and that's what it's picking up for me there's lots of options with this block i just want to show you really the one where you can do things like um change the transition which is over here can you see you've got card animation so you can either set it to flip or to fade you can do loads of other stuff with this one like you can also you know change the font colors and add descriptions and add prices show the price show description all that sort of stuff and change the the size of it the main thing i wanted to show you there was this ability to hover over over it and you get this lovely ability to see the other you know closer details on the product without necessarily having to go to each product page to see the details so a great block if you want to you know customize your shop page again or your category pages um so there we go there's the product card block next up is the masonry product grid block i'm a sucker for masonry grids i love them well you've got this kind of brick layout i think they look really really really elegant and i think for certain products they can just um kind of raise the store to a really sort of different level uh so this is a block again part of our store from blocks plug-in i love this one so let me just add it to the page and it just automatically creates this masonry grid layout for you dynamically so it's very very simple to get up and running but it just looks beautiful kind of out the box but again you can choose which um you can choose which products you want to show you can change the order of the products you can also do things like you can um hide the titles so if you just want to show your images in a nice grid like this which i i'm kind of in love with then you can do that and you can also do cool stuff like you can change the grid gap so if you want no gap can you see how that gap is just changing like that so um that's really really cool isn't it you can also change the height of the grid like this so it just kind of takes your shot to the next level so that is the masonry product grid um for part of the storefront blocks plugin so this next block is really useful it's the best sellers block from woocommerce and it comes as part of woocommerce let me just search for bestsellers here it is so what it lets you do is what it says on the tin it just lets you show your best selling products in your woocommerce store so you could again you could show this on your shop page or your category pages if you wanted to because you can filter by category here as well or you could have this on your homepage your homepage might be a great place to show this you just have a section on your homepage which you might call bestsellers you can change the number of columns over here in the block customizer can you see i'm just changing this little slider here and you can set the number of rows if you want to and then you can also you know turn off and turn on whether you show the add cart um button or your product description or your titles so there we go that's the bestsellers woocommerce block really useful for dynamically showing your best selling products right this next one is the product list block this is a really good block for a few reasons the first is well in fact let me add it to the page so you can actually see it um so it's called product list so let's just search for that there it is and we'll just add it to the page so the first is it will create your um products in a nice list layout so rather than a grid layout you've got a nice list and your customers can quickly scroll up and down the list very easily so it's good for very good for mobile but also good if you've got you know that suits your sort of product range but it also comes with some nice options to customize it so what the first thing is you can precisely pick the products that you want to show in your list like i'm doing over here on the right i'm just picking some products the second is you can rearrange those products in any order that you like just by dragging them up and down so that's really cool and then it's also got some really nice features so you can actually filter these by category so you could use these on your category pages you could use them on your shop page as well it's got pagination built into it if you have many products that you want people to paginate through to and then it's got this nice feature here where you can actually um show view product button so you can either have an add to cart button or a view product button if they click view product that'll actually take them to the product where they can get further details on the product the other really nice thing that you can do here is you can actually hide these so if you just want to have like catalog mode where you're not actually asking the customer to do a transaction you can just turn off the add to cart button and you've just got a product list a really nice product list so it's a really really um useful block for a number of different reasons it's called the product list block and it's part of the storefront blocks plugin right this next one is fantastic for showing testimonials and reviews which it can be incredibly powerful when you're trying to you know so show social proof of your products on your site and here we have one on a page actually with conjunction of another block that i'm going to show in a few minutes this is the flip book block which we built but this is the reviews block from woocommerce it's a very simple block to use there's two types of blocks actually there's uh reviews by product or an all reviews block you can use and they both work in fundamentally exactly the same way so if i want to add it under this flipbook that i've got going on here which i'm going to show you in a second you just come to the plus sign search for reviews and you'll see the two reviews you've got reviews by product or by category or sorry three or all reviews as well so if i drag the all reviews underneath that's just going to list all the reviews from your customers now it's me because this is a demo site and i've added all the reviews on here but you can also customize them over on the right here the in the um customizer panel so you could do things like um hide the product name if you wanted to you could change hide product rating you can hide the reviewer name you can get rid of their image if that's an issue you can get rid of the review date you kind of get the idea or you can have uh the product that's been reviewed here or the reviewer photo so the product's quite cool if you're if you're going to put that like on the home page maybe the product would be better than the reviewer photo so it depends a bit on the context of how you're going to use this you've also got some options down here how you're going to order them by and how many reviews you want to show and a few other things like that but fundamentally what you're doing here is trying to show to your potential customers that other customers love your products and of course because they're blocks you know you can move them around the page you could put them into columns you can design them anywhere you like really so there we go that's the reviews block from woocommerce it's a really really simple block to use and you can use it on your home page your shop pages within blog posts or on a testimonial page it's really up to you where you use it okay this next one is one of my personal favorites probably because we built it and you can see up on the screen it's called the fip no it's not it's called the flip book block and it just creates your products in this beautiful we call it flipbook but this lovely lovely flipbook that just flips across the page here and so you can either let itself run or your users can come in and jump so fantastic for like a home page or shop page you can filter them by category as well if you want to but they're incredibly simple to set up and running again these would be good within if you want to upsell products within your posts potentially using the upcoming block injector plug-in so let me just show you how this works you just add the block itself so i'm going to drag it across very simple to add there we go and it starts you off i mean it looks great but you can also as you probably expect by now you can choose which products you show in this so let me just pick them over here on the right you can change the order how they appear just by dragging them up and down so the red bag is going to be the first product in the list i want the border bracelet to be first i can just drag it to the top you can decide some things like show the price here so if you don't want to show the price you can turn it off you've got layout options in here so you can make it full width so that's going to span the entire width of your website you can change the height of it as well just by dragging this little slider up and down how cool is that um you can change the top and margin paddings here so that's good if you're positioning this within other elements within your site you can also decide whether you want to center this let me just make this a bit smaller whether you want to center this text like i've just done here see how i've just centered the text or you can have it aligned right over there it's really up to you and you can change the fonts and the font sizes and then and the font colors as well so it's a really cool look block i think it looks really really beautiful again it just takes your store to the next level so it looks far more professional if you're using you know blocks like these are then rather than just a standard woocommerce grid all the time there is a place for the woocommerce grid but this stuff elevates it it just elevates your site um to the next level so that is the fit flip book blog right the next blocks there's actually two two blocks and the checkout and the cart block now normally when you um have a woocommerce site your checkout page and your cart page will be determined and work because of the short codes that are put in them automatically by woocommerce woocommerce does this for you and there are you can see them here that it's a whole bunch of short codes that woocommerce ads into your site for you and you'll see them here this is actually just added automatically using the short code block and then this is the actual short code here and that just says right bringing the checkout into that position but woocommerce have actually developed a block for the checkout now which they are claiming uh will give you a 10 improvement in conversions so it's more elegant and and you'll get higher conversions so i do recommend you use it it's very simple to add you just as you saw there so you just delete your existing short code from the checkout page and then click on the plus sign now you will need the woocommerce plugin to see this block because it is actually part of the woocommerce blocks plug-in not part of call woocommerce quite yet but here we go down here can you see there's a checkout and a basket i'm on the checkout page so i'm just going to add that into my checkout page and it'll replace the existing short code that i just deleted and can you see we've got we've got a different layout a much more elegant layout much more concise layout um for your block and again just to repeat they are claiming a 10 improvement in conversions because of the um the way this block is being built and will be developed so you're kind of getting the best of best of breed um if you start using this block there are there might be some compatibility compatibility issues if you're using third-party plugins to tailor this page so just check with those before you start using it on your real sites you'll also see over on the right here we've got some nice options um to customize it so you can you know turn on certain fields like company turn off flat and phone and stuff like that all just with these simple little toggles and you see how the fields over here on the left are adjusting automatically uh you've also got options here to show links to your policies and a to show return to basket link okay and a few other things as well you can have a dark mode if your theme um has a dark background color so there we go there's there's one for the checkout and there's one for the basket i'd recommend using them if you are using blocks and once you've checked the compatibility any compatibility compatibility issues that you might be having on your own sites so there we go there's my guide to my top 10 blocks for woocommerce let me know what you think did i miss any out that you really really love i'm going to put a link to a guide a huge 5000 word guide that i've done on woocommerce blogs in the description below plus i'll put some links in on how you can use these blocks to customize your shop page and your category pages if you enjoyed this video that's great if you can give it a thumbs up that would be fantastic because it just really helps spread the word and if you want to see more videos like this around woocommerce or the block editor hit subscribe and you'll be informed of any time i do a new video so thank you so much and i shall see you all soon

Channel: Jamie Marsland

Views: 1,675

Keywords: best gutenberg blocks for woocommerce website, best single product block, block editor wordpress, gutenberg, litespeed esi, top 10 wordpress blocks, woobuilder blocks plugin, woocommerce

Id: FQbn-TRt2pk

Length: 23min 42sec (1422 seconds)

Published: Tue Apr 27 2021