I have been using WooCommerce in one way or another since it was released in 2011. And no matter what I was offering, whether design, coaching or training, I cannot tell you how many times I was asked about customizing either the shop page or product page in WooCommerce.
There are a lot of page builders out there, but the search for a builder specifically for WooCommerce was yet to come. Now it has. So I had to check out the new WooCommerce Builder for PageBuilder Pro from PootlePress.
WooCommerce Builder for PageBuilder Pro
First, let me explain. The WooCommerce Builder is a free module that comes with PageBuilder Pro. This gives you the power of that page builder for your entire WooCommerce site, yet adding some nice customizations specifically for your product and shop pages. The drag-and-drop builder gives you some cool options that takes those pages from their same old, same old look into something more eye-catching and user-friendly.
Customizing Your WooCommerce Product Page
For some initial customizations and control over your product page, go into the customize and you will find WooCommerce > Product Details.
With this you can do several customizations easily to your product pages.
But you can take this even further with the product pages.
If you go into any of your product pages in the backend of WordPress, once you have this plugin installed, you will now find a noticeable red tab labeled Product Builder.
And if you click on that it will take you to the site builder where you can now add any modules to your product page in any order you want. What is cool about this is that it take the typical information you have used to create that product page and let’s you be more creative with it. As you can see here, I clicked on the first block and can edit or delete it and then continue on by clicking the + button to add more blocks. As an example, I could easily add a background image, desc. and add to cart button in this first block.
As an example, I could easily add a hero section with background image, short description and add to cart button in this first block.
If I was to click on the option for the blocks, you will see that there are these WooCommerce specific features that you can drag and drop onto the page. I can add these anywhere.
Or if I click on editing a block, it also gives me all of these options that I can drop into it.
A Couple of Examples
In the next two screen shots you can see the sections that were added for both ratings and reviews.
If I added this it automatically pulls the rating in and gives me the option to add a title, text or anything else I would want for this block.
Here I can easily add the existing reviews for this product.
The other features which include product images, product tabs, add to cart button, short description and related products can also be added to the page. The beauty of this builder again, is that you are taking each element of the standard WooCommerce product page and creating your own layout. With a page builder like this it can be easily sorted by resizing the blocks and even creating blocks with multiple columns. In a nutshell, the sky is the limit.
Customize Your Shop Page
Again, this is probably one of the biggest requests I have heard, the ability to customize your shop page. The cool thing about this builder is instead of your typical shop page you can break it up into blocks using categories and other default options that WooCommerce comes with. Imagine having a shop page that highlights a category of products, shows three of those products, and directly below that another category, so on and so forth.
As with the Product Details I showed you before, you will find on the WooCommerce tab in the customizer the Shop option.
Just for your Shop page you can see all the customizations and control you have over this specific page.
But as I mentioned, you can build your shop page as well. And you would do that by dragging the WooCommerce module into a block. When I do that I get these options again, but for my Shop page.
For example if I chose Product by categories I could set up my first block. Not only can I control how many are shown in that category and the number of columns, but I also have the option to hide product name, ratings, price or add to cart.
And the results look like this where I can add a custom heading and any other text I might choose.
Then if I was to add another category below that my shop page would look like this.
Also, if I prefer a carousel over single images, I can simply edit an existing block or create a new one using individual products.
Resulting in this carousel on the shop page.
You can imagine where this would take you for your Shop page. Not only are you able to control the WooCommerce products, but you can also use other modules such as a hero image, etc on this page to create your very own customized look.
Lastly, the WooCommerce module gives you these options to hide breadcrumbs on your checkout page and enable a distraction free page as well.
Start Customizing Your Shop and Product Pages
As with other products that I have used and tested from PootlePress, this one is a winner. I love not only the ease of using the builder but also just how far you can go with customizing two critical pages of your WooCommerce store without knowing code. Again, to really see this in action, check out their site and watch their videos.