How to Create a WooCommerce Product List View (Step by Step)

WooCommerce is one of the best eCommerce content management systems. It offers plenty of advanced features to create a stunning eCommerce store. Many WooCommerce store owners try to list their products on a table. But they didn’t have a perfect way to do it. 

With the help of WooCommerce themes, you can only show a maximum of 9 products per page. And, this doesn’t suit some store owners. Store owners wish to display their WooCommerce products in an appealing product table. But, WooCommerce doesn’t allow owners to do that. 

Fortunately, there are many product table plugins that help us show our WooCommerce products on an attractive table. 

To help you add a product table to your eCommerce store, we have created a definitive guide on the WooCommerce product list view. In this guide, I will be talking about who should use this feature on their WooCommerce store. To clear out all your doubts, I’ll also be mentioning the use cases. 

Read till the end and know more about WooCommerce Product List View and its implementation. 

Why Should You Use WooCommerce Product List View Feature?

There could be multiple reasons for using this feature, depending on your store requirements. Yet, most WooCommerce store owners use this feature to enhance their shopping experience. It helps them to improve the shopping experience and generate more sales and leads. 

With the help of the WooCommerce product list view feature, buyers can add multiple products to the cart of their choice in one go. They don’t need to select desired products one by one. It helps them to save their time by selecting all at a time. In the product table, you can add custom fields, multiple features like add to cart button, reset button, checkboxes, and a lot more. 

How to add Product List View to Your WooCommerce Store?

To carry out this tutorial, we will be using the Product Table Plugin by Woosuite. With the help of this plugin, you can show all your WooCommerce products on a stunning table. 

You can download or purchase the Product Table plugin from the Woosuite official site. 

Step 1. Create and Install the Woosuite Plugin

We will install and activate the Woosuite plugin. After that, we will enable the Product Table plugin.

To install the Woosuite plugin, first, download the Woosuite plugin zip file to your computer storage. You can download the plugin from your Woosuite dashboard. Now, follow the given steps to install the plugin to your WordPress dashboard:

  1. Go to the Plugin’s section, and click on Add New.
  2. Click on Upload Plugin.
  3. Choose the plugin file, and click on Upload.
  4. After uploading the plugin, click on Install Plugin.

Now, it will automatically start installing the plugin. When it is done installing the plugin, it will notify you via a prompt. Here is the summarized process of doing this.

WordPress Dashboard: Plugins > Add New > Upload Plugin > Choose File > Install Now

After installing the Woosuite Core plugin, you can find the plugin in the Plugins section of your WordPress dashboard. 

Now, we will need to Activate the Woosuite plugin. To Activate the plugin, visit the Plugins section, and look for the Woosuite Core plugin. Then, click on the Activate button.

WordPress Dashboard: Plugins > Woosuite Core > Activate

After Activating the plugin, you will get a new option in the WordPress tool menu called Woosuite. 

In this step, we installed and activated the Woosuite plugin. We will now check to activate the Woosuite Core License. Follow the next step to do it. 

Step 2. Activate the Woosuite License

In this step, we will learn to activate the Woosuite Core license. So, let’s activate it. The process is quite simple. Yet, if you are already a Woosuite member and have activated the license, you can skip this step. 

So, head over to your WordPress tool menu and look for the Woosuite option. In the Woosuite menu, you will see different options. 

In the Woosuite submenu, search for the Activate option. After finding it, click on the Activate option. 

After clicking on the Activate option, it will redirect you to a new page. On the new page, you have to validate your Woosuite license key. 

In case you are figuring out how to get the license key, you would have received your license key via an email by Woosuite. Else, you can find the key from your Woosuite dashboard. 

After finding the activation key, paste it into the given box. After that, click on the Activate License button. 

Now, we have activated the Woosuite license. We can now activate the Product Table plugin easily. Follow the next step to install the Product Table plugin on your WordPress dashboard.

Step 3. Install the Product Table Plugin

Now, you will see a Woosuite option in the WordPress toolbar. From the Woosuite submenu options, search for the Addons option, and click on it. 

After clicking on the Addons, it will redirect you to a new page showing all the Woosuite plugins. Remember, you won’t get access to all the Woosuite plugins. You will only gain access to plugins you have bought from the Woosuite official site. 

I’m assuming that you have only bought the WooCommerce Product Table plugin. So, search for the WooCommerce Product Table plugin from the given plugins. 

After that, click on the Install Now button to install the plugin to your WordPress dashboard.

Now, you will notice that the Install Now button has been replaced with the Toggle. If you aren’t getting this option, refresh the page once. The toggle button lets us activate and deactivate the plugin. So click on the Toggle to activate the plugin. 

Step 4. Extra Settings

The best part about this plugin is that it automatically creates a Quick Order Form page. So, you don’t need to do anything manually. 

You will find the Quick Order Form page in the Page Section of your WordPress dashboard. The page name would be Quick Order Form. By default, the page will look something like this with a few columns. 

After doing everything, you will need to make some changes. So head over to the Product Table settings, by visiting the Addons section, and searching for the Product Table plugin. Then, click on the Manage option. It will redirect you to a new page with some settings. 

Order Form Settings:

4.1 Shop Page: This option states whether you want to display the product table on the shop page or not. You can toggle this on if you want to; otherwise, don’t change. 

4.2 Category Page: This option specifies whether you want to display the product table on the category pages or not. You can turn this on if you wish. If you toggle this on, it will show the product table on all categories published on your site. It doesn’t matter how many categories you have created.

Order Form Information Settings:

4.3 Columns: This setting refers to the columns you want to add to the quick order form. By default, you will find the Product Name, Description, Price, and the Add to Cart button. You can add more columns like stock quantity, image, reviews, short description, and more. 

You can easily add columns you want to show in the product table by selecting them from the dropdown list. The available columns are SKU, ID, name, description, short description, date, categories, tags, image, reviews, stock, weight, dimensions, price, add-to-cart, and button. 

Currently, I’m selecting seven columns to display on the table. It includes – Product Name, Description, Price, Add to Cart button, Stock, Image, and Reviews. You can choose according to your preferences. 

4.4 Image: You can also change the image size according to your theme thumbnail size. By default, it would be 70×50. I’m not changing it because this fits well in the quick order form.

4.5 Image Lightbox: You can enable this option if you want images to show in a popup. For instance, when a visitor clicks on the image, the image will be displayed in a large popup. You can enable this if you want. This will help customers to see products from different angles.

4.6 Description Length: If you have added the Description column to the product table. Then, you can also control the description length. This plugin lets you also set the description limit. For instance, adding 15 will only show the first 15 characters of the description in the table. You can enter -1 to display the full description. 

Bulk Add to Cart Settings:

4.7 Add to Cart Button Display: By default, it would be set to Button only. But, you have to select it for Checkboxes Only. After that, it will start showing the checkbox alongside all products in the quick order form. The position of the checkbox will depend on your theme design. 

4.8 Quantities: This option will allow users to change the amount before adding the products to the shopping cart. If you want to offer this choice, you can toggle it on by clicking on it. However, if you turn off this option, users can only modify the quantity by going to the cart. This increases one step in the whole buying process. 

Order Form Controls: 

4.9 Sort Product By: By default this option would be set to As listed in the Product screen. You don’t need to change this unless you want to show products in a different manner. For example, if you want to show products on the page according to their sales, then select Number Of Sales. You can select according to your requirements. 

4.10 Sort Direction: With the help of this option, you can modify the ranking of your product on the quick order form. For instance, if you show products in ascending order that is A to Z or 1 to 99, then select the Ascending order. By default, it would be selected as Automatic. Don’t make changes if you want to choose the system automatically. 

4.11 Reset Button: If you want to show the Reset button to users, they can remove all the filters. You can enable this if you want.

Performance Setting: 

4.12 Lazy Load: This option states that it will load one product at one time. This will help your website load faster and improve the user experience. 

Note: Don’t enable this if you have already enabled the lazy load feature in the cache plugin. Otherwise, it can cause issues and break the site.

4.13 Rows Per Page: Here comes the main setting. In this setting, add the rows you want to display on one page. For example, if you want to show 50 products on your WooCommerce store Shop page, then add 50 in the box. 

Step 5. Customize the WooCommerce Quick Order Form

The Product Table plugin by Woosuite also offers some more options to customize the product table, or we can say bulk order form. So, in the Manage section, search for the Order Form Design section. 

The Design section will contain different settings. From there, you can design your bulk order form with a few taps. However, to get those additional settings, you have to set the Design option to Custom. 

You will see options like Border Outer, Border Header, Border Cell, and many more. From there, you can modify the color, font type, font size, and much more. This will help you make your product table or quick order form more stunning.

So, these are some of the basic settings. Make sure to cross-check your setting with the screenshots attached above. 

Conclusion

This is a definitive guide on WooCommerce product list view. In this article, we learned more about product list view. In addition, we also looked at its use cases. In the end, we checked out how to add WooCommerce product list views in your WooCommerce store.

Brian
Brian

Welcome to the AovUp blog, where we discuss all things WooCommerce. I hope we can help you achieve something today...

Leave a Reply

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

We – and our partners – use cookies to deliver our services and to show you ads. By using our website, you agree to the use of cookies as described in our Cookie Policy