{"id":123957,"date":"2023-08-11T15:40:09","date_gmt":"2023-08-11T10:10:09","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=123957"},"modified":"2023-08-11T15:47:50","modified_gmt":"2023-08-11T10:17:50","slug":"create-woocommerce-custom-product-loop-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-woocommerce-custom-product-loop-in-elementor\/","title":{"rendered":"How to Create WooCommerce Custom Product Loop in Elementor?"},"content":{"rendered":"\n<p>Do you want to show your WooCommerce product in a custom layout? The default WooCommerce product layout is not very customizable, so your online store may look similar to others that use WooCommerce. Creating a custom product loop allows you to stand out from the rest with your custom design.<\/p>\n\n\n\n<p>With the Product Listing widget from The Plus Addons for Elementor, you can easily design a custom loop for your WooCommerce product in Elementor.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, <a href=\"\/docs\/product-listing-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#client-logos-wgts\u00a0?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, make sure you\u2019ve added some products to your WooCommerce store, then follow the steps &#8211;\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"WooCommerce Custom Product Loop in Elementor | Design Product Template\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/XkkUOAJ-5dk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>First, you have to create a custom product template using Elementor. For instance, we will be creating this custom product layout design.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1038\" height=\"921\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview.png\" alt=\"product listing custom skin preview\" class=\"wp-image-123959\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview.png 1038w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview-300x266.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview-1024x909.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview-768x681.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-preview-600x532.png 600w\" sizes=\"(max-width: 1038px) 100vw, 1038px\" \/><\/figure>\n\n\n\n<p>For this design, we will need the <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Custom Fields (ACF)<\/a> plugin for adding some custom fields and <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor Pro<\/a> plugin for fetching dynamic data.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: The Advanced Custom Fields (ACF) plugin is only required if you want to add additional fields but it is not mandatory to use.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Add Custom Fields to WooCommerce Product Listing<\/h3>\n\n\n\n<p>We\u2019ll create a couple of custom fields for background color and rating.<\/p>\n\n\n\n<p>1. To do this from the Dashboard, go to <strong>ACF<\/strong> &gt; <strong>Field Groups<\/strong> and click on <strong>Add New<\/strong> button.&nbsp;<\/p>\n\n\n\n<p>2. Add a name to the field group.<\/p>\n\n\n\n<p>3. Then click on the <strong>+Add Field<\/strong> button to add a field for the product background color. Add a field label, field name and select color picker as the field type.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1295\" height=\"874\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color.png\" alt=\"acf product color\" class=\"wp-image-123961\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color.png 1295w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color-300x202.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color-1024x691.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color-768x518.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-product-color-600x405.png 600w\" sizes=\"(max-width: 1295px) 100vw, 1295px\" \/><\/figure>\n\n\n\n<p>4. Again, click on the <strong>+Add Field<\/strong> button to add a rating field. Add a field label, field name and select number as the field type.<\/p>\n\n\n\n<p>5. Once done, from the <strong>Location<\/strong> section, we\u2019ll set the location to <strong>Product<\/strong> under <strong>Rules<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1300\" height=\"737\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location.png\" alt=\"acf custom field location\" class=\"wp-image-123962\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location.png 1300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location-300x170.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location-1024x581.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location-768x435.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/acf-custom-field-location-600x340.png 600w\" sizes=\"(max-width: 1300px) 100vw, 1300px\" \/><\/figure>\n\n\n\n<p>6. Once done, click on the <strong>Update<\/strong> button.<\/p>\n\n\n\n<p>7. Then you have to add value in the custom fields on each product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1516\" height=\"829\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields.png\" alt=\"add value in product custom fields\" class=\"wp-image-123963\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields.png 1516w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields-300x164.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields-1024x560.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields-768x420.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/add-value-in-product-custom-fields-600x328.png 600w\" sizes=\"(max-width: 1516px) 100vw, 1516px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Custom Product Template for WooCommerce<\/h3>\n\n\n\n<p>1. To do this from the Dashboard, go to <strong>Templates<\/strong> and click on <strong>Add New<\/strong>, then select <strong>Section<\/strong> as the template type, give a name to the template, then click on <strong>Create Template<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"913\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template.png\" alt=\"create elementor product template\" class=\"wp-image-123964\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template-768x365.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template-1536x730.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/create-elementor-product-template-600x285.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>2. We\u2019ll add a Container and then add the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/row-background\/\" target=\"_blank\" rel=\"noreferrer noopener\">TPAE Row Background widget<\/a> to add the product background color. Select <strong>Solid Color<\/strong> from the <strong>Select Option<\/strong> dropdown.\u00a0<\/p>\n\n\n\n<p>Then click on the background color field and click on the <strong>Dynamic Tags<\/strong>, then select the custom field under ACF.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"695\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color.png\" alt=\"dynamic product background color\" class=\"wp-image-123965\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color-300x109.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color-1024x371.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color-768x278.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color-1536x556.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-background-color-600x217.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>3. Add a heading widget to add the product tag and style it accordingly.<\/p>\n\n\n\n<p>4. To add the product image, we\u2019ll use the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/creative-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">TPAE Creative Image widget<\/a>, in the <strong>Choose Image<\/strong> field, click on the <strong>Dynamic Tags<\/strong> and select <strong>Product Image<\/strong> under WooCommerce.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1296\" height=\"823\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image.png\" alt=\"dynamic product image\" class=\"wp-image-123966\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image.png 1296w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image-300x191.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image-1024x650.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image-768x488.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-image-600x381.png 600w\" sizes=\"(max-width: 1296px) 100vw, 1296px\" \/><\/figure>\n\n\n\n<p>Style it according to your requirement.<\/p>\n\n\n\n<p>5. To add the add to cart button, we\u2019ll use the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/advanced-buttons\/\" target=\"_blank\" rel=\"noreferrer noopener\">TPAE Advanced Buttons widget<\/a>. Select <strong>Button Type <\/strong>as <strong>CTA Button,<\/strong> then select the appropriate style and add button text.\u00a0<\/p>\n\n\n\n<p>Now to make the button link dynamic, click on the <strong>Dynamic Tags<\/strong> in the <strong>Link<\/strong> field and select <strong>Add To Cart<\/strong> under WooCommerce.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1225\" height=\"896\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link.png\" alt=\"dynamic product button link\" class=\"wp-image-123967\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link.png 1225w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link-300x219.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link-1024x749.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link-768x562.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-button-link-600x439.png 600w\" sizes=\"(max-width: 1225px) 100vw, 1225px\" \/><\/figure>\n\n\n\n<p>Style it further according to your requirement.<\/p>\n\n\n\n<p>6. To add the product title, we\u2019ll use the Elementor Heading widget and to make it dynamic, click on the <strong>Dynamic Tags<\/strong> in the <strong>Title<\/strong> field and select <strong>Product Title<\/strong> under WooCommerce.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1353\" height=\"787\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title.png\" alt=\"dynamic product title\" class=\"wp-image-123968\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title.png 1353w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title-300x175.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title-1024x596.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title-768x447.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-title-600x349.png 600w\" sizes=\"(max-width: 1353px) 100vw, 1353px\" \/><\/figure>\n\n\n\n<p>Style it further according to your requirement.<\/p>\n\n\n\n<p>7. Now, to add the product rating we\u2019ll use the Elementor Star Rating widget, to make it dynamic click on the <strong>Dynamic Tags<\/strong> in the <strong>Rating<\/strong> field and select the custom field under ACF.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1344\" height=\"656\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating.png\" alt=\"dynamic product rating\" class=\"wp-image-123970\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating.png 1344w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating-300x146.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating-1024x500.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating-768x375.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-rating-600x293.png 600w\" sizes=\"(max-width: 1344px) 100vw, 1344px\" \/><\/figure>\n\n\n\n<p>Style it further according to your requirement.<\/p>\n\n\n\n<p>8. Then, to add the product price, we\u2019ll use the Elementor Heading widget, and to make it dynamic, click on the <strong>Dynamic Tags<\/strong> in the <strong>Title<\/strong> field and select <strong>Product Price <\/strong>under WooCommerce.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1612\" height=\"770\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price.png\" alt=\"dynamic product price\" class=\"wp-image-123971\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price.png 1612w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price-1024x489.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price-768x367.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price-1536x734.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/08\/dynamic-product-price-600x287.png 600w\" sizes=\"(max-width: 1612px) 100vw, 1612px\" \/><\/figure>\n\n\n\n<p>Style it further according to your requirement.<\/p>\n\n\n\n<p>9. Once done, publish the template.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Following this process, you can use different widgets to create the layout as well and make them dynamic using the Dynamic Tags of Elementor Pro.<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Use the Template With the Product Listing Widget<\/h3>\n\n\n\n<p>Once you have created your custom product layout, use it with the Product Listing widget.<\/p>\n\n\n\n<p>1. Add the Product Listing widget on a page or template, and select the appropriate listing type.<\/p>\n\n\n\n<p>2. Then select <strong>Custom Skin<\/strong> from the <strong>Style<\/strong> dropdown.<\/p>\n\n\n\n<p>3. Now, you have to select your template from the <strong>Select a template<\/strong> dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"946\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin.gif\" alt=\"product listing custom skin\" class=\"wp-image-123972\"\/><\/figure>\n\n\n\n<p>You can turn on the <strong>Multiple Loops<\/strong> toggle to use multiple layout designs together for your listing. You can use up to 5 templates together.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: In order to use Multiple Loops, you have to create separate custom templates for each loop template.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>If you are using multiple loops, you can arrange the templates in reverse or random order from the <strong>Template Order<\/strong> dropdown.<\/p>\n\n\n\n<p>4. Then, you have to select the appropriate layout type from the <strong>Layout<\/strong> dropdown.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For using Masonry and Metro layout, you have to design your templates accordingly.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now your products will show in your custom layout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"816\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/08\/product-listing-custom-skin-demo.gif\" alt=\"product listing custom skin demo\" class=\"wp-image-123973\"\/><\/figure>\n\n\n\n<p>Also, read <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-a-woocommerce-product-archive-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Create a WooCommerce Product Archive Page in Elementor<\/a>.<\/p>\n","protected":false},"author":25,"featured_media":0,"parent":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","docs":[526,579],"class_list":["post-123957","documents","type-documents","status-publish","format-standard","hentry","docs-plus-listings","docs-product-listing"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=123957"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/123957\/revisions"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=123957"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=123957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}