WooCommerce Product Page Design | WooBuilder Blocks | Gutenberg

now do you find yourself getting frustrated trying to customize? The look of the woo-commerce product pages and the general reliance upon page builders like elementor? I know I do and that’s why I’m excited to take a look at wood-builder blocks from poodle press. Now this add-on lets you not only use Gutenberg to customize your products and product pages. But also create templates that you can quickly assign to those products. What’s even more useful is that it plays really nicely with other Gutenberg blocks plugins. Like cadence blocks or stackable this should open up even more design options.

Find the right domain name for your website the best Domain Name Generator website is topfaida.in

Getting Started WooBuilder Blocks

That’s the introduction out of the way. Let’s go ahead and see how woo-builder blocks work and create some new woocommerce designs for ourselves. Now once you’ve gone ahead and installed the woo builder blocks plug-in. You’ll notice that you get this message pop-up saying that they want you to install the required plugin Caxton.

Now this is coming from the same developers and what this does is it gives you the ability to create some more comprehensive layouts different columns and things. Like that you don’t need to use it you do have to install it you don’t need to use it you can go ahead and use any other kind of layered block plug-in.

That you won’t like cadence stackable those kinds of things so all you need to do is make sure this is installed and activated once that’s done that’s going to take you over now to ask you to go through the whole process of working with freemiums you can skip this.

Also Read: Can I install/update WordPress plugins without providing FTP access?

Because this is a free plugin so you can skip that and bypass that completely. If you want to go ahead and find out a little bit more about Caxton. How you can use it then you can go ahead and watch this little video I’m going to ignore that completely for now. What we’re going to do is we’re going to open up. The product section and take a look at our products because. This is where we’re going to work with the woo builder blocks.

WooBuilder Basics

Now the first thing we need to cover is how to start using woo builder blocks to customize your products and what options we have to do just that so let’s open this beanie with the logo and to start working with the woo builder blocks.

We need to basically replace the tiny mce editor you can see inside here with the woo builder blocks basically. All being done directly through Gutenberg so we’re going to do is we’re going to click. This enable woo builder blocks button then we get asked what do we want to do do you want to start completely from scratch use a pre-built template one of the templates supplied alongside will builder blocks or once you’ve gone ahead and created some of your own templates you could use.

Also Read: How to manage multiple WordPress websites.

That to start things off and it’ll list. The different templates you have inside here or we can just say continue to use. The default editor if we’ve opened this up by mistake let’s take a look first of all. The pre-built templates so let’s choose pick a template and. This will then show us the different templates we can use as a starting point now you could take these and then edit them do what you want with them or you can just use them for inspiration or completely ignore them now if you press for time or you just want to see how these things are actually made up.

Then you can select any of these predefined layouts for me for this example we’re going to ignore those just wanted to show you that they are there should you want to use them instead let’s just go ahead and start from scratch and see how you’d build up one of these designs for yourself so to start building your page layout all we need to do is use the block inserter from the left hand side and if we scroll down

We’ll find we’ve got a new section inside you for blocks there we go there’s our will builder blocks and as you can see quite a lot of different options inside here we can choose from to start creating things you’ll also notice that we’ve got the template option so if we’ve decided we actually wanted to use one of those templates we could just simply insert this block pick our template and then start from there

Also Read: What is WordPress, used for?

However you can also do things like split testing you can insert any of the normal elements to do with the product so your ratings your description your title images and so on you’ve also got some quite useful things like a sale countdown option inside you so if you wanted to create that sense of scarcity you could use that inside here and we’ve also got things like the product reviews image carousel request a quote and so on so some pretty useful different tools to create things.

so let’s take a look I just insert some options in here to start off with let’s start by adding in some images so they scroll right down and we can choose between the product images or we could choose an image carousel if you wanted to we’ll choose the product images we’ll just insert this into our design and then once you’ve done that you then have the options on the right-hand side to manage exactly

How this particular element is going to look this block so things like the layout you can choose your image sizes and so on apply some radiuses if you’re using videos you can drop a link inside there and select an image for that you can control the appearance to a certain extent not a huge amount of control inside you and you know you’ve got the basic things.

Also Read: Create a folder if it doesn't already exist

That you need for this particular element and then we can kind of repeat that process let’s go ahead and add the title in this time for the product so we can grab our product title and select insert that and you see there’s our beanie with logo and now if we want to we can adjust the appearance on there and you can just work with the theme defaults if you want to or you can override those by setting the alignment and things and the font again you can choose

What you want from you or you can let it kind of default and fall back to your standard font so the setup as part of the theme that you’re using it’s up to you you can control the font size the text color and that’s about it really you know there’s not a lot of control over various different aspects but a lot of this is going to be picked up from the theme

That you’re using but I would still like to see some more granular control if that was an option so with that in place let’s go ahead and insert the description and we can choose between the long description of the short description for here we’ll just use the long description drop that inside there and then we can just simply insert our description inside.

Also Read: how to add category in WordPress

There so there’s a little bit of filler text in there and you can see that’s inserted so the final thing we’re going to add in is just the price so let’s just search for price and you can see we’ve got build. product price we’ll click to add that inside there and there’s our price and again we can go ahead and we can control the appearance of this the colors those kinds of things so let’s just make this a bit larger so

It stands out a bit better there we go and now if you want to you can reposition these now I’m just using a free little plug-in that lets me do this a little easier so I’m going to drag that up to the top and you can see there’s our price let’s select our beanie logo we’ll just come back in we’ll come to the settings inside this title and we’ll make some changes to that just make.

That a little larger it’s the title at the end of the day so let’s go for something 30 and here are the basics of creating your own design now at the moment this all looks fairly basic because all I’ve literally done is stack one various different block on top of the other to create what is not a particularly interesting looking layout but this is where the working with this particular plugin comes in you could use the Caxton plugin.

Also Read: WordPress Plugins Exposes Websites

That you have to install as part of it and that gives you more control over the layout but personally i would prefer to be working with something like cadence blocks or stackable or generate blocks any of that kind of block builders and then you can use those to create more intricate designs so let’s just take a quick look at how easy it is to start to integrate the two of these together and just give you a little bit more control a little bit more flexibility over.

What you want to create now for ease I’ve already just gone ahead and removed all those various different elements we started with so let’s go ahead now and take a look let’s open this up and there are our cadence blocks so now we can use things like the rows the columns those kinds of things to create a little bit more of an interesting kind of layout so let’s just choose the row layout and now.

We can create something from here so let’s just say we want to use this 5050 and we’ll just use that as an option and there’s our starting point so now we’ve got a lot more control using this for our layout side of things so let’s start by adding our image onto the left-hand side so let’s just do a search for images and we’re going to say we want the product images there’s our product image and again all the same controls over on the right-hand side.

Also Read: How much can a Hindi blogger earn in A month?

Now to control the image itself but we also have on top of that the ability to work with controlling the container and the various different elements that’s part of cadence blocks and now let’s go to the right-hand side let’s come into here and we’re just going to go for price and we’ll just add that inside there and you can see there’s our price option and we can just keep on adding inside here until we create something just a little bit more unique.

So let’s just go for the short description inside here now you can see that drops in the content inside there and then we can come in and do anything else we want so let’s go and add the add to cart button in there we go add to cart we’ll insert that in there and there’s our add to cart button and we can carry on just adding whatever we want so we could say we want the rating inside here we’ll say product rating let me go.

There’s nothing inside you at the moment this just drops in a placeholder to say that when there’s a rating for this product or any other product then you can just simply have that placeholder display the actual content on the live end of the site and now we can do is we can just go ahead and start adding more in so let’s just say we want to add another block inside here so let’s go ahead and add in another row layout gives us a single row this time there we go and now we can go ahead and do things like add in additional sections so we could stack these on top of each other.

Also Read: How to change the domain name in your WordPress site?

So let’s just say we want to use the tabs and we’re going to use the tabs option which is part of cadence so we’ll insert that inside you we can then choose the design that we want to work with there are the tabs we can click we’ll get rid of the second one-third one sorry we’ll come inside you and we’ll just set this to be the description and we’ll set this to review and that we can do is we can just simply open this up and the go-ahead to a search for description.

We’ll say we put the long description inside this obviously there’s nothing much inside you at the moment let’s just replace that with a little bit of filler text there we go so pretty cool come to your review section and we can do the same inside there so we can just expand this out we’ll do a search for reviews and we can do there you go we’ll build our product reviews i’ll see nothing in there at the moment.

Now we’re doing this we’re stacking these on top of each other we get the control of working with the woo builder blocks to create our designs for content and then we’ve also got the power flexibility of a block builder like cadence blocks to create something just a little bit more unique now this isn’t a particularly great design but should give you enough information to get you started to see how these things can work in combination with each other

Making Templates

Now that we’ve taken a look at how to design your product page layout how about turning our design into a template ready to apply to the existing and future products so to access the ability to save this design that we’ve created as a template is really easy we need to do is come to the product option choose status and visibility if it’s not already open and you can see we have an option in there that says save as template all we need to do is select that and give it a name so it’s going to call this sample template and click ok and that’s our template saved

AssignTemplates

Now that’s our design completed let’s go ahead and assign it to a couple of product categories and see the effects of doing just that so to do this we just simply need to go into the option underneath the product section called all templates which is part of builder blogs and inside there you can see all of the templates.

That we’ve created now i’ve created one previously called a two column layout and you can see that’s been associated with the accessories clothing hoodies and t-shirts let’s delete that for now and let’s just edit our sample template so we’re gonna click on edit and inside there we can now choose where we want to associate this so this is going to show us all of the different product categories that we have and all i need to do.

Now is choose the categories that i want to associate this with so we’ll choose clothing accessories hoodies t-shirts and we’ll also say hats as well click update and now you can see this tells us that’s where this template has been associated so now anywhere on our site that has a product in those categories or in any of those categories it will use our new template so let’s take a look at that in action let’s go ahead and open up our products we can see that we’ve got this logo collection is inside clothing so let’s just open that up to view it and you see this is now using the design that we just created this is our review section our description section you can see this our add to cart button you can also see that any variations associated with a product are also listed inside you so all being pulled in for us so pretty cool and very easy to set up.

Templates Limitation

Now while templates give us an easy way to assign our designs to other categories and products inside those categories it does have one big limitation that may be a game changer for many of you so let’s take a look at what i’m talking about so we’re back into the old template section if we open this template up you can see we have no design options inside you we can see what it’s associated with we can change any associated categories but we can’t change the design let me just go back over into all products and let’s open up

The one we created this design for originally now you can see we can enable the woo blocks you can see our design is basically gone because we associated it with that template we can enable the woo blocks builder and we can choose to pull our template into let’s say we’ll use our sample template you can see everything now is pulled in but if you make changes to this nothing will actually happen to the template itself it’ll only change on this specific entry so for example.

If we come in and we make a change to the look of this total amount of money it’s going to cost you for the product and we’ll just change. This over there we go so we’ve made some changes to that we’ll update. This and we’ll go ahead and preview. This particular product so let’s open this up and you see there are the changes being reflected inside this, however. If we go to a product in the same category using the same template and we’ll open this one up, for example. You see everything is using the same default template. So the template can’t be updated and that’s one of the key things that i find is a bit of a limiting factor with this so i would love to see the ability to have your template editable so you can make changes globally then anything that uses that template is going to see those changes reflected across it.

Plugin Pricing

Now before I wrap things up and give you my conclusions. As well as my pros and cons let’s talk about money. How many is boo builder blocks and what options are they for different licenses. So as you can see there are currently two options for licenses you’ve got. The woo builder blocks give you x number of sites one year of support. And updates and a 14-day money-back guarantee or you can go for the e-commerce bundle.

That bundles in pretty much all of the portal press plugins and so on so up to you which way you want to go with this. I’m only using the woo builder blocks at this point so you can see it’s 49 per year for one site which is a little bit expensive but in all honesty.

If you have more sites that’s where the thing kind of gets fairly cheap so for example five sites literally only jump up an extra 20-ish dollars and then if you go up to 25 sites. You can see it’s 99 and you go to unlimited sites at 199 and there are lifetime options in here if you want to grab those so you can see 265 and 25 site license for 5.95

So if you’ve got a need for this then there’s your options price-wise i think limiting the lifetime option to 25 sites maximum for that particular price is a good business move it. Means at least the company moving forward have enough sustainable income to be able to provide support and so on and develop the product giving a lifetime license for unlimited sites can be a little bit difficult when you want to keep on making revenue if you offer a lifetime option ongoing as opposed to a short period of time

WooBuilder pros

• So first of all it works great with other gutenberg blocks like cadence or stackable,
• it’s incredibly easy to use
• all the key features you need to build a woocommerce product page design are included.

WooBuilder Cons

• the need for Caxton the plugin to be installed once the template is created you can’t edit it
• have that apply to all your pages and posts using that design.
• I’d like to see more styling options for example when you’re inputting metadata you can’t set
• them to be vertical as opposed to just horizontal i also love to see it support other woo-commerce page templates.

Find the right domain name for your website the best Domain Name Generator website is topfaida.in

Final Conclusion

mobile the blocks have been around for quite a while so it’s not new and therefore has plenty of time to mature it makes customizing your woo-commerce product pages incredibly easy and plays very well with your preferred WordPress theme and block plugins on the downside though.

The fact you can’t edit your templates after you’ve created them is a little frustrating and limiting when you want to make a design update in the future I’d also love to see the plugin expanded to give us control over other aspects of woo-commerce but I can see there may be an overlap with the default woocommerce blocks here.

Still it would be nice to have one central location to manage all your design files and templates for your online stores, however, all in all, will builder blocks is a solid plugin and if you’re looking to stay away from the reliance on WordPress page builders to keep your site as lightweight as possible this is worth adding to your shortlist.

Read More: WordPress Plugins Exposes Websites