How to customize the WooCommerce Product Page using the Gutenberg Block Editor and the WooBuilder Blocks Plugin.
WooBuilder Blocks gives you total freedom to design the whole WooCommerce Product Page any way you like.
Links
14 DAY FREE TRIAL - [ Ссылка ]
Demo site - [ Ссылка ]
Timeline
0:00 - Intro
0:30 - Customized WooCommerce Product Page examples
1:00 - Using the Block Editor to customize a WooCommerce Product
1:53 - Enabling Gutenberg for the Product Page
2:30 - Adding Blocks to the Product Page
4:45 - Creating Product Page templates
Transcription
WooBuilder Blocks lets you customize the WooCommerce product page using the Gutenberg block editor. So you can create any layout you like with it. You can also create templates and apply those templates to multiple products.
You can add more elements. You can really tell a story about your products. You can create landing pages for your products. If you want to really show off your products, the WooCommerce product page is one of the most important pages on your site. And so having complete control over it.
So I'm going to click on edit product and you'll see that at the moment. This is just a normal WooCommerce product. I've just entered my product details, but you'll see over on the right here, I have this new button. This is the plugin we build the blocks that says enable. We will the blocks. You just click on that.
And now you have three choices. You can build your product layout from scratch. You can choose one of the pre-built templates that we've we supply, or you can use one of your own templates. I'm going to start from scratch. So I'm basically going to build this product completely from scratch. And when you click on that, you'll see it actually loaded in the Gutenberg block editor.
So now we have a hundred percent control to layout this product in any way you like. So this is fantastic. We can do anything. So let me just show you how this works. Now we have built a whole bunch of blocks that let you reconstruct your WooCommerce product page. There are, and there are many blocks in here that you would expect to see, like your product, title, your price, your short description, the add to cart button star ratings.
All those blocks are in here. But we have also added some extra blocks that are gonna really help you drive conversions. Like the, we build a stock countdown block that shows a really great visual representation that there is reduced stock. There is limited stock. There is also a sales countdown block in here that you could, that really drives your customers to let them know that there is a sale on that is ending soon.
So I'm going to start by adding a product image at the top, which is going to load that beautiful product image for me. Then I'm going to start to layout the other sections of my page. Now, one of the other great things about we build the blocks is that you can use any third-party blocks within here.
So let's say I wanted to create some columns in here. Well, let's do that. I can just use the Gutenberg column block. This is just the standard column block. Good. And I can really start to be very precise about the layout. Now, within this left-hand block, I'm going to add some further blocks, which is going to be my product price.
So my product title block is that, that one in. Now within each block that you add, you can also customize it. So you'll see over on the right here for this product title block.
Right? Let's just add a few more blocks under here. So under here, I want to add the price. And again, I could customize the size of that. If I wanted to, then I'm also going to add a short description. And then under the short description, I'm actually gonna add the stock countdown block.
There we go. There's my, there's my new product looking fantastic.
I just want to show you how you can create templates and then apply those templates to multiple products. So you just go to it when you're creating the product layout. This is the one I just created. You will see a new option over on the right that says, save as template, click on that.
And this is where you can save this as a template. So let's call it, let's call it full width image template. Give it a name that you can recognize. And that, that saves that as a template. And then over on the right here on the price, right on the left and the products, you'll see all templates, you click onto that.
And this is where you apply that template to the category you want. I've been categorized that automatically. Can I pick on that template? So here's one as categorized as women.
So it's, it's a really great way that you can apply that to multiple temp products using templates. Thank you very, very much for watching. There's a free trial, so do take it for a spin.
