How to showcase online products in list/grid view on WooCommerce website

How to Showcase online products in list grid view on WooCommerce website

Do you want to showcase online products in the list and grid view?

Using WooCommerce extensions on your website you will be able to showcase/display your online products in the most appealing way. The visitors of your website can save their time as it supports grid and list layout and features a lot of customization options. 

Usually, the integration along with a beautiful lightbox effect will enable you to display every product detail. 

In this tutorial, we will learn to showcase/display online products in a style! Create a grid/list design in a short period of time through some easy and simple steps. 

To display/showcase your online product in your WordPress website will be 10 times easier once you choose an appropriate WordPress plugin. For that, we would like to introduce you to WOO Product Grid/List Design

WOO Product Grid/List Design

Showcase Online Products.
Showcase Online Products.

WOO Product Grid/List Design is an amazing WooCommerce extension that enables you to display your online products in the most appealing way. This plugin is top selling WooCommerce shop designer plugin. It allows you to create variable product attributes and pricing listings through the lightbox. Similarly, this plugin works well with WooCommerce stores, online stores, digital stores, online product galleries, WooCommerce product galleries, and almost all sites that sell online products. Its design comes with 8 different ribbon templates, 6 different ribbon positions, 40+ beautifully pre-designed templates to easily mark your featured products, latest products, best selling products, and much more. 

Major Features of WOO Product Grid/List Design: 

  • Advanced WooCommerce Extension
  • Showcase your Online Product in the grid and list layout
  • Enables the Product Filtration
  • Likewise, it provides Social Share option
  • Works Flawlessly with every WordPress Theme
  • Additionally provides Email, Forum, and Chat support
  • Requires no coding knowledge

Let’s Showcase your Online Product in your WordPress website

Step 1: Installation of WOO Product Grid/List Design

As a first step, you need to visit CodeCanyon in order to purchase your WOO Product Grid/List Design WordPress plugin. By doing this you will be able to showcase your online products in an appealing way. 

For the step by step guide to install a plugin in your website go through our article “How to Install New Plugin to the WordPress Site?” 

Step 2: Activate the WordPress plugin

Now, click on the Activate button to activate and use your WordPress plugin. 

Go to Product Grid/List Design option at the left bar of your page to showcase online products in your website. 

Showcase Online Products.
Showcase Online Products.

Step 3: All Product Grid/List Design

In this option of this plugin, you will be able to see all the Grid/List that you have made using WOO Product Grid/List Design. 

Showcase Online Products.
Showcase Online Products.

Step 4: Add New Product Grid/List Design

First of all, you need to give a name in the Add Title section. 

Post Settings 

Enable Filter Taxonomies/Categories Post in order to show product associated with certain taxonomy/category. 

Additionally choose your OrderBy, Order and Post Status as per your own requirement. 

In the same way, you need to fill the Custom Field, Seach Keyword and Popular Post options in the Post Settings. 

Showcase Online Products.
Showcase Online Products.

Layout Settings

In the Layout Settings, choose the Layout first of all. Then choose the Grid Templates. 

There you can see 1st template preview and Desktop Column, Tablet/IPad Column and Mobile Column

Showcase Online Products.
Showcase Online Products.

General Settings

In the General Settings, choose to enable/disable the display option for Product Title, Product Excerpt, Post Category/Taxonomy, Product Link in Title and Product Link in the Image. 

Then choose the Link Target in the Same Tab or New Tab

Finally, choose your Image Size and Image Type

Showcase Online Products.
Showcase Online Products.

Product Settings

In the Product Settings, enable the Display Price, Display Wishlist Button, Ratings. Likewise choose to enable Call To Action Button One or Call To Action Button Two. 

Showcase Online Products.
Showcase Online Product.

Ribbon/Banner Settings

In the Ribbon/Banner Settings, you can enable Ribbon Position from 1 to 6 as per your wish and requirement. 

Showcase Online Products.
Showcase Online Products.

Pagination Settings

In the Pagination Settings, you need to choose the Number of Post to show in frontend. 

Similarly enable/disable to Show Pagination

Showcase Online Products.
Showcase Online Products.

Social Share Settings

In the Social Share Settings, you can enable/disable to show social share link. 

Showcase Online Products.
Showcase Online Product.

Filter Settings

In the Filter Settings, you can enable/disable to show filter on the Grid Layout. 

Showcase Online Products.
Showcase Online Product.

Lightbox Settings

First of all, you need to enable Display Lightbox option to show the full content of a product in a lightbox. 

Then choose Lightbox Label and Lightbox Template as per your requirement. Similarly, you can also see the Template 1 Preview. 

Showcase Online Products.
Showcase Online Product.

After making changes in all the settings click on the Publish button at the right top of your pate.

You can also visit About Us section if you want to know more detailly about the plugin that is just below the Add New option.  

In this way, you can showcase Online products by adding product Grid/List Design. Get the plugin here:

Purchase                     

Get latest updates, deals and more from us!
Deals, Updates
and more...
No Thoughts on How to showcase online products in list/grid view on WooCommerce website

Leave A Comment

Search