The “Woo Product List Widget“ helps you to showcase your WooCommerce products on any Elementor page for free in a list layout with full control over all the settings. This widget lets you easily display your WooCommerce products on your Elementor page with plenty of customization options. You can turn on or off any part of the Woo Product List to make the widget look exactly how you want and suit your website needs.
Let’s look at each of the options in the “Woo Product List Widget” below.
Elementor Woo Product List Tutorial Video
Add a Free Woo Product List 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 List”
- Hover over the widget in the search results and click install
- Add your “WooCommerce Product List” widget to any Elementor Page
General Settings for Elementor Woo Product List
Product Image Size
Select the product image size.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
Show Title
Show/Hide the title.
Category
Select the category element placement.
- Hide
- Above Title
- Under Title
Show Description
Show/Hide the description element.
- None
- Short
- Full
Show Regular Price
Show/Hide the regular price.
Show Sale Price
Show/Hide the sale price.
Show Image
Show/Hide the image.
Show Rating
Show/Hide the rating element.
Collapse on Mobile
By turning on list will collapse on mobile device.
Collapse From Resolution(px)
Set the resolution to trigger collapse functionality.
Show Empty Message
Show empty message when no product answers the query.
Empty Message
Type the empty message to display.
Grid Settings for Elementor Woo Product List
Buttons Settings in Elementor Woo Product List
Product Page Button Text
Type text to display as product page button text.
Select Options Button Text
Type text to display as select options button text.
Cart Button Text
Type text to display as cart button text.
Product Button
Set visibility of product button.
- Hide
- In Content
- Image Overlay
Cart Button
Set visibility of cart button.
- Hide
- In Content
- Image Overlay
Product Icon
Choose an icon for product.
Cart Icon
Choose an icon to display as cart.
Labels Setting in Elementor Woo Product List
Show Labels
Show/Hide the labels.
Sale Label Start Text
Show text to display as sale label start text.
Show Sale Percentage in Label
Show/Hide the sale percentage in label.
Sale Label End Text
Type text to show as sale label end text.
Labels
Set positioning of labels.
- In Content
- On Image
Out of Stock Text
Type text to show out of stock message.
Elementor Woo Product List Sequence Entrance Animation Setting
Elementor Woo Product List Product Query Setting
Products 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
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
- Products on Sale Only
- Up Sells Products
- Out of Stock Products Only
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
- Products on Sale
- Terms
- Current Products
- Specific Products
- Author
- Product Without Featured Image
- Product with current category
- Product with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
Post Pagination for Elementor Woo Product List
Elementor Woo Product List 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 List Item Styling
Set the item direction, content alignment, item background, border, padding, radius, and text alignment.
Elementor Woo Product List Image Styling
Style the image width, height, radius, spacing, border, and empty image placeholder.
Elementor Woo Product List Image Overlay Styling
You can set the overlay color, opacity, opacity hover, padding, and vertical alignment.
Elementor Woo Product List Title Styling
In this section, set the title typography, color, and spacing.
Elementor Woo Product List Category Styling
Set the category typography, color, and spacing.
Elementor Woo Product List Short Description Styling
You can set the description color, typography, and spacing.
Elementor Woo Product List Prices Styling
Here, You can style the price spacing, typography, and color.
Elementor Woo Product List Buttons Styling
You can set the button color, color hover, typography, padding, text color etc.
Elementor Woo Product List Overlay Buttons Styling
In this section, you can set the button color, typography, padding, text color, and border of overlay buttons.
Labels Styling in Elementor Woo Product List
You can style the label background color, labels color, typography, padding, radius, spacing, width and height.
Rating Styling in Elementor Woo Product List
Style the rating color, size, and spacing.
Empty Message Styling in Elementor Woo Product List
Style the empty message typography, color, background, radius, padding, margin and border.
Usage Examples of Elementor Woo Product List
Here are some live use cases for the WooCommerce Product List widget.
Free Elementor Woo Product List with Star Rating
Free Elementor Woo Product List with Action Buttons
Thank you for using the Woo Product List Widget for Elementor! With its clean layout and flexible customization, this is the best Woo Product List Widget for Elementor, perfect for showcasing your products in an organized, engaging way. 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.