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.
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.
