How to Create a WooCommerce Product List View? 2021
Autumn Offer up to 30% off
Days :
Hours :
Mins :
Back To Blog

How to Create a WooCommerce Product List View?

How to Change WooCommerce Product List View

ProductX is a WooCommerce blocks plugin that allows you maximum customizability over your E-store. From a design standpoint, it’s one of the best product grid plugins for WooCommerce simply because of its lightweight footprint and feature set. 

So you want to know how to create a WooCommerce Product List View with ProductX?

In order to create a WooCommerce Product list, you’ll need to: 

And that’s all there is to it. We will be talking you through each of these steps to show how easy it is to work with ProductX. 

Step 1: Download and Activate ProductX

Downloading and activating productX is the same as working with any other plugin. All you have to do is: 

WooCommerce Gutenberg Product Blocks
Installing WooCommerce Gutenberg Product Blocks

Once activated, you’ll have a ProductX Settings Menu. From here, you can activate the ProductX addons, update your license and access your saved templates. If you wish to upgrade to a Pro Plan (it comes with a lot more features than the free version), you can check out the documentation. 

Step 2: Add a Design Preset from the ProductX Block Library 

ProductX comes with a healthy library of blocks and pre-made layout designs. All of these have different design customization features. And you get the option to choose your favorite design from the block library (there are design limitations with the free version, you know!).   

To do this: 

Importing Readymade design blocks from the block library
Importing Readymade design blocks from the block library

Once that’s out of the way, we can start customizing the block to showcase the products we want. 

Step 3: Start Customizing the WooCommerce Product List View Block 

You may consider this as the main part of the whole process. You see, without any customizable options, there’s no point in showing you any of this. 

But ProductX has a very useful set of feature customization tools. And we’ll try and take advantage of all of these settings. Let’s start! 

Once you import the block of your choice (in our case, it’s the Product list #1 block), you’ll see 3-different settings tabs on the left. 

The Design tab and Advanced Tab are mostly for the base design purpose. You can choose to replace the design, add additional CSS properties, play with the universal design properties for the product block. You can explore these design properties. 

For now, we’ll focus on changing the design of the blocks to make them more appealing to the end-user. 

WooCommerce Product List View Settings
WooCommerce Product List View Settings
ProductX Advanced Query
ProductX Advanced Query
How to Create a WooCommerce Product List View? 1
WooCommerce Product Page Filtering
Add to Cart Button Settings
Add to Cart Button Settings
Gutenberg Product Blocks Image Settings
Gutenberg Product Blocks Image Settings

This is more of an overview of how you can design a custom WooCommerce Product Page with a list view layout. It’s simple, intuitive, and most importantly, doesn’t require you to be a Rocket Scientist!  

There are plenty of design options available for you to choose from. As a matter of fact, new product design blocks are constantly being added each day. In short, the possibilities are endless!

Although the free version of ProductX is well-equipped with all the core features, you’ll need an activated pro license to take advantage of features like Wishlist addon, Image Flip addon, quick-view addon, saved template addon, and more.  

All these features unlock more creative options for the user. With these features, you can build more professional-looking E-commerce product pages with ease. 


Q: Can I create a Product List View layout manually for WooCommerce? 

Ans.: Yes, you sure can. But if you have no prior coding knowledge, then it’s probably better to stick with ProductX, as it’s a fairly lightweight plugin with excellent addons and customization features. With ProductX, you don’t need any prior coding knowledge. It’s just a matter of a few clicks. 

Q: How many Products can I add to a single Gutenberg product block? 

Ans.: There are no limitations whatsoever. You have the reins. You can keep as many products in the list view as you wish. You can also set the design parameters individually for each block on a particular page. 

Q: I want to add dynamic sliders to showcase my products. Can I do that? 

Ans.: Yes, ProductX has pre-made Gutenberg blocks for this particular purpose. You can select these designs and set the Dynamic Slider design properties as per your choice. 

Q: Does ProductX come with support for Shortcodes? 

Ans.: Like some of the more premium WooCommerce plugins, ProductX does support custom shortcodes. You can save your designs as templates. The custom shortcodes will be generated for you to use on other pages. 

Q: How do I get access to New Gutenberg Product Blocks and Layouts? 

Ans.: If you keep the ProductX plugin up to date, then you can easily get access to the latest Paid designs and layouts. ProductX releases updates frequently. So, you may want to keep the plugin up to date. 


One may argue that there are better WooCommerce Product List View plugins than ProductX. That may be true to some extent. 

But this customizable Gutenberg Product Blocks Plugin is unique in its own right. There are very few plugins out there with so much control over customization. 

Why not give it a try and see if we’re telling the truth! 

Written bySadik Ahmed

Hey there, I'm Sadik Ahmed, a WordPress enthusiast who loves to try out and review new themes and services.

Leave a Reply