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

Updated onMay 9, 2026By
Table Of Content
Youtube video
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 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/
WooCommerce Product Grid Listing – https://theplusaddons.com/elementor-listing/elementor-woocommerce-product/grid/

► Get 120+ Widgets for Elementor – https://theplusaddons.com/pricing/
► Nexter Theme Builder – 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 in The Plus Addons for Elementor.

Get The Plus Addons for Elementor
View 120+ Elementor Widgets Demo
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos
Join the Elementor Facebook community

Related Frequently Asked Questions

Related Docs

Mailchimp Newsletter Subscription Widget (Responsive) for Elementor – The Plus Addons for Elementor [Video Tutorial]
How to create Before after Image Comparison using Widget for The Plus Addons for Elementor? [Video Tutorial]
How to create amazing accordions using Widget for The Plus Addons for Elementor? [Video Tutorial]
Tutorial : How to setup dynamic devices layouts using Widget for The Plus Addons for Elementor? [Video Tutorial]
Canvas Background | Particles JS | Particles background in Elementor by The Plus Addons [Video Tutorial]
How to setup Creative Image Showcase using Widget for The Plus Addons for Elementor? [Video Tutorial]
Creative Parallax Background sections (Mobile Friendly) in Elementor – The Plus Addons for Elementor [Video Tutorial]
Creative Infobox| Feature box | Service box in Elementor – The Plus Addons for Elementor [Video Tutorial]
Image Cascading (Multi Layer – Responsive – ScrollMagic – Parallax) for Elementor – The Plus Addons [Video Tutorial]
Animated Text | Heading Animation | Typing Text Widget in Elementor – The Plus Addons for Elementor [Video Tutorial]
How to setup Gallery Section Row Background using Widget for The Plus Addons for Elementor? [Video Tutorial]
How to manage content Switcher using Widget of The Plus Addons for Elementor? [Video Tutorial]
Tutorial : Setup Segmentation background effect using Widget of The Plus Addons for Elementor [Video Tutorial]
Tutorial : How to setup smooth scroll animation using Widget of The Plus Addons for Elementor? [Video Tutorial]
Ultimate Row Background (Multi Layer(3) | Power packed | Responsive) for Elementor – The Plus Addons [Video Tutorial]
How to manage flipbox content flip sections using Widget for The Plus Addons for Elementor? [Video Tutorial]
How to Setup Advance and Basic Text Content using Widget of The Plus Addons for Elementor? [Video Tutorial]
Tutorial : Manage Blog Grid Masonry Metro Carousel Listing Widget of The Plus Addons for Elementor [Video Tutorial]
Tutorial : How to create Tabs and Tours using Widget of The Plus Addons for Elementor? [Video Tutorial]
How to manage responsive values in different settings in The Plus Addons for Elementor? [Video Tutorial]