---
title: "WooCommerce Custom Product Loop in Elementor | Design Product Template [Video Tutorial]"
url: https://theplusaddons.com/docs/woocommerce-custom-product-loop-elementor-design-product-template/
date: 2023-07-05
modified: 2026-05-09
author: "Aditya Sharma"
description: "https://www.youtube.com/watch?v=XkkUOAJ-5dk Video Duration: 21 : 39 Video Overview This video covers creating a Custom Product Loop Skin for WooCommerce Products in Elementor. The tutorial walks through adding product featured images,..."
image: https://theplusaddons.com/wp-content/uploads/2023/07/maxresdefault-48-1024x576.jpg
word_count: 238
---

# WooCommerce Custom Product Loop in Elementor | Design Product Template [Video Tutorial]

## Key Takeaways

- Creates a Custom Product Loop Skin for WooCommerce Products using Elementor.
- Utilizes Advanced Custom Fields to add unique color backgrounds to each product.
- Employs The Plus Addons for Elementor to access over 120 powerful widgets.

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

##### Video Duration: 21 : 39

## Video Overview

This video covers creating a Custom Product Loop Skin for WooCommerce Products in Elementor. The tutorial walks through adding product featured images, product reviews and ratings, an Add to Cart button, a product page link, and a sale badge to the custom loop.

The tutorial also covers adding extra custom fields via Advanced Custom Fields (ACF) for WooCommerce to apply a unique colour background to each product. Watch the full video to see how to build a custom product template for your WooCommerce product pages in the Elementor editor.

**Best Used For:**

- WooCommerce store owners who want a custom product loop template in Elementor without writing code

- Developers building unique WooCommerce product listing skins with ACF custom fields in Elementor

- Agencies designing bespoke WooCommerce product pages for clients using The Plus Addons for Elementor

For a step-by-step written guide to this workflow, see [How to Show WooCommerce Products in Grid Layout in Elementor](https://theplusaddons.com/docs/show-woocommerce-products-in-grid-layout-in-elementor/) for the product listing widget in The Plus Addons for Elementor.

► Widget Used
Custom Loop Skin for Products - [https://theplusaddons.com/elementor-listing/blog-post-loop-skin/](https://theplusaddons.com/elementor-listing/blog-post-loop-skin/)
WooCommerce Product Grid Listing - [https://theplusaddons.com/elementor-listing/elementor-woocommerce-product/grid/](https://theplusaddons.com/elementor-listing/elementor-woocommerce-product/grid/)

► Get 120+ Widgets for Elementor - [https://theplusaddons.com/pricing/](https://theplusaddons.com/pricing/)
► Nexter Theme Builder - [https://nexterwp.com/](https://nexterwp.com/)
USE CODE ' YOUTUBE10 ' TO ENJOY EXTRA 10% DISCOUNT

To also let visitors filter products by category on the listing page, see [How to Filter WooCommerce Products by Category in Elementor](https://theplusaddons.com/docs/filter-woocommerce-products-by-category-in-elementor/) in The Plus Addons for Elementor.

[Get The Plus Addons for Elementor](https://theplusaddons.com/pricing/)

[View 120+ Elementor Widgets Demo](https://theplusaddons.com/elementor-widgets/)