ARP Product Loop: How To Add & Edit A Product Loop?

Written by the Divi Engine Documentation Team

Introduction

Follow this information to add and edit the Product Loop module. This module displays products in a loop.

Step 1: Add ARP Product Loop Module

Add the Product Loop module to the shop, category, archive and search results page.

Step 2: Edit The Product Loop Module

Edit the Product Loop module using the settings provided. The minimum settings that you will need to adjust are the Post Type, Loop Style and Loop Layout.

Product Loop Module Settings

Module Options

• Post Type: Select the post type to display.
• Loop Style: Select the loop style as default or custom. Default is the WooCommerce style and custom is the custom loop layout.
• Loop Layout: Select your custom loop layout.
• Post Number: Select the number of products to display.
• Is Main Loop: If you activate this switch then the filter post module will search this loop.
• Disable Products When Category Has Child Category: This only works on category pages.
• Filter/Infinite Scroll Icon Animation: Select animation to show when loading products.

Loop Options

Include Terms

• Exclude Categories: Add category slugs to exclude associated products from the loop.
• Exclude Products: Add product slugs to exclude from the loop.
• Choose Your Taxonomy: Select a taxonomy to filter.
• Include Custom Taxonomy: Define taxonomy URLs to filter.

Terms On Load Only

• Include Categories On Load ONLY: Define category URLs to filter.
• Include Tags On Load ONLY: Define tag URLs to filter.
• Include Custom Taxonomy On Load ONLY: Select a taxonomy to filter.
• Include Custom Taxonomy Values On Load ONLY: Define taxonomy URLs to filter.

Loop Layout Options

General

• Post Number: Define the number of posts to display.
• No Results Layout: Select a no results layout built in the Divi Library.
• Hide Non-Purchasable Products: Hide non-purchasable products.
• Link Each Layout To Product: Enable to link the whole grid card to the product.
• Open In New Tab: Make the product open in a new tab.
• Equal Height Grid Cards: Enable for equal card height.
• Equal Height On Mobile: Enable for equal card height on mobile.
• Align Module At The Bottom: Align the cards.

Include Terms

• Define Custom Terms: Enable to define custom terms.
• Include Categories: Add comma-separated category URLs.
• Include Tags: Add comma-separated tag URLs.
• Display Featured Image: Enable to show the featured image.
• Display Most Popular Products: Enable to show the most popular products.
• Display On Sale Products: Enable to show on-sale products.
• Out Of Stock Products Only: Enable to show out-of-stock products.
• New Products Only: Enable to show new products.
• Number Of Days: Set the number of days to show new products.
• What Do You Want To Sort Your Products By: Select how you would like to sort your products.
• Sort Order: Set the sort order.
• Show Hidden Products: Enable to show hidden products.

Grid Options

• Layout Style: Select your layout style as gird, masonry or list.
• Grid Columns: Define the number of columns on desktop.
• Tablet Grid Columns: Define the number of columns on tablet.
• Mobile Grid Columns: Define the number of columns on mobile.
• Custom Gutter Gaps: Set the gutter gap.

Element Options

• Show Default OrderBy Menu: Hide or show the sorting dropdown menu.
• Show Results Count: Hide or show the posts count.
• Results Count Position: Set the position of the results count.
• Choose How To Display Load More: Select your pagination style. Your options are a Load More button, traditional pagination, infinite load or none.
• Scroll To The Top After Ajax Update: Enable to scroll to the top after the update.
• Fine Tune The Position: Select the position.

Default Layout Options

• Display Type: Select a display style.
• Columns Number: Select the number of columns.
• Show Rating: Enable to show the rating.
• Show Price: Enable to show the price.
• Show Excerpt: Enable to show the excerpt.
• Show Add To Cart Button: Enable to show the add to cart button.
• Sale Badge Color: Select the sale badge colour.
• Rating Stars Color: Select the star rating colour.
• Product Background: Select the background colour.
• Product Padding: Select the product padding.

Case Study

Here is an example of a product loop. Click HERE to see it.

On the shop layout built in the Divi Library, there is an ARP Product Loop module with the following settings. 

Module Options

• Post Type: Products.
• Loop Style: Custom Layout.
• Loop Layout: Book Store Layout (built in the Divi Library - the custom loop layout).
• Post Number: 4.
• Is Main Loop: YES.

Custom Layout Options

• Layout: Grid.
• Grid Columns: 4.
• Tablet Grid Columns: 2. 
• Mobile Grid Columns: 1.
• Custom Loop Query: YES and the sort by Date, Ascending.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.