Create custom product loop in WooCommerce with Elementor loop grid feature #

To create custom product loop in WooCommerce with product loop elementor tool, you may need to build a custom store page where you need to add your custom fields and use Elementor’s page builder. For this we use Loop Grid. To add Loop Grid, follow the steps below.

1. Enter the Elementor settings section.
   
2. Enter the Features tab.
   
3. From this tab, set the Flexbox Container and elementor loop grid options to active and save the settings.
   
4. In the elementor loop section, hover over Templates and select Theme Builder.
   
5. Select the Products Archive page or any page you want in elementor loop options.
   
6. In the window that opens, click on Add new, which is located at the top of the page. You can create a new page or select the page that you have already prepared for editing elementor loop.
7. From the elements menu, add the Loop Grid element to the page.
   
8. Click the Create a template button to create your own theme for this elementor loop grid.
   
9. From the settings section of this element, select the Content tab and set the type template check box to Products to create elementor loop grid.
   
10. In the opened window, you can add elementor loop elements such as the image, name, and price of the product or Add to Wishlist button to the template using the Shortcode or Add to Wishlist element form MoreConvert WooCommerce Wishlist and finally click on the Save and Back option.
    
11. Of course, if you want to place the button on a part of the image, after adding the Add to Wishlist button to the desired page, enter the settings of the Add to Wishlist button and do the following steps:
    1. Enter the Advanced tab from the Elementor settings menu, then select the Layout tab.
       
    2. In the Layout section, scroll down and set the position to Absolute for elementor loop grid.
       
    3. To adjust the location of the button and place it on the image, you can change the button in the direction of the X axis from the Horizontal Orientation section of the Offset section. and you can change the button in the direction of the Y axis from the Vertical Orientation section of the Offset section.
       
12. As you can see, your product circle will appear according to the template you created, and you just need to save the created page.
    

Create custom product loop in WooCommerce with WPbakery: #

Creating loops on category pages: #

1. 1. First, you need to purchase and download the Customize Product Category for WPBakery Page Builder plugin.
   2. Enter the plugin tab from the dashboard menu, then click the Add new button and finally the Upload plugin button, upload the downloaded plugin and click the install now button.
      
   3. In the opened window, click on Active plugin to activate the plugin for you.
   4. Now, from the WordPress dashboard menu, select the Categories Templates option from the Woocommerce tab.
      

1. 1. In the opened window, enter the Loop template tab and click on Add new.
      

1. 1. In the window that opens, choose a name for your template.
      

1. 1. Click Add Element.
      

1. 1. Now enter the Woo Product Category tab and select the Product loop tab.
      

1. 1. In the opened window, you can select the elements you need for your template, such as product image, product name, product price, etc. Be careful to put all the fields related to the product card in one line.
      

1. 1. After adding the elements related to WooCommerce, it is time to add the Add to wishlist button. For this, add the Text Block element on the desired line and in the text block content section, add the short code for Add to Wish List. That is, put [wlfmc_add_to_wishlist] and save the changes.
      

1. 1. If you need to change the position and appearance of the Add to Wish List button, just go to the Design Options tab and apply the relevant changes.
      

1. Now click on the publish option to finalize the template and save it.
   
   
2. Now enter the Products Categories Templates tab and click on Add new.
   
   
3. In the opened window, choose a name for your category.
   
4. Now click on Add Element.
   
5. Now enter the Woo product category tab and go to the Product category page tab and select the Products – Loop element.
   
   
6. Now enter the Woo product category tab and go to the Product category page tab and select the Products – Loop element.
   
7. Finally, click on the Publish option so that the settings created on the category pages can be displayed.
   
8. Finally, on the opened page, activate the created category.
   
9. Now you can see the result by going to the category page.
   
   

Creating a loop on the store page: #

To create a custom loop with the Add to Wishlist button on the shop page, it is enough to do the steps mentioned in the category page with the Customize Shop Page for WPBakery Page Builder plugin, so that after installing and activating the plugin, the following steps should be performed:

1. Enter the Shop page template section by hovering over the WooCommerce option in the WordPress dashboard menu.
2. In the loop template section, click on Add template.
3. On the opened page, choose a name for the template and by clicking on add element option in the Customize shop tab and under the loop tab, you can select all the elements you need to make the loop.
4. Finally, you can add the button list to the loop by using the text block element and using the add to wish button shortcode, and finally you have to save the created template.
5. Now you need to enter the template shop tab and click on Add New.
6. Now choose a name for the page and click on add element.
7. Enter the Customize shop tab again and select the shop tab, now select the Product – Loop element and select the created template from the settings section of the loop template section and finally save the created template.
8. Finally, activate the created template.

Wrap Up #

In conclusion, adding a custom WooCommerce product loop with elementor loop grid can be achieved using plugins like Elementor and WPBakery Page Builder.

With Elementor loop builder, you can create a custom store page and use the elementor loop grid element to add a custom product loop in WooCommerce with customizable elements like product image, name, price, and an Add to Wishlist button.

With WPBakery Page Builder, you can purchase and download the Customize Product Category or Customize Shop Page plugin to create custom product loop in WooCommerce on category pages or the store page.

The process of creating woocommerce product loop involves adding loop grid elementor options related to WooCommerce and the Add to Wishlist button using shortcodes or the Text Block element, and finally saving the created template and activating it. By following these steps, you can customize your custom product loop in WooCommerce and make the woocommerce product loop more user-friendly for your customers.