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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “WooCommerce Product Grid”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Product Grid” widget to any Elementor Page
General Settings
Choose the desired layout from the given options.
- Under
- Overlay
- Under Overlap
- Partial Overlay
- Reveal From Bottom
- Side by Side
Select the number of items you want to display in a row.
Select the direction of products from left to right or right to left.
Choose yes to enable integration with third party plugins.
Buttons Settings
Type custom text for button.
Type custom text for cart button.
Type text for variable button in case the product has variables.
Show/Hide the product button.
Show/Hide the add to cart button
Show/Hide the quantity increment button.
Select icon for quantity minus.
Select icon for quantity plus.
Sale Label Settings
Type text for sale label.
Show/Hide the sale label.
Show/Hide the sale percentage in the label.
Type text for sale label end.
Sequence Entrance Animation Setting
Set the sequence entrance animation.
Layout Settings
Show or hide the elements in product grid.
Show/Hide the regular price.
Show/Hide the price.
Show/Hide the title.
Show/Hide the category.
Show/Hide the rating element.
Select the layout of the price.
- Block
- Inline
Product Query Settings
Choose any of the below options for your product source.
- Current Query Product
- Custom Products
- Related Products
- Manual Selection
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)
Choose specific Products that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
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
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
- 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.
