Are you looking for creating WooCommerce Products Grid or WooCommerce Products Carousel in Elementor? Elementor WooCommerce Products Listing in Premium Addons will help you to create and build outstanding shop pages using 10+ premade product skins and unlimited customization options.
Click here to check Elementor WooCommerce Products Listing Widget demo page.
Click here to check Elementor WooCommerce Products Carousel demo page.
Requirements:
- You will need 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 for Elementor WooCommerce Products Widget
- General
- Grid
- Carousel Options
- Query
- Pagination
- Display Options
- Quick View
- Sale/Featured Ribbons
- Out Of Stock Ribbon
General Settings for Elementor WooCommerce Products Widget
We’ve added 10 pre-made neat skins to Elementor WooCommerce Products widget. Also, you can set up how to showcase your Elementor WooCommerce Products Grid/Carousel layouts.
- Skin: Select how to show website products to customers. There are 10 pre-made skins. Please note that PRO Skins required Premium Addons Pro installed and activated on your website.
- Layout: Set the layout of the products to be Grid or Carousel.
- Grid: Display WooCommerce products grid layout in Elementor. Usually, you can use it on Shop page, Category Archive and when creating WooCommerce Related Products section at the end of single product page.
- Carousel: Showcase carousel WooCommerce products layout in Elementor. WooCommerce Products Carousel for Elementor is very useful if you want to save page area, also you can use it on home page to show featured and on sale WooCommerce products in Hero Scene. WooCommerce Products Carousel for Elementor Demo page.
- Image Size: Set woocommerce products image size to help you to set image size for products to be in the same size. Please check Elementor Equal Height feature, it’s very useful to make your products display at the same height.
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 WP Dashboard.
WooCommerce Products Grid for Elementor
Elementor WooCommerce Products widget will help you to create a WooCommerce products grid layout. Also, you will have the ability to set how many products per row, the total count of products per page and load more button.
- Products Per Row: Set how many products to show per row.
- Products Per Page: Choose how many products you want to be displayed per page/section.
How to Add Load More Button to Elementor WooCommerce Products?
Load More button helps to show more products on the same page using AJAX. It also shows the number of available products to be loaded.
Two options are coming with the Load More button; Button Text and Button Alignment.
- Button Text; is where you can rename your Load More button.
- Button Alignment; is where you can adjust your button placement by aligning it to the left, center, or right.
WooCommerce Products Carousel for Elementor
Elementor WooCommerce Products Listing widget makes it easier to create WooCommerce products carousel in Elementor page builder. Here you can customize your product’s carousel with a lot of customization options.
Click here to check Elementor WooCommerce Products Carousel demo page.
- 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 WooCommerce products carousel.
- Number of Products: Set how many WooCommerce products to include in carousel.
- Products to Show: Set how many WooCommerce products to show in products 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 WooCommerce products’ carousel. It will help you to set transition between slides.
- Autoplay Interval: Set the autoplay slide delay for the products’ carousel in ms.
- Pause on Hover: Enable or disable pause products carousel on mouse hover.
- Infinite Loop: Enable or disable the ability of products’ carousel to slide continuously.
- Autoplay Speed: set the autoplay speed for products’ carousel in milliseconds.
The Query Options in Elementor WooCommerce Product Listing Widget
Query settings for Elementor WooCommerce Products widget will help you to select the source of the products, filter query, and sort your products.
General Query Options for Elementor WooCommerce Products
- 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 product that is on 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 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 didn’t have any WooCommerce products.
The Custom Query Options in Elementor WooCommerce Products
- Category Filter Rule: Show the products that match specific categories or exclude them.
- Select Categories: Select WooCommerce categories for category filter rule.
- Tag Filter Rule: Show the products that match specific tags or exclude them.
- Select Tags: Select WooCommerce tags for tag filter rule.
- Offset: Exclude a number of initial products from being displayed.
Elementor WooCommerce 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 Single Product template.
- Filter By: Show the products that are featured, has 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.
How to enable Pagination for WooCommerce Products in Elementor?
Elementor WooCommerce Products widget uses AJAX to load more products on the same page for better performance and faster loading speed. You can enable pagination for your products and set their style. Please note you should select Grid WooCommerce Products from 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 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.
Elementor WooCommerce Products Structure 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 desired.
- Add to Cart Position: Select 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 skin 5, 6, 7, 8, 9 & 10 skins only.
- Image: Enable to show product’s image.
- Title: Enable to show product’s title.
- Category: Enable to show product’s category.
- Rating: Enable to show product’s rating.
- Price: Enable to show product’s price.
- Excerpt: Enable to show product’s short description.
- Excerpt Length: Set excerpt length to show how many words to show from product’s short description.
- Add To Cart: Enable to show product’s Add to Cart button.
How to Enable Quick View Button for Elementor WooCommerce Products Widget?
Enable and customize the quick view button for products.
- Enable Quick View: Switch on to enable quick view pop up to products. Quick view modal will help your customers to view products without the need to open the products on 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 & 3 only)
- Quick View: Select quick view pop-up trigger On Button Click or On Image Click. (Available on Skin 1 & 4 only)
Sale & Featured Ribbons for Elementor WooCommerce Products Listing Widget
Add ribbon to your on-sale products and featured products to attract your customers 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 will show sale word in 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 in WooCommerce Products Listing Widget for Elementor
Enable this option to show a badge for the products that are out of your stock.
- Show Ribbon: Enable to show out of stock ribbon on out of stock woocommerce products. Out of Stock Ribbon will help customers to understand that this product is not available right now to purchase.
- String: Insert out of stock ribbon text to show on your products.
Style Options for Elementor WooCommerce Products
- General
- Image
- Overlay
- Product
- Product Style
- Title
- Category
- Description
- Add To Cart
- Sale Ribbon
- Featured Ribbon
- Rating
- Price
- Quick View Model
- Quick View Button
- Carousel
- Pagination
- Load More Button
General Style Option for WooCommerce Products in Elementor
Add spacing between products rows/columns and apply border on products.
- Rows Spacing: Set spacing between products rows on desktop, tablet and mobile.
- Columns Spacing: Set spacing between products 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.
WooCommerce Products Image Style Option
Set product image hover style and border.
- Image Hover Style: Select on hover style for 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 product image.
The Overlay Background in WooCommerce Products Widgets for Elementor Page Builder
Add an overlay above the product image.
- Background Type: Pick background for the product image overlay.
- Classic Background: Color, or Image Background.
- Gradient Background: Set background using gradient colors.
WooCommerce Products Style Options in Elementor
Here you can customize background and padding for product content in skins 1, 3, and 5.
- Background Type: Pick background for the product info container.
- Classic Background: Color, or Image Background.
- Gradient Background: Set background using gradient colors.
- Padding: Creates space around product content in pixel (px), em (em), or percentage(%) on desktop, tablet and mobile.
Product Style for Elementor WooCommerce Products Widget
Product Style tab is available for skin 2 to add a background for product description and rating stars.
- Background Type: Pick background for the product info container.
- Classic Background: Color, or Image Background.
- Gradient Background: Set background using gradient colors.
- Padding: Creates space around product content in pixel (px), em (em), or percentage(%) on desktop, tablet and mobile.
- Color: Pick a color for product rating stars.
- Spacing: Set spacing below rating stars.
WooCommerce Product Title Styling in Elementor Products Listing widget
Set colors for product titles on normal and hover states, customize product title font, and much more.
- Color: Set a color for product title.
- Hover Color: Set a color for product title on hover state.
- Typography: Adjust title font settings and style it.
- Text Shadow: Adjust 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.
Product Category Customization in Elementor WooCommerce Products widget
Add color for product categories, customize product categories font, and more style options.
- Color: Pick a color for product categories.
- Typography: Adjust categories font settings and style it.
- Text Shadow: Adjust product categories shadow using the following controls:
- Color
- Horizontal Position
- Vertical Position
- Blur
- Margin: Creates a space around the product categories in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
WooCommerce Product Description Styling in Elementor
Pick a color for product description text, customize product description font, and more style options.
- Color: Pick a color for product description.
- Typography: Adjust description font settings and style it.
- Text Shadow: Adjust 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 for WooCommerce Products in Elementor
Customize add to cart button font and colors on normal and on hover states and much more customization options.
- Typography: Adjust add to cart button font settings and style it.
- Padding: Creates space around add to cart button in pixel (PX), em (Em), or percentage(%) on desktop, tablet and mobile.
- Color: Pick colors for add to cart button fonts on normal and hover states.
- Background Type: Pick background for add to cart button on normal and hover states.
- Classic Background: Color, or Image Background.
- Gradient Background: Set background using gradient colors.
- Box Shadow: Add a shadow around 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.
Sale Ribbon Styling in WooCommerce Products Widget
Style the sale ribbon for products on sale.
- Size: Set size for sale ribbon for sale products in pixel and em.
- Color: Pick a color for sale ribbon text.
- Typography: Adjust sale ribbon text font settings and style it.
- Background Color: Set background color for sale 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.
- Text Shadow: Adjust sale ribbon shadow using the following controls:
- Color
- Horizontal Position
- Vertical Position
- Blur
- Box Shadow: Add a shadow around the sale ribbon by controlling the following settings:
- Horizontal Position
- Vertical Position
- Blur
- Spread
- Position:
- Outline
- Inset
- Margin: Creates a space around the sale ribbon in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
- Padding: Creates a space around the sale ribbon text in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
Featured Ribbon in WooCommerce Products Widget for Elementor
Customize featured products ribbon.
- Size: Set size for featured ribbon for sale products in pixel and em.
- Color: Pick a color for featured ribbon text.
- Typography: Adjust featured ribbon text font settings and style it.
- Background Color: Set background color for featured 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.
- Text Shadow: Adjust the featured ribbon shadow using the following controls:
- Color
- Horizontal Position
- Vertical Position
- Blur
- Box Shadow: Add a shadow around featured ribbon by controlling the following settings:
- Horizontal Position
- Vertical Position
- Blur
- Spread
- Position:
- Outline
- Inset
- Margin: Creates a space around the featured ribbon in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
- Padding: Creates a space around the featured ribbon text in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
Elementor WooCommerce Products Rating Stars Style
Set size, colors, and spacing for product rating stars.
- Star Color: Set a color for rating stars.
- Empty Star Color: Set a color for empty rating stars.
- Star Size: Set rating stars size.
- Bottom Spacing: Set spacing below rating stars.
Price Style in WooCommerce Products for Elementor
Set color, shadow, typography, etc. for the product price.
- Text Shadow: Adjust product price shadow using the following controls:
- Color
- Horizontal Position
- Vertical Position
- Blur
- Margin: Creates a space around product price in pixel (PX), em (Em) and percentage (%) on desktop, tablet and mobile.
- Price Color: Pick a color for product price text.
- Slashed Price Color: Set a color for product’s old price.
- Typography: Adjust product price & slashed price font settings and style it .
Quick View Model in Elementor WooCommerce Products Widget
Customize your quick view model overlay color, background color, close button color, size and much more.
- Overlay Color: Pick an overlay color for the quick view model.
- Background Color: Pick a background color for quick view model 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 quick view model close icon.
- Close Icon Size: Set size for quick view model close icon.
Quick View Button Style for Elementor WooCommerce Products Widget
Customize quick view modal button color, background color, typography, etc.
- Typography: Adjust quick view button font settings and style it.
- Padding: Creates space around product content in pixel (px), Em (em), or Percentage(%) on desktop, tablet and mobile.
- Color: Pick colors for quick view (text/icon) on normal and hover states.
- Background Type: Pick background for quick view button on normal and hover states.
- Classic Background: Color, or Image Background.
- Gradient Background: Set background using gradient colors.
- Box Shadow: Add a shadow around 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 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.
Elementor WooCommerce Products Carousel Style
In WooCommere products carousel for Elementor, you can customize arrows and dots’ colors and sizes.
Click here to check Elementor WooCommerce Products Carousel demo page.
- Color: Set a color for product carousel arrows.
- Size: Set size for products carousel arrows in pixels, em and percentage on desktop, tablet and mobile.
- Background Color: Set a color for 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.
WooCommerce Shop Page Pagination Style
Style the pagination buttons for WooCommerce products listing.
- 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 buttons 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.
Out of Stock Ribbon Style for WooCommerce Products
Customize your ribbon text color, background, font. offset and much more.
- Size: Set size for out of stock ribbon.
- Horizontal Offset: Adjust the ribbon horizontal position in pixels or %.
- Vertical Offset: Adjust the ribbon vertical position in pixels or %.
- Typography: Adjust out of stock ribbon text font settings and style it.
- 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.
Load More Button
Style products load more button text style, colors and spinner color.
- Typography: Adjust load more button font settings and style it.
- Text Color: Pick a color for load more button text on normal and hover states.
- Text Shadow: Adjust 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 load more button text and outline in pixel (PX), em (EM), or percentage (%) on desktop, tablet and mobile.
Conclusion
If you’re looking for Elementor WooCommerce widget to create a WooCommerce products listing, products grid, or products carousel, we recommend using Elementor Woo Products Listing widget in Premium Addons which has a lot of features like carousel, grid, custom query, quick view modal and much more. All those features will help you to customize your product page.
Also, we need to mention 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 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 Premium Addons support team from here. We would be more than glad to help 😁
Join the Community
You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.
