fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

WooCommerce Product Grid

The WooCommerce Product Grid widget lets you showcase your WooCommerce products in a grid layout on any Elementor page. This widget lets you easily display your WooCommerce products on your Elementor page and with plenty of customization options. You can turn on or off any part of the WooCommerce Product Grid to make the widget look exactly how you want and suit your website needs. You can easily break up long grids of products into separate pages using the product grid pagination option with easy navigation and configuration.

 

Let’s look at each of the options in the “WooCommerce Product Grid Widget” below.

Install WooCommerce Product Grid Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “WooCommerce Product Grid”
  3. Hover over the widget in the search results and click install
  4. Add your “WooCommerce Product Grid” widget to any Elementor Page

General Settings

1

Layout

Choose the desired layout from the given options.

  • Under
  • Overlay
  • Under Overlap
  • Partial Overlay
  • Reveal From Bottom
  • Side by Side
2

Items in Column

Select the number of items you want to display in a row.

3

Direction

Select the direction of products from left to right or right to left.

4

Enable Third Party Integrations

Choose yes to enable integration with third party plugins.

Buttons Settings

1

Product Button Text

Type custom text for button.

2

Add to Cart Button Text

Type custom text for cart button.

3

Variable Button Text

Type text for variable button in case the product has variables.

4

Show Product Button

Show/Hide the product button.

5

Show Add to Cart Button

Show/Hide the add to cart button

6

Quantity Increment Button

Show/Hide the quantity increment button.

7

Quantity Minus

Select icon for quantity minus.

8

Quantity Plus

 Select icon for quantity plus.

Sale Label Settings

1

Sale Label Start Text

Type text for sale label.

2

Show Sale Label

Show/Hide the sale label.

3

Show Sale Percent in Label

Show/Hide the sale percentage in the label.

4

Sale Label End Text

Type text for sale label end.

Sequence Entrance Animation Setting

1

Sequence Entrance Animation

Set the sequence entrance animation.

Layout Settings

Show or hide the elements in product grid.

1

Show Regular Price

Show/Hide the regular price.

2

Show Price

Show/Hide the price.

3

Show Title

Show/Hide the title.

4

Show Category

Show/Hide the category.

5

Show Rating

Show/Hide the rating element.

6

Prices

Select the layout of the price.

  • Block
  • Inline

Product Query Settings

1

Product Source

Choose any of the below options for your product source.

  • Current Query Product
  • Custom Products
  • Related Products
  • Manual Selection
2

Include By

Include the Products from different options given below

  • Author
  • Date
  • Most Viewed
  • ID's from PHP function
  • ID's from Product Meta
  • ID's from Dynamic Field
  • Products On Sale Only (woo)
  • Up Sells Product (woo)
  • Cross Sells Product (woo)
  • Out of Stock Products Only (woo)
  • Recently Viewed Products (woo)
  • Products From Post Content (woo)
3

Include By Terms

Choose specific Products that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children

 

4

Exclude By

Choose specific Products that you would like to exclude from your selection by adding rules.

  • Out of Stock Products (woo)
  • Products on Sale (woo)
  • Terms
  • Current Products
  • Specific Products
  • Author
  • Product Without Featured Image
  • Products With Current Category
  • Products With Current Tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

To know more about Product query setting, please visit our article on Advanced Post Selection

Post Pagination and Filtering

1

Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2

Enable Post Filtering

When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.

3

Filters Behaviour

  • Ajax
  • Ajax and URL change - Will change the URL each time the filter changes and add the possibility to use browser back navigation.

Learn more about the diffrent Ajax filters that can work with the Post Grid in the links bellow:

Post Grid Widget Styling

Plenty of styling options is included to control every design aspect of the widget. Modify the colors to match your site’s look and feel.  You can customize every single detail to perfectly blend with your website design.

General Styling

Set the gap, alignment, background, padding, border, and width of the product items.

Image Styling

Style the image height, and image fit in this section.

Category Label Styling

You can set the color, typography, and spacing of the category label.

Title Styling

In this section, set the title color, typography, and spacing.

Sale Price Styling

Style the color, typography and spacing of the sale price element.

Regular Price Styling

Here, you can style the color, typography, and spacing of the regular price element.

Buttons Styling

You can style typography, width, padding, spacing and border radius of the buttons.

Button Add to Cart Styling

Style the color, background color, text color, border etc. of add to cart button.

Button View Product Styling

You can style the color, background color, text color, border etc. of the view product button.

Sale Label Styling

This section lets you set the typography, color, background color, padding, alignment etc. of the sale label element.

Rating Styling

You can customize spacing, color, and size of the rating element.

Quantity Increment Buttons Styling

Style the margin, gap, height, and radius of the quantity increment button.

Usage Examples

Here are some live use cases for the WooCommerce Product Grid widget.

Product Grid with under overlap layout.

Product Grid with overlay layout.

Product Grid with the reveal from bottom layout.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!