---
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-11
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: 821
---

# 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 the post says it is part of The Plus Addons for Elementor Pro, not the free plugin.
- Woo Product Images, Woo Single Basic, and Woo Single Pricing widgets are switched on under ThePlus Settings > Widgets, and they read each product's own data without Elementor Pro Dynamic Tags.
- Woo Single Basic keeps only the title and short_descripton, while Woo Single Pricing keeps only the price and add_to_cart before the template is published.
- Product Listing uses Custom Skin from the Style dropdown, can load a template from Select a template, and Multiple Loops supports up to 5 templates in Default, Reverse, or Random order.

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, make sure its 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/2024/05/tpae-product-listing-custom-skin-preview.png)

### 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/2023/08/product-listing-custom-skin.gif)

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/2024/05/tpae-product-listing-custom-skin-demo.gif)

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 a few specific pieces being active: WooCommerce needs to be installed with published products, and the Woo Product Listing widget is part of The Plus Addons for Elementor Pro, not the free plugin. The page also says Woo Product Images, Woo Single Basic, and Woo Single Pricing should be switched on under ThePlus Settings > Widgets because those widgets read each product’s own data. That matters because the template pulls product content directly from WooCommerce instead of relying on Elementor Pro Dynamic Tags.

**Q: Can I build a custom product loop with custom fields instead of the default product data?**
A: The page says you can create a custom product loop with custom fields, so this workflow is not limited to the standard WooCommerce fields shown in the example. The tutorial’s main example uses Woo Product Images, Woo Single Basic, and Woo Single Pricing to build the loop, which keeps the layout tied to each product’s own data. That makes it a good fit when you want a custom card design but still want the content to stay dynamic per product.

**Q: How many templates can I use with Multiple Loops in the Product Listing widget?**
A: Multiple Loops supports up to 5 templates together. That is useful when you want variation inside one listing instead of repeating the same card design for every product. The page also notes that each loop template needs its own separate custom template, and you can order them as Default, Reverse, or Random. If you are planning a mixed grid, design each template with that layout in mind before combining them.

**Q: Why does my custom product card show no product data?**
A: That usually happens when ordinary widgets are used for product values instead of the Woo Builder widgets. The page is explicit that only the Woo Builder widgets know which product they are on, so generic Elementor widgets will not pull the current item’s data correctly. In practice, that means your image, title, price, and add to cart elements need to come from the Woo widgets used in the tutorial if you want each card to populate properly.

**Q: Why is my template missing from Select a template in the Product Listing widget?**
A: The template has to be saved under Templates > Saved Templates before it appears in Select a template. If it was created but not saved there yet, reloading the editor is part of what makes it show up. This is a common snag because the listing widget only sees templates that are actually stored as saved templates, not just anything currently open in the editor.

**Q: Should I use Masonry or Metro layout with any custom product skin?**
A: Masonry and Metro are layout-sensitive, so the template has to be designed for them specifically. That means a card built for a standard grid may not behave well if you switch it into one of those layouts without planning for it. The page also says layout type is chosen from the Layout dropdown after selecting Custom Skin, so matching your template design to the intended layout avoids broken spacing or awkward cropping.