fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

WooCommerce Product List

The WooCommerce Product List Widget helps you to showcase your WooCommerce products on any Elementor page 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 WooCommerce 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 “WooCommerce Product List Widget” below.

Install WooCommerce Product List Widget for Elementor

This widget requires Unlimited Elements Free version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “WooCommerce Product List”
  3. Hover over the widget in the search results and click install
  4. Add your “WooCommerce Product List” widget to any Elementor Page

General Settings

1
Product Image Size

Select the product image size.

  • Medium Large
  • Large
  • Medium
  • Thumbnail
  • Full Size
  • 1536*1536
  • 2048*2048
2
Show Title

Show/Hide the title.

3
Category

Select the category element placement.

  • Hide
  • Above Title
  • Under Title
4
Show Description

Show/Hide the description element.

  • None
  • Short
  • Full
5
Show Regular Price

Show/Hide the regular price.

6
Show Sale Price

Show/Hide the sale price.

7
Show Image

Show/Hide the image.

8
Show Rating

Show/Hide the rating element.

9
Collapse on Mobile

By turning on list will collapse on mobile device.

10
Collapse From Resolution(px)

Set the resolution to trigger collapse functionality.

11
Show Empty Message

Show empty message when no product answers the query.

12
Empty Message

Type the empty message to display.

Grid Settings

1
Grid Columns

Set the number of columns to display in grid.

2
Grid Gap

Set the gap between grid items.

Buttons Settings

1
Product Page Button Text

Type text to display as product page button text.

2
Select Options Button Text

Type text to display as select options button text.

3
Cart Button Text

Type text to display as cart button text.

4
Product Button

Set visibility of product button.

  • Hide
  • In Content
  • Image Overlay
5
Cart Button

Set visibility of cart button.

  • Hide
  • In Content
  • Image Overlay
6
Product Icon

Choose an icon for product.

7
Cart Icon

Choose an icon to display as  cart.

Labels Setting

1
Show Labels

Show/Hide the labels.

2
Sale Label Start Text

Show text to display as sale label start text.

3
Show Sale Percentage in Label

Show/Hide the sale percentage in label.

4
Sale Label End Text

Type text to show as sale label end text.

5
Labels

Set positioning of labels.

  • In Content
  • On Image
6
Out of Stock Text

Type text to show out of stock message.

Sequence Entrance Animation Setting

1
Sequence Entrance Animation

Set the sequence entrance animation.

Product Query Setting

1
Products Source

Choose any of the below options for your product source.

  • Current Query Product
  • Custom Products
  • Related Products
  • Manual Selection
2
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
3
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
4
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

1
Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2
Enable Ajax

When turned on, all the filters, all the filters interaction will be with ajax.

WooCommerce Product List 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.

Item Styling

Set the item direction, content alignment, item background, border, padding, radius, and text alignment.

Image Styling

Style the image width, height, radius, spacing, border, and empty image placeholder.

Image Overlay Styling

You can set the overlay color, opacity, opacity hover, padding, and vertical alignment.

Title Styling

In this section, set the title typography, color, and spacing.

Category Styling

Set the category typography, color, and spacing.

Short Description Styling

You can set the description color, typography, and spacing.

Prices Styling

Here, You can style the price spacing, typography, and color.

Buttons Styling

You can set the button color, color hover, typography, padding, text color etc.

Overlay Buttons Styling

In this section, you can set the button color, typography, padding, text color, and border of overlay buttons.

Labels Styling

You can style the label background color, labels color, typography, padding, radius, spacing, width and height.

Rating Styling

Style the rating color, size, and spacing.

Empty Message Styling

Style the empty message typography, color, background, radius, padding, margin and border.

Usage Examples

Here are some live use cases for the WooCommerce Product List widget.

Video Overview

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!