Product Grid Woo Widget Tutorial

Essential Classy Tab from Dashboad -> Widgets then enable Product Grid

Now Drag and Drop Product Grid widget

In Product Grid Style, We have 10+ Predefined layout with Custom Template options.
In Layout, We have Grid and Masonry options

If you face issue in Editor, You can use Relayout options

We have RTL compatibility option

In Display Product, You can manage Featured, Sale, Top Rated and more…

We have Taxonomy based listing, With Include/Exclude with ID.

Using this options, You can manage Listing Product and It’s order.

Manage Column and It’s Gap

In Layout Options, You can Enable/Disable as per your design

Product Grid – Style Tab

Image Style Tab

In this tab, You can manage Image Transition and Transfor for Normal and Hover State of Image.

Background Image – Style Tab

In this tab, You can manage Image Size, Repeate and It’s Position with Overlay Color for Nomal and Hover state.

Title – Style Tab

In this tab, You can manage Text and Content Alignment, Padding, Margin and Typography of Title.
Also, You can manage Color, Background, Border and Shadow for Normal and Hover State of Title.

Description – Style Tab

In this tab, You can manage Text Alignment and Content Alignment, Padding, Margin and Typography of Description.
Also, You can manage Color, Background, Border and Shadow for Normal and Hover State of Description.

Meta – Style Tab

In this Meta tab, You can manage Padding, Margin and Typography of Meta.
Also, You can manage Color, Background, Border, Shadow, Transition and Transform for Normal and Hover state of Meta.

Price – Style Tab

In this tab, You can manage Alignment of Price, Margin, Typography and Manage color of Price for Normal and Hover state.

Previous Price – Style Tab

In this tab, You can manage Typography and Color for Previous Price.

Rating – Style Tab

In this Rating tab, You can manage Alignment of Size of Rating.
Also, You can manage Fill and Empty color for Normal and Hover State.

Add to Cart – Style Tab

In this tab, You can manage Alignment, Padding, Margin and Typography.
Also, You can manage Color, Background, Border and Shadow for Normal, Hover and Box Hover state of Add to Cart button.

Out of Stock – Style Tab

In this tab, You can manage Text Alignment, Margin and Typography of Out of Stock Text.
Also, You can manage Color for Noemal and Hover State of Out of Stock.

Sale – Style Tab

In this tab, You can manage Margin, Width/Height and It’s Typography.
Also, You can manage Color, Background, Border, Shadow, Transition and Transform for Normal and Hover State of Sale Badge.

No Product – Style Tab

In this tab, You can manage No Product Text, Alignment, Typography, Color, Background, Border and Shadow.

Inner Box – Style Tab

In this tab, You can manage Padding of Inner Box.
Also, You can manage Background, Border and Shdow for Normal and Hover State.

Box – Style Tab

In this tab, You can manage Background, Border and Shdow of Box.
Go to Demo
Report an issue or submit a bug