1. Documentation /
  2. 2.0 /
  3. Product Listing Page with List & Grid View

Product Listing Page with List & Grid View

WooCommerce product table view plugin lets you create a separate product listing page and display your all products in a list or grid view to allow your customers to add multiple products to the cart quickly and easily.


↑ Back to top
  1. Download Product Listing Page with List View & Grid View and have your .zip file
  2. At the WordPress admin panel, go to the Plugins section, and click ‘Add New’ to upload and install the plugin you just downloaded from WooCommerce.
  3. Upload the .zip file to proceed with the installation.
  4. Wait until the plugin installs. After successful installation, activate the plugin, and move on to configuration settings.


↑ Back to top
At the admin panel, go to WooCommerce >Product Listing Page to configure the product listing page extension.  Here you will find 3 tabs such as General Settings, Table Settings, and Load More Button Settings.

General Setting

↑ Back to top
In a General settings tab, you can configure the following
  • Choose Layout (Choose a layout to display the product listing page e. List View, Grid View)
  • Choose the Loading Products Type (Scroll, Load More Button, Pagination)
  • Show Products (Choose products you want to display on the listing page for grid view e. products or categories wise)
  • Product Per Page (Personalize the number of products you want to display by default and load each time on the product listing page)
  • Product/Category Restriction (Choose specific products or categories you want to show on the product listing page)
  • Short-codes (You can copy short-code to any page to display a product listing page or cart widget)
WooCommerce product listing page

Table Settings

↑ Back to top
From this tab, you can customize the following:
  • Table header background color
  • Table header text color
  • Table header text font size
  • Table body background color
  • Table body text color
  • Table body text font size
WooCommerce product listing page

Load More Products Button

↑ Back to top
This button will be displayed at the end of the listing page if you have chosen a Load More Products Button as a loading type from general settings. This button will display more products when customers click it. However, you can customize this button from this tab such as text, background color, border color, and many more. WooCommerce product listing page

Switch View Buttons Settings

↑ Back to top
From this tab, you can customize the switch view button. You can configure the following settings:
  • Button background color
  • Selected button background color
  • Button icon color
  • Selected button icon color
  • Switch view button(s) style
  • Round buttons


↑ Back to top
  • Can you display the listings or cart widget on all pages or selective pages?
Product list view WooCommerce plugin allows you to show the product listings and cart widgets on all pages using a shortcode. Go to WooCommerce > Settings > Product Listing Page. Here in the general settings tab, you will find the shortcode which you can paste on any page to display listings and cart widgets.
  • Is it possible to display listings based on categories?
Yes, the WooCommerce custom product list page plugin enables you to display product listings based on categories. To do so, go to the general settings section and select grid view for product listings. In grid view, you will have the choice to display products based on their categories or as separate products.
  • Can we customize the product loading type?
The WooCommerce product list layout plugin gives you the ability to choose a product loading method. You can either choose scroll down, pagination, or load more button. For the load more button you can configure different settings.