Elementor WooCommerce Products Listing Widget Tutorial

Trying to build an outstanding WooCommerce shop page in Elementor? Elementor WooCommerce Products Listing in Premium Addons gives you the ability to create and build outstanding shop pages using 10 premade product skins and unlimited customization options.

Requirements:

• You will need the Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
• Make sure that WooCommerce plugin is installed and activated on your website.

Key Features

• General
• Grid (Available when the layout is grid or masonry)
• Carousel Options (Available when the layout is carousel)
• Query
• Pagination (Available when the “Load More Button” is disabled)
• Display Options
• Quick View
• Sale/Featured Ribbons
• Out Of Stock Ribbon

General

We’ve added 10 pre-made skins to the WooProducts widget. Also, you can set up how to showcase your Elementor WooCommerce Products Grid/Carousel/Masonry layouts.

• Skin: There are 10 pre-made skins. Please note that PRO Skins require Premium Addons Pro installed and activated on your website.
• Layout: Set the layout of the products to be Grid, Carousel, or Masonry.
  • Grid: Display WooCommerce products grid layout. Usually, you can use it on the Shop page, Category Archive, and when creating a WooCommerce Related Products section at the end of the single product page.
  • Carousel: Showcase carousel WooCommerce products layout. WooCommerce Products Carousel for Elementor is very useful if you want to save page area, also you can use it on the home page to show featured and on-sale WooCommerce products in Hero Scene. WooCommerce Products Carousel for Elementor Demo page.
  • Masonry: Display WooCommerce products in masonry layout. This is useful if the products’ thumbnail images don’t have the same height.
• Image Size: Set your product’s image size.

Free WooCommerce Products Skins for Elementor

Pro WooCommerce Products Skins for Elementor

For the below skins, you should have Premium Addons PRO installed and activated on the WordPress Dashboard.

Grid

Elementor WooCommerce Products widget gives you the ability to set how many products per row, the total count of products per page, and the load more button.

• Products Per Row: Choose how many products to show per row.
• Products Per Page: Set how many products you want to be displayed per page/section.

• Load More Button: Choose to enable or disable the load more button on your page.
• Button Text: Where you can rename your Load More button. (Available when the Load More Button is enabled)
• Button Alignment: Where you can adjust your button placement by aligning it to the left, center, or right. (Available when the Load More Button is enabled)

Carousel Options

WooCommerce Products Listing widget makes it easier to create a product carousel. Here you can customize your product’s carousel with a lot of customization options.

• Show Arrows: Enable to add arrows to WooCommerce products carousel.
• Arrows Position: Set arrow position in pixels (PX), and (EM) on desktop, tablet, and mobile.
• Show Dots: Enable to show dots below the WooCommerce products carousel.
• Number of Products: Set how many WooCommerce products to include in the carousel.
• Products to Show: Set how many WooCommerce products to show in the product carousel.
• Products to Scroll: Set how many WooCommerce products to show in one scroll on desktop, tablet, and mobile.
• Autoplay Slides: Enable or disable autoplay for the product carousel. It will help you to set transitions between slides.
• Autoplay Interval: Set the autoplay slide delay for the product carousel in ms.
• Pause on Hover: Enable or disable pause products carousel on mouse hover.
• Infinite Loop: Enable or disable the ability of the products’ carousel to slide continuously.
• Autoplay Speed: set the autoplay speed for the product carousel in milliseconds.

Query

General Query Options

• Source: Select display source for Elementor WooCommerce Products from All Products, Custom Query, Main Query, Related Products, Cross-sells, and Up-sells.
  • All Products: Display all products in WooCommerce.
  • Custom Query: Display products filtered by specific category and tag.
  • Main Query: Display the main products for this page. Mainly is used in Elementor Theme Builder > Products Archive when using filters.
  • Related Products: Display products related to the product that is on the page.
  • Cross-sells: Display products that you promote in the cart, based on the current product. Typically, they are complementary items.
  • Up-Sells: Display products that you recommend instead of the current product because it has better quality or is much better. (Upsells query can be used only on a single product template)
• Empty Query Message: Insert a message to be shown if the query result is empty. It will help you to show a message when this query is empty and doesn’t have any products.

All Products & Custom Query Options

• Exclude Current Product: Enable to remove the current product from the query. Very useful when using Elementor WooCommerce Products inside a Single Product template.
• Filter By: Show the products that are featured, have a sale, or none.
• Order by: You can choose to order the products by the following attributes:
  • Title
  • Date
  • Popularity
  • Price
  • Rating
  • Random
  • Menu Order
• Order: Additionally, you can show the products in descending or ascending order.
• Empty Query Message: Insert a message to be shown if the query result is empty. It will help you to show a message when this query is empty and doesn’t have any products.

The Custom Query Options

• Category Filter Rule: Show the products that match specific categories or exclude them.
• Select Categories: Select WooCommerce categories for the category filter rule.
• Tag Filter Rule: Show the products that match specific tags or exclude them.
• Select Tags: Select WooCommerce tags for the tag filter rule.
• Offset: Exclude a number of initial products from being displayed.
• Exclude Current Product: Enable to remove the current product from the query. Very useful when using Elementor WooCommerce Products inside a Single Product template.

Cross-Sells & Upsells Options

• Order by: You can choose to order the products by the following attributes:
  • Title
  • Date
  • Popularity
  • Price
  • Rating
  • Random
  • Menu Order
• Order: Additionally, you can show the products in descending or ascending order.

Pagination

Please note you should select Grid or Masonry from the Layout option in General settings.

• Enable Pagination: Enable to divide the products into discrete pages which will be very helpful if you have a lot of products on the same page or section.
• Type: Select the type of pagination Numbers or Numbers + Pre/Next Arrows.
  • Previous Page String: Enter a string for the button that will navigate you to the previous products page.
  • Next Page String: Enter a string for the button that will navigate you to the next products page.
• Alignment: Align pagination to left, center, or right.

Display Options

In this options group, you can order and select which product information you want to show which will give you full control of your products and create custom layouts for your WooCommerce products.

• Image: Enable to show the product featured image.
• Place Title Above Image: Enable to place product title above product image.
• Product Structure: Enable and organize your product structure title, category, excerpt, ratings, price, and add to cart which will allow you to organize product structure as you desire.
• Add to Cart Position: Select the add to cart button position on hover: above image or below image. (Available only in skins 1 & 4)
• Alignment: Align product details to left, center, or right.

WooCommerce Products Skins Options

Options below are available for skins 5, 6, 7, 8, 9 & 10 only.

• Image: Enable to show product’s image.
• Title: Enable to show the product’s title.
• Category: Enable to show the product’s category.
• Rating: Enable to show the product’s rating.
• Price: Enable to show the product’s price.
• Excerpt: Enable to show the product’s short description.
• Excerpt Length: Set excerpt length to show how many words to show from the product’s short description.
• Add To Cart: Enable to show the product’s Add to Cart button.

Quick View

• Enable Quick View: Switch on to enable the Quick View pop-up. Quick view modal will help your customers to view products without the need to open the products on a new page which will speed up your user experience.
• Reverse Buttons: Enable to reverse quick view button and add to cart buttons places. It’s very helpful in RTL websites. (Available on Skin 2)
• Quick View: Select the quick view pop-up trigger On Button Click or On Image Click. (Available on Skin 1 & 3 & 4 only)

Sale & Featured Ribbons

Add ribbon to your on-sale products and featured products to attract your customer’s attention.

• Show Sale Ribbon: Enable to show sale ribbons on products that are currently on sale. By enabling Sale Ribbon, customers will notice on sale of products easily.
• Type: You can select the type of sale ribbon text default or custom.
  • Default: Shows the sale word in the ribbon only.
  • String: Insert a custom text in the sale ribbon. Show Sale % Value ( [value] Autocalculated offer value will replace this).
• Show Featured Ribbon: Switch on to show a ribbon on featured products which will help you to mark new products so that customers can be attentive to those products.
• String: Insert featured ribbon text to show on your products.

Out of Stock Ribbon

Enable this option to show a badge for the products that are out of stock.

• Show Ribbon: Enable to show out of stock ribbons on products. Out of Stock Ribbon will help customers understand that this product is not available right now to purchase.
• String: Insert out of stock ribbon text to show on your products.

Style

• General
• Image
• Overlay
• Product
• Product Style
• Description
• Add To Cart
• Rating
• Price
• Title
• Sale Ribbon / Featured Ribbon
• Category
• Quick View Model
• Quick View Button
• Carousel
• Pagination
• Load More Button
• Out Of stock Ribbon

General

• Rows Spacing: Set spacing between product rows on desktop, tablet, and mobile. (Available in Grid or Masonry Layout)
• Columns Spacing: Set spacing between product columns on desktop, tablet, and mobile.
• Box Shadow: Add a shadow around the products by controlling the following settings on normal and hover states:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box on normal and hover states.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, %, or em.

Image

• Image Hover Style: Select on hover style for the product image:
  • None
  • Swap Images
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale
  • Bright
  • Sepia
  • Translate
  • Custom
    • CSS Filter: You can also customize the image product by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, and Hue.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box for the product image.
• Height: Set the height of the product image in pixels, or em
• Image Fit: Choose how you want the product thumbnail to fit.

Overlay

(Available on skins 4 & 7 only)

• Background Type: Pick a background for the product image overlay.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Icons Alignment: You can align the icons to the top, center, or bottom. (Available on skin 7 only)

Product

(Not available on skins 2 & 4)

• Background Type: Pick a background for the product info container.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Padding: Creates space around product content in pixel (px), em (em), or percentage(%) on desktop, tablet, and mobile.

Product Style

(Available only on Skin #2)

• Background Type: Pick a background for the product info container.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Padding: Creates space around product content in pixel (px), em (em), or percentage(%) on desktop, tablet, and mobile.

Product Description

• Color: Pick a color for the product description.
• Typography: Adjust the description font settings and styling.
• Text Shadow: Adjust the product description shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Creates a space around the product description in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

Add To Cart Button

• Typography: Adjust the add to cart button font settings and styling.
• Padding: Creates space around the add to cart button in pixel (PX), em (Em), or percentage(%) on desktop, tablet, and mobile.
• Color: Pick colors for the add to cart button fonts on normal and hover states.
• Background Type: Pick a background for the add to cart button on normal and hover states.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Box Shadow: Add a shadow around the add to cart button by controlling the following settings on normal and hover states:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box on normal and hover states.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, %, or em.

Products Rating Stars

• Star Color: Set a color for the rating stars.
• Empty Star Color: Set a color for the empty rating stars.
• Star Size: Set the rating star size.
• Bottom Spacing: Set spacing below the rating stars.

Price

• Text Shadow: Adjust the product price shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Creates a space around the product price in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.
• Price Color: Pick a color for the product price text.
• Slashed Price Color: Set a color for the product’s old price.
• Typography: Adjust product price & slashed price font settings and styling.

Product Title

• Color: Set a color for the product title.
• Hover Color: Set a color for the product title on the hover state.
• Typography: Adjust the title font settings and styling.
• Text Shadow: Adjust the product title shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Creates a space around the product title in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

Sale Ribbon & Featured Ribbon

• Size: Set the size for the ribbon in pixels and em.
• Color: Pick a color for the ribbon text.
• Background Color: Set a background color for the ribbon.
• Text Shadow: Adjust the ribbon shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Box Shadow: Add a shadow around the ribbon by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Typography: Adjust ribbon text font settings and styling.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, %, or em.
• Padding: Creates a space around the ribbon text in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.
• Margin: Creates a space around the ribbon in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

Product Category

• Color: Pick a color for product categories.
• Typography: Adjust the category font settings and styling.
• Text Shadow: Adjust the product category shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Creates a space around the product category in pixel (PX), em (Em), and percentage (%) on desktop, tablet, and mobile.

Quick View Modal

• Overlay Color: Pick an overlay color for the quick view modal.
• Background Color: Pick a background color for the quick view modal content.
• Padding: Creates space around product content in pixel (px), Em (em), or Percentage(%) on desktop, tablet, and mobile.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the quick view modal.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the modal. You can adjust the border-radius in pixels, %, or em.
• Close Icon Color: Pick a color for a quick view modal close icon.
• Close Icon Size: Set size for quick view model close icon.

Quick View Button

• Typography: Adjust the quick view button font settings and styling.
• Padding: Creates space in pixel (px), Em (em), or Percentage(%) on desktop, tablet, and mobile.
• Color: Pick colors on normal and hover states.
• Background Type: Pick a background on normal and hover states.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set the background using gradient colors.
• Box Shadow: Add a shadow around the button by controlling the following settings on normal and hover states:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the quick view button on normal and hover states.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, em, or percentage.

Products Carousel

• Color: Set a color for product carousel arrows.
• Size: Set the size for the product carousel arrows in pixels, em, and percentage on desktop, tablet, and mobile.
• Background Color: Set a color for the arrows’ background.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the arrows icon. You can adjust the border-radius in pixels, em, or percentage.
• Padding: Creates space around carousel arrows in pixel (px), Em (em), or Percentage(%).
• Color: Set a color for carousel dots.
• Active Color: Set a color for active carousel dot.

Pagination

• Padding: Creates space around pagination buttons in pixel (px), em (Em), or Percentage(%) on desktop, tablet, and mobile.
• Typography: Customize pagination buttons text font settings and style it.
• Color: Pick colors for pagination button text on normal, hover, and active states.
• Background Color: Set color for pagination buttons background on normal, hover, and active states.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of pagination buttons on normal, hover, and active states.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text on normal, hover, and active states. You can adjust the border-radius in pixels, em, or percentage.

Load More Button

• Typography: Adjust load more button font settings and styling.
• Text Color: Pick a color for the load more button text on normal and hover states.
• Text Shadow: Adjust the load more button text-shadow on normal and hover states using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Background Type: Pick background for load more button on normal and hover states.
  • Classic Background: Color, or Image Background.
  • Gradient Background: Set background using gradient colors.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box on normal and hover states.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, %, or em.
• Box Shadow: Add a shadow around the load more button by controlling the following settings on normal and hover states:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Margin: Creates a space around the load more button in pixel (PX), em (EM), and percentage (%) on desktop, tablet, and mobile.
• Padding: Creates space between the load more button text and outline in pixel (PX), em (EM), or percentage (%) on desktop, tablet, and mobile.

Out of Stock Ribbon

• Size: Set the size for out of stock ribbon.
• Horizontal Offset: Adjust the ribbon’s horizontal position in pixels or %.
• Vertical Offset: Adjust the ribbon’s vertical position in pixels or %.
• Typography: Adjust out of stock ribbon text font settings and styling.
• Box Shadow: Add a shadow around the out of stock ribbon by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Color: Pick a color for ribbon text.
• Background Color: Set background color for out of stock ribbon.
• Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, %, or em.
• Padding: Creates space around ribbon text in pixel (px), em (em), or percentage(%) on desktop, tablet, and mobile.

Conclusion

If you’re looking for an Elementor WooCommerce widget to create a WooCommerce products listing, we recommend using the Elementor Woo Products Listing widget in Premium Addons.

Also, note that you can combine between Elementor Woo Products Listing widget and WooCommerce Display Conditions global feature to show/hide Elementor content dynamically based on the number of products in the WooCommerce shopping cart, date of last purchased item, etc.

We hope we were able to help you through this guide.

If you still need any further assistance, feel free to contact the Premium Addons support team from here. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our channels to get updates about new features, improvements, and bug fixes.