The “Woo Product Grid Widget” allows you to display WooCommerce products in a stylish grid layout for free in WordPress Elementor websites. This widget helps showcase products in an organized and visually appealing way, making it easier for customers to browse and shop. You can customize the layout, columns, spacing, and styling to match your site’s design seamlessly.
Let’s explore the features of the “Woo Product Grid Widget” below.
Elementor Woo Product Grid Tutorial Video
Add a Free Woo Product Grid for Elementor
This widget requires Unlimited Elements Free 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
Elementor Woo Product Grid General Settings
Layout
Choose the desired layout from the given options.
- Under
- Overlay (Pro)
- Under Overlap (Pro)
- Partial Overlay (Pro)
- Reveal From Bottom (Pro)
- Side by Side (Pro)
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.
Elementor Woo Product Grid 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 (Pro)
Show/Hide the quantity increment button.
Quantity Minus (Pro)
Select icon for quantity minus.
Quantity Plus (Pro)
Select icon for quantity plus.
Elementor Woo Product Grid 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.
Elementor Woo Product Grid Layout Settings
Show Image
Show/hide the image.
Show Title
Show/hide the title.
Title HTML Tag
Select the HTML tag for the title from the given options of div, h2, h3, h4, h5 and h6.
Show Short Description
Select either "Short Description" or "Short Description with Tags" to show.
Show Category
Show/hide the category.
Show Rating
Show/hide the product rating.
Show SKU
Show/hide the product SKU.
Default Image
Set a default image to show with the product details.
Show Additional Buttons
Show/hide additional buttons.
Elementor Woo Product Grid Sequence Entrance Animation Settings
Sequence Entrance Animation
Set the sequence entrance animation.
Elementor Woo Product Grid Price 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
Elementor Woo Product Grid Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Sync
You can connect two item-based widgets and sync them.
Show Debug
Show information about remote widgets that are connected to this widget.
Elementor Woo Product Grid Third Party Integrations Settings
Enable Third Party Integrations
Enable/disable integrations for third party plugins.
Enable Hooks
Enable hooks to show data from other plugins.
Elementor Woo Product Grid 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 in Elementor Woo Product Grid
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:
Elementor Woo Product 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.
Elementor Woo Product Grid General Styling
Set the gap, alignment, background, padding, border, and width of the product items.
Elementor Woo Product Grid Image Styling
Style the image height, and image fit in this section.
Elementor Woo Product Grid Category Label Styling
You can set the color, typography, and spacing of the category label.
Elementor Woo Product Grid Title Styling
In this section, set the title color, typography, and spacing.
Elementor Woo Product Grid Short Description Styling
In this section, set the short description color, typography, and spacing.
Elementor Woo Product Grid Sale Price Styling
Style the color, typography and spacing of the sale price element.
Elementor Woo Product Grid Regular Price Styling
Here, you can style the color, typography, and spacing of the regular price element.
Elementor Woo Product Grid Buttons Styling
You can style typography, width, padding, spacing and border radius of the buttons.
Elementor Woo Product Grid Add to Cart Button Styling
Style the color, background color, text color, border etc. of add to cart button.
Elementor Woo Product Grid View Product Button Styling
You can style the color, background color, text color, border etc. of the view product button.
Sale Label Styling in Elementor Woo Product Grid
This section lets you set the typography, color, background color, padding, alignment etc. of the sale label element.
Rating Styling in Elementor Woo Product Grid
You can customize spacing, color, and size of the rating element.
Quantity Increment Buttons Styling in Elementor Woo Product Grid (Pro)
Style the margin, gap, height, and radius of the quantity increment button.
Empty Message Styling in Elementor Woo Product Grid
You can style the typography, color, background color, radius, padding, margin and borders.
Active Item Styling in Elementor Woo Product Grid
Style the background color, border and the box shadow of an active item.
Usage Examples for Elementor Woo Product Grid
Here are some live use cases for the WooCommerce Product Grid widget.
Free Elementor Product Grid with Star Ratings
Free Elementor Product Grid with Under Overlap Layout.
Free Elementor Product Grid with Content Revealed on Hover
Free Elementor Product Grid with Reveal from Bottom Layout.
Thank you for using the Woo Product Grid Widget for Elementor! With its customizable layouts and seamless WooCommerce integration, this is the best Woo Product Grid Widget for Elementor, perfect for showcasing products in a visually appealing and organized grid. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
