{"id":49247,"date":"2025-08-26T14:19:24","date_gmt":"2025-08-26T14:19:24","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49247"},"modified":"2025-08-26T14:19:27","modified_gmt":"2025-08-26T14:19:27","slug":"products-loop-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/products-loop-widget-overview\/","title":{"rendered":"Products Loop Widget Overview"},"content":{"rendered":"\n

The Products Loop <\/strong>is a widget available with the JetWooBuilder<\/em><\/a> <\/em>plugin. It allows displaying a product loop on the product archive shop page<\/a>. Besides, with this widget, one can customize two layouts, allowing users to switch between them.<\/p>\n\n\n\n

Before starting, one should navigate to the WordPress Dashboard > Crocoblock > JetPlugins Settings <\/em><\/strong>and open the JetWooBuilder<\/strong>\u2019s Widgets <\/strong>tab.<\/p>\n\n\n\n

Here, in the Shop Product Widgets <\/strong>section, the Products Loop <\/strong>toggle should be enabled.<\/p>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n

Layout Templates Creation<\/h2>\n\n\n\n
\n

Next, the archive template(s)<\/a> for the Products Loop <\/strong>layout(s) should be created. To create a new template, one should go to WordPress Dashboard > Crocoblock > Woo Page Builder <\/em><\/strong>and click the \u201cCreate New Template<\/strong>\u201d button.<\/p>\n\n\n\n

In the pop-up, one should select the \u201cArchive Item\u201d option in the This Template For <\/strong>selector and set the Template Name<\/strong>. First, we will create the \u201cShop \u2013 Grid\u201d template.<\/p>\n\n\n\n

To open the editor, the \u201cCreate Template<\/strong>\u201d button should be clicked.\u00a0<\/p>\n\n\n\n

\"shop<\/a><\/div>\n\n\n\n

In the editor, one should add the widgets that will be displayed in the Products Loop <\/strong>later. For instance, the Archive Thumbnail<\/strong>, Archive Title<\/strong>, Archive Price<\/strong>, Archive Sale Badge<\/strong>, Wishlist Button<\/strong>, and Compare Button <\/strong>are added to the current template.<\/p>\n\n\n\n

When the archive template is customized, the \u201cPublish<\/strong>\u201d button should be clicked.<\/p>\n\n\n\n

\"shop<\/a><\/div>\n\n\n\n

Similarly, we build a \u201cShop \u2013 List\u201d template to use later as a secondary layout of the Products Loop <\/strong>widget. This template contains the same widgets as the \u201cGrid\u201d layout, as well as a Star Rating<\/strong>, Archive Excerpt<\/strong>, and Archive Categories <\/strong>widgets.<\/p>\n\n\n\n

Once the template is ready, one should click the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

\"shop<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Products Loop Widget Settings<\/h2>\n\n\n\n
\n

After that, one should proceed to the WordPress Dashboard > Crocoblock > Woo Page Builder <\/em><\/strong>and edit the built Shop <\/strong>template if one has already been created. If not, one should press the \u201cCreate New Template<\/strong>\u201d button to create a template.<\/p>\n\n\n\n

In the pop-up, one should pick the \u201cShop\u201d option in the This Template For <\/strong>dropdown and set its name in the Template Name <\/strong>field.\u00a0<\/p>\n\n\n\n

When done, the \u201cCreate Template<\/strong>\u201d button should be pressed.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

Now, we will open the template we created by pressing the \u201cEdit with Elementor<\/strong>\u201d button next to it.<\/p>\n\n\n\n

\"jetwoobuilder<\/a><\/div>\n\n\n\n

When the Elementor builder is opened, one should find and place the Products Loop <\/strong>widget onto the template.<\/p>\n\n\n\n

The first Widget <\/strong>tab contains one setting field:<\/p>\n\n\n\n

\"products<\/a><\/div>\n\n\n\n