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.
  • Show Order by Menu: Hide or display the sorting dropdown menu on the frontend.
  • Show Results Count: Hide or display the product count.
  • Choose How To Display Load More: Select how to show the show more button.
  • Scroll To Top After Ajax Update: If you want the page to scroll up after loading more then enable this.
  • Fine Tune The Position: Fine-tune the position.
  • Disable Products When Category Has Child Category: This only works on category pages.
  • Exclude Categories: Add a list of comma-separated category slugs to exclude.
  • Exclude Products: Add a list of comma-separated product IDs to exclude.
  • Filter/Infinite Scroll Icon Animation: Select animation to show when loading products.
  • Ajax Filter Animation Colour: Define the animation colour.
  • Ajax Filter Background Colour: Define the background colour.

Custom Layout Options - if you are using the custom loop layout

  • 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 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.
  • Layout: Select your style.
  • Grid Columns: Set grid columns on desktop.
  • Tablet Grid Columns: Set grid columns on a tablet.
  • Mobile Grid Columns: Set grid columns on mobile.
  • Show Hidden Products: Enable to show hidden products.
  • Custom Loop Query: Include categories and tags using slugs. Display featured products, most popular products and more. Sort the products by date, etc. and set the sort order to be ascending, descending, etc.

Default Style Options - if you are not using a custom loop layout

  • Display Type: Select the style.
  • Column Number: Select column number.
  • Show Rating: Show the product rating.
  • Show Price: Show the price of the product.
  • Show Excerpt: Show the product excerpt.
  • Show Add To Cart: Show the add to cart button.
  • Sale Badge Color: Set the badge colour.
  • Rating Star Color: Set the rating star colour.
  • Product Background: Set the product background.
  • Product Padding: Set the product padding.

Design Tab

  • Default Layout Product Box: Style the layout box for the default style.
  • Default Layout Price Text: Style the price text for the default style.
  • Default Layout Title Text: Style the title text for the default style.
  • Default Layout Excerpt Text: Style the excerpt text for the default style.
  • Default Layout Category Title Text: Style the category title text for the default style.
  • Default Layout Category Count Text: Style the category count text for the default style.
  • Default Layout Add To Cart Button: Style the add to cart button for the default style.
  • Load More Button: Style the load more button for the default style.
  • Sizing: Style the product loop module size.
  • Spacing: Style the product loop module spacing.
  • Border: Style the product loop module border.
  • Box Shadow: Style the product loop module box-shadow.
  • Filters: Style the product loop module filters.
  • Animation: Add animation to the product loop module.

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.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.