---
title: "How to Create a Custom WooCommerce Product Skin in Elementor?"
url: https://theplusaddons.com/docs/create-a-custom-woocommerce-product-skin-in-elementor/
date: 2024-05-15
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Are you looking to create a custom WooCommerce product skin in Elementor? Creating a custom product item layout can help you stand out from the rest. With the Product Listing..."
word_count: 822
---

# How to Create a Custom WooCommerce Product Skin in Elementor?

## 

- The Plus Addons for Elementor Product Listing widget creates a custom WooCommerce product skin in Elementor, and it is part of The Plus Addons for Elementor Pro.
- Woo Product Images, Woo Single Basic, and Woo Single Pricing are switched on under ThePlus Settings > Widgets, and they read each product's own data without Elementor Pro Dynamic Tags.
- Custom product templates use a two-column container with Woo Product Images on the left, Woo Single Basic for title and short_descripton on the right, and Woo Single Pricing for price and add_to_cart.
- Product Listing supports Custom Skin, template selection, Multiple Loops with up to 5 templates, and Template Order options of Default, Reverse, or Random.

Are you looking to create a custom WooCommerce product skin in Elementor? Creating a custom product item layout can help you stand out from the rest.

With the Product Listing widget from The Plus Addons for Elementor, you can easily design a custom skin 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.- **Woo Product Images, Woo Single Basic and Woo Single Pricing** widgets switched on under ThePlus Settings > Widgets. They read each product's own data, so no Elementor Pro Dynamic Tags are needed.- **Widget to enable:** Woo Product Listing, switched on under **ThePlus Settings > Widgets**.

Here we’ll use the Woo Product Images, Woo Single Basic and Woo Single Pricing widgets from The Plus Addons for Elementor to create the product loop. So make sure these widgets are activated.

You can also [create a custom product loop with custom fields](https://theplusaddons.com/docs/create-woocommerce-custom-product-loop-in-elementor/).

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

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

![tpae product listing custom skin preview](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-product-listing-custom-skin-preview.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/2023/08/create-elementor-product-template-1024x487.png)

2. We’ll add a two column container, with a background color and border.

3. As per the design we have the product image on the left. For that in the left column, we’ll add the Woo Product Images widget.

4. Then select **Single Image** from the **Layout** dropdown.

5. After selecting the appropriate image size, enable the **Link** toggle, to link the product image to the product details page.

6. As per the layout we have the product title and description in the right column. For this, we’ll add the Woo Single Basic widget in the right column.

7. From the **Woo Single Basic** repeater section we’ll remove all the default items except the **title** and **short_descripton**.

> *Note: By opening individual items you can easily change the element type. You can also click on the ****+ Add Item**** button to add more elements. *

Style it further as per your requirements.

8. Then we need to add the product price and add to cart button in the right column. For this, we’ll add the Woo Single Pricing widget in the right column.

9. From the **Woo Single Pricing** repeater section we’ll remove all the default items except the **price** and **add_to_cart**.

> *Note: By opening individual items you can easily change the element type. You can also click on the ****+ Add Item**** button to add more elements. *

Style it further as per your requirements.

10. Once done, publish the template.

### Use the Template With 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.

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

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.

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

You can also [create a single product page](https://theplusaddons.com/docs/edit-woocommerce-product-page-in-elementor/) using these widgets.

## Limitations

- **Pro only.** The Woo Product Listing and Woo Builder widgets are not in the free plugin.- **Up to five templates** with Multiple Loops, ordered Default, Reverse or Random.- **Masonry and Metro need templates designed for them.**

## Troubleshooting

### The card shows no product data

Use the Woo Builder widgets for every product value. Ordinary widgets do not know which product they are on.

### My template is not in Select a template

Save it under Templates > Saved Templates, 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 loop with Dynamic Tags and ACF](https://theplusaddons.com/docs/create-woocommerce-custom-product-loop-in-elementor/)- [Add a quick view button](https://theplusaddons.com/docs/add-quick-view-button-on-woocommerce-products-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a custom WooCommerce product skin in Elementor?**
A: The setup depends on the Pro version of The Plus Addons for Elementor, plus WooCommerce being installed and active with published products. The tutorial also uses the Woo Product Images, Woo Single Basic, Woo Single Pricing, and Woo Product Listing widgets, all switched on under ThePlus Settings > Widgets. That matters because those widgets read each product’s own data directly, so Elementor Pro Dynamic Tags are not needed for this workflow.

**Q: How do I build a custom product template for WooCommerce in Elementor?**
A: The template is built as a Section under Templates > Add New, then filled with a two-column layout. The left side uses Woo Product Images with Single Image selected, while the right side uses Woo Single Basic for title and short description, plus Woo Single Pricing for price and add to cart. That structure keeps the card tied to real product data instead of static content, which is why the page recommends publishing the template only after those widgets are in place.

**Q: Can I use multiple custom layouts in one product listing?**
A: Multiple Loops lets one listing combine up to 5 templates, which is useful when you want variation instead of repeating the same card design. The catch is that each loop needs its own separate custom template, and you can order them as Default, Reverse, or Random from the Template Order dropdown. That makes it better for mixed layouts than for a single consistent card style.

**Q: Why does my product card show no data in the listing?**
A: That usually happens when ordinary widgets are used instead of the Woo Builder widgets for each product value. The page’s key point is that these widgets know which product they are on, so they can pull the correct image, title, description, price, and add to cart data. If a card is blank, the layout may look right but the content source is wrong.

**Q: Why isn’t my saved template showing in Select a template?**
A: The template needs to be saved under Templates > Saved Templates before it will appear in the Product Listing widget. If it still does not show up after saving, reload the editor so Elementor refreshes the available templates list. That small refresh step matters because the dropdown pulls from saved templates rather than unsaved work in progress.

**Q: What are the main limitations of custom WooCommerce product skins here?**
A: The biggest limits are that this is Pro only and that both Woo Product Listing and Woo Builder widgets are not in the free plugin. Multiple Loops tops out at five templates, and Masonry or Metro layouts need templates designed specifically for those layouts. In practice, that means layout planning matters before you start building cards.