Skip to main content

How To Build A Default WooCommerce Loop Style - Demo

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​

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.

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​

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.

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​

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.

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.

Last updated on