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

Updated onMay 9, 2026By

Key Takeaways

  • WooCommerce Custom Product Loop Skin allows adding product featured images, reviews, ratings, and an Add to Cart button.
  • Advanced Custom Fields (ACF) enables applying unique colour backgrounds to each product in the custom loop.
  • The Plus Addons for Elementor provides 120+ widgets for creating bespoke WooCommerce product pages.
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

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What if the custom product loop doesn't display correctly in Elementor?

If your custom product loop isn't displaying as expected, check that you've correctly added the product featured images and configured the settings for the Custom Loop Skin. Ensure that the widget used is the Custom Loop Skin for Products from The Plus Addons for Elementor. A common issue is forgetting to link the add to cart button or product page link, which can lead to display problems.

What are the benefits of using The Plus Addons for Elementor in my WooCommerce store?

Using The Plus Addons for Elementor provides access to over 120 powerful widgets, including those specifically for WooCommerce. This can significantly enhance your store's functionality and design. The custom product loop feature allows for tailored product displays, which can improve user experience and potentially increase sales.

Last reviewed: May 10, 2026

Related Docs