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
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
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.
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.
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.
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.
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.
After customizing, you can publish the shop page template and check how it looks for the shoppers.
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.
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.
After that, you can add your desired product blocks to the template. Then the products will be dynamically displayed according to their respective categories.
When you are satisfied with the template, publish it and see how the product categories look after implementing the template.
Conclusion
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.
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Leave a Reply