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 #
Layout
Choose the desired layout from the given options.
- Under
- Overlay
- Under Overlap
- Partial Overlay
- Reveal From Bottom
- Side by Side
Items in Column
Select the number of items you want to display in a row.
Direction
Select the direction of products from left to right or right to left.
Enable Third Party Integrations
Choose yes to enable integration with third party plugins.
Buttons Settings #
Product Button Text
Type custom text for button.
Add to Cart Button Text
Type custom text for cart button.
Variable Button Text
Type text for variable button in case the product has variables.
Show Product Button
Show/Hide the product button.
Show Add to Cart Button
Show/Hide the add to cart button
Quantity Increment Button
Show/Hide the quantity increment button.
Quantity Minus
Select icon for quantity minus.
Quantity Plus
Select icon for quantity plus.
Sale Label Settings #
Sale Label Start Text
Type text for sale label.
Show Sale Label
Show/Hide the sale label.
Show Sale Percent in Label
Show/Hide the sale percentage in the label.
Sale Label End Text
Type text for sale label end.
Sequence Entrance Animation Setting #
Sequence Entrance Animation
Set the sequence entrance animation.
Layout Settings #
Show or hide the elements in product grid.
Show Regular Price
Show/Hide the regular price.
Show Price
Show/Hide the price.
Show Title
Show/Hide the title.
Show Category
Show/Hide the category.
Show Rating
Show/Hide the rating element.
Prices
Select the layout of the price.
- Block
- Inline
Product Query Settings #
Product Source
Choose any of the below options for your product source.
- Current Query Product
- Custom Products
- Related Products
- Manual Selection
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)
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
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 #
Pagination
Display the pagination for your post grid
- None
- Numbers
- Using Pagination Widget
Enable Post Filtering
When turned on you can use all the post-filter widgets like tab filters, load more and infinite scroll.
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.
