HOW TO ADD GRID & LIST TOGGLE FOR WOOCOMMERCE

Give your users a freedom to customize the way they want to look at the products on your page, because their choice is always the priority, right?

With WooCommerce Grid/List toggle you can add a Grid/List toggle button to your products that will allow your users to toggle between Grid/List views of your products on your WooCommerce store.

 The list view arranges products in a vertical list and to give a more detailed overview of each product. While the grid view allows the default view which you must know already.

The plugin adds a button to your product archives, allowing users to toggle between the two types of views. The list view is much detailed as it arranges the products in vertical manner and gives out specific details. It is for the Admin to decide whether the default view is to be kept as Grid or as List.

In the next WooCommerce WordPress plugin add-on guide, we will show you how to install and implement the Grid List Toggle add-on, which allows you to choose between viewing your products as a Grid or a List when customers are using your website.

Once you have uploaded the plugin, activate your plugin in Plugins → Installed plugins. If it has been activated correctly, plugin control panel is available in the tab Grid / List in WordPress dashboard. 

The free version allows you to toggle between the Grid / List views effortlessly along with the other features given below :

get free versiondocumentation

General Settings

  • You can choose any option from the dropdown either grid view or list view
    as per your choice.

Grid View on the Shop page

List view on the Shop page

While with the premium version, you get to choose from 11 different styles, each style is given with a reference below :

Get Premium VersionLive Demo

General Settings: 

Global Settings : 

 

The different styles available to choose from :

 

Style #1 : 

Style #2 : 

Style #3 : 

Style #4 : 

Style #5 : 

Style #6 :

Style #7 :  

Style #8 : 

Style #9 : 

Style #10 : 

Style #11 : 

 

Get Premium VersionLive Demo