Divi 5 Built-In Features: Create Custom Woo Shop & Category Pages Easily

Creating a custom WooCommerce shop page usually requires extra plugins or complex coding — but with Divi 5’s built-in Loop feature, you can design fully customized product layouts visually.

In this guide, you’ll learn how to create:

• A custom WooCommerce Shop page
• Custom category pages (like Men, Hoodies, etc.)

No plugins. No code. Just Divi

Create Custom Shop Page in WooCommerce

Step 1: Create Shop Page Template

1. Go to Divi → Theme Builder
2. Click Add New Template
3. Select Shop Page
4. Click Create Template
5. Add Custom Body

Step 2: Build Product Layout Design

Inside Custom Body:

• Add Row → Column
• Inside column add:
  • Heading (Product Title)
  • Text (Price / Description)
  • Image (Product Image)

Design this layout as your product card UI

Step 3: Enable Loop

1. Open Column Settings
2. Enable Loop

Configure Loop:

• Query Type: Post Type
• Post Type: Products
• Order By: Publish Date
• Posts Per Page: 6 / 12 / 15

Optional: Select category if you want filtered products

Step 4: Connect Dynamic Content

Now link elements:

• Heading → Loop Product Title
• Text → Loop Product Price
• Image → Loop Featured Image

Optional:

• Use Featured Image as Background for creative layouts

Result

Your custom-designed shop page will now dynamically display all products.

Create Custom Specific Category Page in WooCommerce

Now let’s create custom layouts for specific product categories like:

• Men
• Hoodies
• Shirts
• Accessories

Step 1: Create Category Template

1. Go to Divi → Theme Builder
2. Click Add New Template
3. Select Specific Product Category Pages
4. Choose your category (e.g., Men)
5. Click Create Template
6. Add Custom Body

Step 2: Build Product Layout Design

Same as Shop Page (you can reuse or redesign)

Inside Custom Body:

• Add Row → Column
• Add:
  • Heading
  • Text
  • Image

Design your layout differently if you want unique category styles.

Step 3: Enable Loop (Important)

1. Open Column Settings
2. Enable Loop

Configure:

• Query Type: Post Type
• Post Type: Products
• Include Terms: Select your category (e.g., Men)
• Posts Per Page: 6 / 12 / 15

Step 4: Connect Dynamic Content

• Heading → Loop Product Title
• Text → Loop Product Price
• Image → Loop Featured Image

Result

Now only products from the selected category will display with your custom design.

Pro Tips

• Use different layouts for each category (e.g., grid, card, minimal)
• Add hover animations for modern UI
• Include Add to Cart button dynamically
• Use badges like Sale / New
• Combine with filters for advanced UX

Conclusion

Divi 5 makes WooCommerce customization simple and powerful.

You can now:

• Build fully custom shop pages
• Create unique category layouts
• Control everything visually

No plugins. No coding. Just Divi.

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments