Products Loop Widget Overview

Next, the archive template(s) for the Products Loop layout(s) should be created. To create a new template, one should go to WordPress Dashboard > Crocoblock > Woo Page Builder and click the “Create New Template” button.

In the pop-up, one should select the “Archive Item” option in the This Template For selector and set the Template Name. First, we will create the “Shop – Grid” template.

To open the editor, the “Create Template” button should be clicked. 

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

When the archive template is customized, the “Publish” button should be clicked.

Similarly, we build a “Shop – List” template to use later as a secondary layout of the Products Loop widget. This template contains the same widgets as the “Grid” layout, as well as a Star Rating, Archive Excerpt, and Archive Categories widgets.

Once the template is ready, one should click the “Publish” button.

After that, one should proceed to the WordPress Dashboard > Crocoblock > Woo Page Builder and edit the built Shop template if one has already been created. If not, one should press the “Create New Template” button to create a template.

In the pop-up, one should pick the “Shop” option in the This Template For dropdown and set its name in the Template Name field. 

When done, the “Create Template” button should be pressed.

Now, we will open the template we created by pressing the “Edit with Elementor” button next to it.

When the Elementor builder is opened, one should find and place the Products Loop widget onto the template.

The first Widget tab contains one setting field:

• Template — a template that will be used as a source for the widget.

By default, the second, Layout Switcher settings tab, includes one toggle, Enable, which activates the layout switcher above the product loop.

Once it’s enabled, two tabs appear: Main and Secondary, allowing one to customize two views of the Products Loop correspondingly.

• Template — a template used as a source for the current layout;
• Label — a label of the current layout button;
• Icon — an icon displayed next to the label on the current layout button.

The same settings are available for the Secondary tab.

Also, one can proceed to the Style tab and customize the Switcher Wrapper style. Among the settings are background, border, margin, padding, alignment, and position customization fields.

In the Switcher Buttons tab, one can customize the buttons’ style according to preferences: typography, size, colors, padding, alignment, etc. of the buttons’ labels, backgrounds, and icons placed inside them.

When the template is ready, one can save it by pressing the “Publish” button.

The result can now be checked on the shop page. 

Now users can see the Products Loop and, if the layout switcher is activated, they can switch between its layouts.

When the second layout button is clicked, the secondary layout is triggered.