Using Divi 5’s Loop Builder to build a dynamic WooCommerce category page

WooCommerce category pages often look the same, but Divi 5 changes that. The Loop Builder lets you redesign how products appear, using dynamic content that collects product data such as titles, featured images, and prices for each item in a category. Combine it with Divi 5’s CSS Grid and you get full control over the layout.

In this tutorial, you’ll learn how to create a custom category page that automatically updates with products from the right category, without any code or additional plugins beyond WooCommerce.

How to Create a WooCommerce Category Page

If you’ve ever set up a WooCommerce store, you already know what the standard category pages look like: products arranged in a basic grid with an image, name, price, and Add to Cart button, all following the same template no matter which category you’re viewing.

Switch themes and the structure hardly changes. Your ‘New Arrivals’ category will look identical to your ‘Sale’ category, which will look identical to ‘Accessories’, even though each category serves a very different purpose in your store.

It’s functional enough to keep a store running, but it doesn’t give you the design flexibility you need for a branded shopping experience. Maybe you want your New Arrivals category to feel editorial, with large product images and generous white space, while your Sale page prioritizes discounts with a cleaner, price-centric layout.

These creative decisions usually require custom code or a developer who can customize your theme files, turning what should be a design task into an engineering project. Divi 5 includes two features that work together to help you visually design category pages: the Loop Builder and CSS Grid.

Use CSS grid to control the layout

CSS Grid gives you control over how products are arranged on the page. You define the number of columns in your layout, the spacing between rows and columns, and how the structure adjusts across devices.

You can set it to four columns on desktop for a searchable grid view, drop it to two on tablets with limited screen space, and go to one column on mobile for easy thumb scrolling. All of this is configured in one place instead of writing separate layouts for each device.

Adjust the gaps between items to create an airy feel, or tighten them for a compact catalog-style presentation. You can even offset certain product cards using Grid Offset Rules to create magazine-style layouts that break the monotony of a perfect grid.

Grid takes care of the spacing, pacing, and responsive behavior, so you can build everything from minimal editorial layouts to dense sales pages that feature products, all while maintaining visual hierarchy.

Learn all about Divi 5’s grid system

Use the Loop Builder to create custom category pages

The Loop Builder populates your CSS grid layout with actual product content and makes it work across categories. It acts as a template engine. You design one product card layout (the image, name, price, and button layout) and Divi automatically repeats that design for every product in the category the visitor is viewing.

When someone lands in your shoe category, the Loop Builder pulls in all the shoe products and displays them using your card design. When they switch to Accessories, the same thing happens with accessory products, without having to create a separate layout for each category.

This turns your Grid layout into a dynamic system. You don’t manually place individual product boxes into your structure; you create a template that responds to your store’s live inventory and automatically updates when products are added, removed, or changed.

Learn all about Divi 5’s Loop Builder

Build your dynamic category page (step by step)

We’ll build a WooCommerce category layout that looks like this: a modern grid of products under a bold title, with each item styled as an individual card with rounded corners, clean typography, and bold CTA buttons.

In the coming steps, you’ll design a single loop layout for your product card, place it in a responsive grid, and assign it to your WooCommerce category template so it automatically populates for each category.

1. Set up your WooCommerce category template

Start by creating a special template for your WooCommerce category pages. From your WordPress dashboard, go to the Divi > Theme Builder and click Add new template.

To elect Build a new template.

Select Products in specific categories and choose the category in which you want to display your layout (these are your WooCommerce product categories).

Once the template appears in the builder, click Add custom body text and select Build a custom body.

This will open the Visual Builder, where you will design the layout.

2. Add a grid structure for your products

The template starts blank. Let’s import a pre-designed category page layout to speed up the process. Search for Product and choose from several product templates:

Add a new multi-row with 2 columns.

Define the number of columns you want on the desktop. You can also change the structure template to try out other layouts.

3. Turn the grid into a dynamic product loop

Now that the grid structure is in place, you can convert this layout into a dynamic product listing. Remove the extra columns, leaving one column. This column becomes your product card template from which the other cards inherit their designs.

Select the column in your grid and open its settings. On the Content tab, go to Loop and turn on the switch. To elect Products as Post Type and then choose your product category under Only include messages with specific conditions.

This tells Divi to repeat the contents of this column for each product returned by your loop query.

At this point the loop is active, but nothing appears yet because the column remains empty. In the next step, you design the product card (the template that repeats for each item in the category).

4. Style the product card template

Start by adding a 25px Boundary radius to the column.

All other items in the loop are updated automatically. You design once and any style changes are automatically applied to others.

Add product featured image

Then place the product image in the background to give our card structure. Go to Contents > Background > Image and hover over it and click on the Dynamic content option. Click and choose Loop Product Featured Image.

Only the images of products from the Home category are shown. Now add a row with two columns in the column.

Add a black background color to highlight the row.

Add 80% at the top And 10% lower margin And 20px left and right padding. These spacing values ​​ensure that the product image remains clearly visible within the rounded card and prevents it from hitting the edges, especially on dark backgrounds.

Add 25px border radius to the Row to give it a consistent look.

Add product title

Then add a Header module in the first column within the inserted row and place the product’s title in it. First adjust the Header module. We have also added 12px at top And bottom padding.

Walk the product title. Go to Content > Text and hover over the Head field. Click the Dynamic Content icon and select Loop product title.

The relevant product titles within the respective fields will be filled in automatically.

(Divi also lets you repeat more than just the title. You can enter dynamic fields such as price, sale price, stock status, reviews, short description/description, custom fields, and more. This allows you to create detailed product cards that automatically update when the product data changes in WooCommerce. You can repeat more fields; for our layout, we’ll keep it simple.)

Add an Add to Cart button

Add a button module in the right column and style it to match the design.

Open to make it dynamic Contents > Linkclick the Dynamic Content icon and choose Loop product URL. This connects the button directly to each product in the loop. We also looped the product link to the Heading module.

Now each card includes a button that links to the product page, eliminating the need for manual updates when your products change.

5. Adjust the grid structure

The category page is ready. To add some style to the way your cards appear on screen, switch to another pre-designed grid row structure.

Or use the Grid Offset editor to add a custom rule. Go to Design > Layout > Add Offset Rule. Here we added a column range rule that targets every third item in the grid.

If you want to design your own grid structure, watch this video:

Subscribe to our YouTube channel

6. Test responsiveness and publish

Make sure your product cards look good on desktop, tablet and mobile. Grid settings are responsive, so make sure spacing, text size, and buttons feel natural on smaller screens.

If everything looks good, go back to the Theme Builder and click Save. Exit and confirm that you see it All changes saved before leaving the builder.

Your custom category page is now live and WooCommerce will automatically populate it with products from the category you assigned. When the inventory changes, the layout updates automatically.

Try the Loop Builder in Divi 5 today

A standard WooCommerce category page is functional, but rarely feels custom. By combining Divi 5’s Loop Builder with CSS Grid, you’ve created a layout that looks custom, works on any device, and updates itself as inventory changes. The product card, spacing, and button style are your own, but the content remains dynamic.

From here, duplicate the layout for other categories, adjust the grid presets for different aesthetics, or add more dynamic fields like sale price, ratings, or stock badges.