ProductX WooCommerce Builder for Online Stores

    Nitansha Tanwar
Listen to this article
ProductX WooCommerce Builder for Online Stores 1

The popularity of the WooCommerce plugin for creating online shops continues to rise. The WooCommerce ecosystem is widely popular and is currently the first choice for creating eCommerce stores. Nowadays, most small business owners are creating their online store in WooCommerce. Because of this, it is hard to make a site that stands out from other stores.

Not only that, WooCommerce lacks many essential features that are required for an idol online store. If you want to overcome this situation, you can try using a WooCommerce builder plugin. It allows for creating different types of essential page templates with all required features and altering them with default ones. So in this blog, I will discuss one of the most promising WooCommerce builders that offers all essential features without leaving the Gutenberg ecosystem.

Introducing ProductX: Gutenberg WooCommerce Builder

ProductX is a Gutenberg based all in one solution for expanding the functionalities of the WooCommerce plugin to create idol online stores. It offers multiple product blocks, essential features, and various add-ons.

WooCommerce Builder is one of the powerful add-ons of ProductX. It helps to dynamically create templates for multiple pages and override the existing WooCommerce templates. 

The main attraction of the Builder add-on of the ProductX is that it works as a Gutenberg editor. And because of that, it has full dynamic building capabilities without any redundancy.

What Can We Do With the ProductX WooCommerce Builder

As I have already discussed the Gutenberg WooCommerce Builder add-on of ProductX, it’s time to discuss what we can do with it. If you are familiar with any of the popular builder plugins, it will be easier for you to understand.

Just like any other builder, it helps to create and customize templates for most of the essential pages of WooCommerce stores. That includes: 

  • Shop Page
  • Product Archives
  • Product Categories
  • Cart Page
  • Single Product Pages and much more

After creating templates for the above-mentioned pages, the default templates of your existing pages will be replaced with new ones. 

How to Use The WooCommerce Builder of ProductX

Obviously, only having a solution doesn’t make it the best choice. An obvious solution must have a good user experience too. Most WordPress users want every solution to be simple and easy to use. So, let’s check how the WooCommerce Builder of ProductX works.

As I said earlier in this blog post, the WooCommerce Builder is an add-on to ProductX. So to use it, we have to turn it on after adequately installing and activating the ProductX plugin. Here’s how:

  • From your WordPress Dashboard, Go to ProductX Section
  • Now, Click On the Add-ons Section of ProductX
  • Turn On the Builder from All Available Add-ons
ProductX WooCommerce Builder for Online Stores 2

After turning on the Builder add-on, you can create unlimited templates and replace them with the default WordPress templates.

Let’s see how we can create a template to make it easier for you to understand how it works. So, you need to follow the below steps to create a template:

  • Go to Builder Section 
  • Click On the “Add New” Button
  • Add a Name of The Template
  • Choose Type of The Template 
  • Select Conditions If Required
  • Click on The “Create Template” Button
cylGOHfu3Z8U4sheSjjXaNPNzp1GZ4rNdpWnzY tiPfmBWDRM5Zd9VeyKQ2cI6jmH2yjQ9pfflmeT
ProductX WooCommerce Builder for Online Stores 3

From the type selection option, you need to choose the page for which you need to create the template. And, then select the condition according to your requirements.

Create and Customize Custom Shop Page using the WooCommerce Builder

Now, let’s see how you can create a custom shop page template from scratch. First of all, select Shop as the type while creating a template. No need to select conditions as WooCommerce Shop has only one template. 

T6bDiOAOuA0afLxKFMI F7DqH2qFwDjgi0FSuNdcYkA5kPlOA AW9E3y7ZitiGDLjJyNLRp ahRatfH9KfzZGPDrStzUxDRwF6LTvgWdpwiCdWQLjws8pwRFDlRYG2ZFRKMATC9uZyju248aNkm10mJnHI5xMMDvmnoglMecI5igwsfL3p YIrl8Tg
ProductX WooCommerce Builder for Online Stores 4

After selecting the type, click on the “Create Template” button, and your template will be ready. However, the template is empty, and you need to customize it from scratch.

While customizing the shop page template, it’s up to you what and how you want to display it. Don’t worry; ProductX has all the options to craft a perfect shop page. As you know, the perfect shop page must have products with filtering shops to let the shoppers easily find their desired items.

Now let’s see how you can add products and filtering options to the shop page. For instance, I will display products on the right side and filtering options on the left. However, you can also do the reverse.

For correctly displaying products and filtering options side by side, you need to use the Gutenberg column block. So I am adding a column with a 70/30 ratio.

zXrTQ4wRoPQvv zdsDc0wWleZrhEtDopjdCtauN MPcTLJoYpeqib8N8rCggnWIn3 b9nbHOeAtjINq4Ye18OZQufzuyF11M w fSujkfqRocl8 pVh0vnpkRnDhv0FX9oyX N4y4v3yBokdwEtyKX3nUCRam2 sqTojL7KToMViGuHawyct c9 sg
ProductX WooCommerce Builder for Online Stores 5

Then we can add the product filter block on the left side and any available product blocks on the right side. For instance, I am adding Product Grid 1 block.

WMuLu7V23ywmx0GRbwtJPrhJT2D vnuU2W3tKTZq2HsL4 TEuohjRjooKABZpmL1z8iQynLsQ8MnAMvVnXbJeNceA4 JoF7g7ldEFjziKG38XQZzvnnr2D ePGqe6Pmls60zk9xRVsSmPpFEfH 00WZTFi5zDkaycyS W V8j9iX1NjscB5IW7EfQQ
ProductX WooCommerce Builder for Online Stores 6

Now, we have to connect the product block with the filtering blocks. For that, click on the grid selection option and select the product grid that you have added to the shop page.

EjUAexlVvL9OUW74 KnPDn6jlPNXz7yOK qReItxlT7L8ifxIb8HaShmEhd8LxXqtSFnAca4edJEqx6z3MFFhc7bfhi230GIWV2TFdaB3F2P5bFMYL gLDbRWs PbF ufZKKt9kf 7vXccuokeK351WfhBcMWo7Jvy1GHtqMHcu14RX3FESnAqeMLg
ProductX WooCommerce Builder for Online Stores 7

Don’t worry if you don’t like the default view product grid and filter blocks because ProductX got a complete customization option for all blocks.

Last but not least, you can also choose from two types of paginations, load more and numeric if you want to paginate your shop page.

ProductX WooCommerce Builder for Online Stores 8

After customizing, you can publish the shop page template and check how it looks for the shoppers.

5c9Tr JtcXD2oLl6RBMWBnA0OPP62BDlq67dOhOCce3Q cwHZvcpMKAv2NqR93FrOAa52k8cQNpmtr0NwO3KbFWsJFO1xoB5ksCRNnk MVIw8YdFne9Nuk 5boHZ7W18MCaibGxuKv1U rG2 OOHsEYTiX3Vgye3IsrzciBsFzVUIFJ3anq59FiAjA
ProductX WooCommerce Builder for Online Stores 9

Create and Customize Category Page Template using the WooCommerce Builder 

Now that you know that you have learned to craft a custom shop page template. It’s time to learn how to do the same with the category page template. So it will be easier for you to understand correctly how the builder of ProductX works.

So, select archive as the type of template and then select the condition of “all product categories” as you want to create a template for all categories. However, a specific product category selection option is also available if you want to create separate templates for specific categories.

zYAxSujz EFKGvRT6bCIUKffkVTBKCEqmtDyws61vJGMw2OfbebPgtwyG3R60eaep0 VeB3OoiNcld MDprhtZDdVpfmyWE7rlKlox2HEFtpOE4vAYvGC6u0 CFZKxNGYmIWRY7xHsf70I5TJvXgxKMEC 0UDZXiJGwsRSj8Ra5HaHYzybEDUcw4HA
ProductX WooCommerce Builder for Online Stores 10

Now, click and start editing the template. Then you can start customizing it like the shop page template.

First, you need to add the archive title block that will display the category title’s name. After adding the block, you change the size, color, and typography.

WaX E7fWZe4F EUcL0QWdZ39CoRlJzkrG XFsgiQwWsbrMoG3hXfHg47C6FTcgvY9HxZCEnyb0 MVfrNBatKnJAC1jq2fcu8 nnuSITwOCPJP3p3LHtbtCS5R9lKGnYk6 cHFuam r3EykKwqhqhgTS12xDT XS1PLD7iUcuBPeuzNgJRXpJN3 qoQ
ProductX WooCommerce Builder for Online Stores 11

After that, you can add your desired product blocks to the template. Then the products will be dynamically displayed according to their respective categories. 

x3LdiFZjcveYzgf8QGb6wX3NetShpZR1CMDGrMwjhLoaWG5f1u8FHXOEbFhJkfHk GKOPDiNzEcILHa9SFtCXIEymWDq9HeUzcUXaqpODry nnrr3H2xF6 4a49aByAdHCWOL8tiOb4hCelgT 1fAmzGYY2cgRGAiS QylQ uTnFvYG7I2tRgvKIg
ProductX WooCommerce Builder for Online Stores 12

When you are satisfied with the template, publish it and see how the product categories look after implementing the template.


That’s all about the Gutenberg WooCommerce Builder of ProductX. However, the capabilities of the builder don’t end here. You can also create and customize WooCommerce single product page templates. Now,  as you have an overview of the most promising Gutenberg Builder for WooCommerce, you can start redesigning your WooCommerce store with ease.

Nitansha Tanwar

Nitansha Tanwar

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads