---
title: "How to Create WooCommerce Custom Product Loop in Elementor?"
url: https://theplusaddons.com/docs/create-woocommerce-custom-product-loop-in-elementor/
date: 2023-08-11
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Do you want to show your WooCommerce product in a custom layout? The default WooCommerce product layout is not very customizable, so your online store may look similar to others..."
word_count: 1158
---

# How to Create WooCommerce Custom Product Loop in Elementor?

## 

- The Plus Addons for Elementor Product Listing widget creates a custom WooCommerce product loop in Elementor, and the post says the default WooCommerce product layout is not very customizable.
- ACF adds two custom fields for the example, background color and rating, with the location set to Product under Rules.
- The custom template uses TPAE Row Background, TPAE Creative Image, TPAE Advanced Buttons, Elementor Heading, and Elementor Star Rating widgets, with Dynamic Tags pulling Product Image, Add To Cart, Product Title, Product Price, and ACF fields.
- Product Listing uses Custom Skin to load the saved template, and Multiple Loops supports up to 5 templates with Reverse or Random order; Masonry and Metro need templates designed for those layouts.

Do you want to show your WooCommerce product in a custom layout? The default WooCommerce product layout is not very customizable, so your online store may look similar to others that use WooCommerce. Creating a custom product loop allows you to stand out from the rest with your custom design.

With the Product Listing widget from The Plus Addons for Elementor, you can easily design a custom loop for your WooCommerce product in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, [click here](/docs/product-listing-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-listing/?utm_source=tpae&utm_medium=docs&utm_campaign=text#woo-products-wgts)

## Before You Start

- **Edition:** **Pro** — the Woo Product Listing widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.- **WooCommerce** installed and active, with some published products.- **Elementor Pro** for the Dynamic Tags used in this example. To build the card without Elementor Pro, use The Plus Addons Woo Builder widgets instead — see [create a custom product skin](https://theplusaddons.com/docs/create-a-custom-woocommerce-product-skin-in-elementor/).- **Advanced Custom Fields** only if you want extra fields like the ones below. It is optional.- **Widget to enable:** Woo Product Listing, switched on under **ThePlus Settings > Widgets**.

To do this, make sure you’ve added some products to your WooCommerce store, then follow the steps - 

https://www.youtube.com/watch?v=XkkUOAJ-5dk

First, you have to create a custom product template using Elementor. For instance, we will be creating this custom product layout design.

![product listing custom skin preview](https://theplusaddons.com/wp-content/uploads/2026/09/product-listing-custom-skin-preview.webp)

For this design, we will need the [Advanced Custom Fields (ACF)](https://wordpress.org/plugins/advanced-custom-fields/) plugin for adding some custom fields and [Elementor Pro](https://elementor.com/pro/) plugin for fetching dynamic data.

> *Note: The Advanced Custom Fields (ACF) plugin is only required if you want to add additional fields but it is not mandatory to use.* You can also [create a custom product loop using other widgets](https://theplusaddons.com/docs/create-a-custom-woocommerce-product-skin-in-elementor/).

### Add Custom Fields to WooCommerce Product Listing

We’ll create a couple of custom fields for background color and rating.

1. To do this from the Dashboard, go to **ACF** > **Field Groups** and click on **Add New** button. 

2. Add a name to the field group.

3. Then click on the **+Add Field** button to add a field for the product background color. Add a field label, field name and select color picker as the field type.

![acf product color](https://theplusaddons.com/wp-content/uploads/2026/09/acf-product-color.webp)

4. Again, click on the **+Add Field** button to add a rating field. Add a field label, field name and select number as the field type.

5. Once done, from the **Location** section, we’ll set the location to **Product** under **Rules**.

![acf custom field location](https://theplusaddons.com/wp-content/uploads/2026/09/acf-custom-field-location.webp)

6. Once done, click on the **Update** button.

7. Then you have to add value in the custom fields on each product.

![add value in product custom fields](https://theplusaddons.com/wp-content/uploads/2026/09/add-value-in-product-custom-fields.webp)

### Create a Custom Product Template for WooCommerce

1. To do this from the Dashboard, go to **Templates** and click on **Add New**, then select **Section** as the template type, give a name to the template, then click on **Create Template** button.

![create elementor product template](https://theplusaddons.com/wp-content/uploads/2026/09/create-elementor-product-template.webp)

2. We’ll add a Container and then add the [TPAE Row Background widget](https://theplusaddons.com/elementor-widget/row-background/) to add the product background color. Select **Solid Color** from the **Select Option** dropdown. 

Then click on the background color field and click on the **Dynamic Tags**, then select the custom field under ACF.

![dynamic product background color](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-background-color.webp)

3. Add a heading widget to add the product tag and style it accordingly.

4. To add the product image, we’ll use the [TPAE Creative Image widget](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/), in the **Choose Image** field, click on the **Dynamic Tags** and select **Product Image** under WooCommerce.

![dynamic product image](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-image.webp)

Style it according to your requirement.

5. To add the add to cart button, we’ll use the [TPAE Advanced Buttons widget](https://theplusaddons.com/elementor-widget/elementor-advanced-buttons/). Select **Button Type **as **CTA Button,** then select the appropriate style and add button text. 

Now to make the button link dynamic, click on the **Dynamic Tags** in the **Link** field and select **Add To Cart** under WooCommerce.

![dynamic product button link](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-button-link.webp)

Style it further according to your requirement.

6. To add the product title, we’ll use the Elementor Heading widget and to make it dynamic, click on the **Dynamic Tags** in the **Title** field and select **Product Title** under WooCommerce.

![dynamic product title](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-title.webp)

Style it further according to your requirement.

7. Now, to add the product rating we’ll use the Elementor Star Rating widget, to make it dynamic click on the **Dynamic Tags** in the **Rating** field and select the custom field under ACF. 

![dynamic product rating](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-rating.webp)

Style it further according to your requirement.

8. Then, to add the product price, we’ll use the Elementor Heading widget, and to make it dynamic, click on the **Dynamic Tags** in the **Title** field and select **Product Price **under WooCommerce.

![dynamic product price](https://theplusaddons.com/wp-content/uploads/2026/09/dynamic-product-price.webp)

Style it further according to your requirements.

9. Once done, publish the template.

> *Note: Following this process, you can use different widgets to create the layout as well and make them dynamic using the Dynamic Tags of Elementor Pro.*

### Use the Template With the Product Listing Widget

Once you have created your custom product layout, use it with the Product Listing widget.

1. Add the Product Listing widget on a page or template, and select the appropriate listing type.

2. Then select **Custom Skin** from the **Style** dropdown.

3. Now, you have to select your template from the **Select a template** dropdown.

You can turn on the **Multiple Loops** toggle to use multiple layout designs together for your listing. You can use up to 5 templates together.

> *Note: In order to use Multiple Loops, you have to create separate custom templates for each loop template.*

If you are using multiple loops, you can arrange the templates in reverse or random order from the **Template Order** dropdown.

4. Then, you have to select the appropriate layout type from the **Layout** dropdown.

> *Note: For using Masonry and Metro layout, you have to design your templates accordingly.*

Now your products will show in your custom layout.

Also, read [How to Create a WooCommerce Product Archive Page in Elementor](https://theplusaddons.com/docs/create-a-woocommerce-product-archive-page-in-elementor/).

## Settings Reference

| Setting | Where | Options | Default |
| ------- | ----- | ------- | ------- |
| Style | Content > Content Layout | Style 1 to 3, Custom Skin | Style 1 |
| Select a template | Content > Content Layout (Custom Skin) | Your saved templates | None |
| Multiple Loops | Content > Content Layout (Custom Skin) | Show / Hide | Hide |
| Loop Template 2 to 5 | Content > Content Layout (Multiple Loops) | Your saved templates | None |
| Template Order | Content > Content Layout (Multiple Loops) | Default, Reverse, Random | Default |

## Limitations

- **Pro only.** The Woo Product Listing widget is not in the free plugin.- **Static widgets show the same content on every card.** Every product-specific value must come from a Dynamic Tag or a Woo Builder widget.- **Up to five templates** with Multiple Loops.- **Masonry and Metro need templates designed for them,** since tile sizes vary.

## Troubleshooting

### Every card shows the same product

The template uses fixed text or images. Switch those fields to Dynamic Tags, or use Woo Builder widgets.

### My template is not in Select a template

Save it under Templates > Saved Templates as a Section or Container, then reload the editor.

## Related Docs

- [Woo Product Listing widget: settings overview](https://theplusaddons.com/docs/product-listing-widget-settings-overview/) — every control in the widget.- [Build a product skin with Woo Builder widgets](https://theplusaddons.com/docs/create-a-custom-woocommerce-product-skin-in-elementor/)- [Show products in a grid](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a custom WooCommerce product loop in Elementor?**
A: The setup depends on a few specific pieces: WooCommerce must be installed and active with published products, the Woo Product Listing widget must be enabled under ThePlus Settings > Widgets, and The Plus Addons for Elementor Pro must be installed because the widget is part of the Pro version. Elementor Pro is also used in this tutorial for Dynamic Tags, while Advanced Custom Fields is optional and only needed if you want extra product fields like background color or rating.

**Q: Can I build a custom product loop without Advanced Custom Fields?**
A: The tutorial uses Advanced Custom Fields only for extra data such as background color and rating, so it is not mandatory. The core custom loop still comes from the Product Listing widget in The Plus Addons for Elementor Pro, and the page notes that you can also create a custom product loop using other widgets. That matters if your design only needs standard WooCommerce data like image, title, price, and add to cart.

**Q: Why do all cards show the same product in my custom loop?**
A: That usually happens when the template contains fixed text or images instead of dynamic content. The page says static widgets show the same content on every card, so each product-specific value has to come from a Dynamic Tag or a Woo Builder widget. In practice, that means fields like image, title, price, and rating need to pull from WooCommerce or ACF rather than being typed in manually.

**Q: Why is my saved template not showing in Select a template?**
A: The template has to be saved correctly before the Product Listing widget can see it. The page says to save it under Templates > Saved Templates as a Section or Container, then reload the editor. That detail matters because templates saved in the wrong place or with the wrong type will not appear in the dropdown when you switch to Custom Skin.

**Q: How many templates can I use with Multiple Loops?**
A: Multiple Loops supports up to 5 templates together. The page also says each loop template needs its own separate custom template, so this is best for mixed card layouts rather than one-off variations inside a single design. If you need order control, the Template Order dropdown lets you switch between Default, Reverse, and Random.

**Q: When should I use Masonry or Metro layout for a custom product loop?**
A: Masonry and Metro only work well when your templates are designed for those tile sizes. The page calls that out as a limitation because uneven card dimensions can break the layout if the template structure does not match. The Plus Addons for Elementor by POSIMYTH supports these layouts through the Product Listing widget, but the template design has to fit the grid behavior first.