How To Build A Default WooCommerce Loop Style - Demo

Written by the Divi Engine Documentation Team

Introduction

Follow these steps to build the Default WooCommerce Loop Style on our demo site. Click HERE to see the Demo page.

Preview

Description

How to create the Default WooCommerce Loop Style on our demo website.

Difficulty

Medium.

Time

25 Minutes.

Step 1: Set It Up - Archive Loop Module

Add the Archive Loop Module alongside your Filter Posts Module on the page, post or template of your choice.

1.) Add the Archive Loop Module.

Step 2: Customize Our Settings - Archive Loop Module Options

Customize the Module Options in the Content Tab of the Archive Loop Module. Below are the important settings to follow to get the style of the Archive Loop in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

1.) Set the Post Type to be "Products."
2.) Select "Default (WooCommerce Only) as the Loop Style."

3.) Enable the "Show OrderBy Menu" button.
4.) Enable the "Show Results Count" button.

Step 3: Customize Our Settings - Archive Loop Module Default Style

Customize the Default Style Options in the Content Tab of the Archive Loop Module. Below are the important settings to follow to get the style of the Archive Loop in the Ajax Filter Demo page shown at the beginning of this tutorial. For more information on this module, please visit our documentation to your left.

5.) Set the Display Style as "Grid."
6.) Set the Columns Number as "4 columns".
7.) Enable the Show Rating button.
8.) Enable the Show Price button.

9.) Change the colour of the Rating Stars.

Step 4: Customize Our Settings - Archive Loop Module Title Text

1.) Set the Title Font to "Poppins."
2.) Set the Font Weight to "Semi Bold."
3.) Align the Title Text in the center.

Step 5: Customize Our Settings - Archive Loop Module Price Text

4.) Set the Price Text Font to be "Poppins."
5.) Align the Price Text in the center.
6.) Set the colour of the Price Text.

Step 6: Customize Our Settings - Archive Loop Module Button

7.) Enable the ability to customize the button style.
8.) Set the button Text Size as 14px.
9.) Set the Text Colour as black.

10.) Set the colour of the button Background.
11.) Set the colour of the Border Colour.

12.) Set the Font Type to be "Poppins."

Step 7: Add Custom Code

No custom code here.

Step 8: Conclusion

Save and view your new Archive Loop from the frontend.

More Support?

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