What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Build the product cards with Divi 5’s Loop Builder, then connect a Post Filter Module to that loop. The filters can narrow the grid by search term, product category, price, and other catalog data—but they only work with values already assigned to your WooCommerce products.
Prepare WooCommerce product data first
Before designing the page, add your products and the data shoppers should be able to filter. Create product categories and global attributes, add their terms, and assign the relevant values to products. A filter control does not create the categories or attribute terms it needs.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Sell Your Product Using WooCommerce + DIVI: Master the art of selling products through your website | $19.99 | Buy on Amazon |
Think about whether the catalog has useful differences for each filter. A price range needs products at different prices; rating and popularity filters are most useful when products have review ratings or sales counts that distinguish them. If the values are missing or identical across products, the control may offer little practical help.
Create a product card and repeat it with Loop Builder
In the Divi 5 Visual Builder, design one card using the modules that fit your layout. The Elegant Themes tutorial uses Image, Heading, Text, and Button modules. Bind the card to the current product’s dynamic data so each repeated card displays that product’s featured image, title, and price. Set the button’s link to the product URL and enter its label as ordinary text.
#1 Best Overall
- Add the card modules inside a container and enable a Loop on that container.
- Set Query Type to Post Type, select Products, and choose how many products to show per page.
- Bind the image, heading, price, and button link to the corresponding current-product data.
- Give the outer grid and the loop-enabled card container distinct Element Labels so you can identify the loop when connecting filters.
The container’s loop repeats the card design for the products returned by the query; you only need to design the structure once.
Add and connect the Post Filter Module
Place a Post Filter Module above or beside the grid. In its settings, choose the loop-enabled card container’s Element Label as Target Loop. If the page contains multiple loops, distinct labels make it easier to select the intended target.
The tutorial’s core filter set includes search, product category, and price range. Add the fields your catalog can support:
- Search: The default search checks product titles and content. It does not automatically search every value displayed on the card, so use dedicated fields for categories, attributes, or price.
- Category: Add a category field and set its source to Product Categories.
- Price: Add a Price Range item when shoppers need to narrow results by price.
- Attribute: Add a checkbox item and select the relevant global attribute. Shoppers can filter by assigned attribute terms.
- Availability or rating: The product-loop setup also offers stock-status and review-rating fields; their usefulness depends on the product data in your store.
- Other data: Tags, shipping classes, and custom fields can be filter sources when products have the needed values and the comparison matches how those values are stored.
An attribute filter narrows products by their assigned terms; it does not replace variation-selection controls on a variable product.
Recommended Free Tools
Choose when filters apply and how they combine
Two settings govern the filtering experience:
- Submit: Changes wait until the shopper uses an Apply action.
- Auto: A change to a field applies immediately. The tutorial example uses Auto, so an Apply control is not necessary, although a Reset control can still help shoppers clear selections.
- And: Every active condition must match for a product to appear.
- Or: A product can appear if it matches any active condition.
For example, with And selected, a shopper searching for a term while choosing a category and price range sees products that satisfy all three conditions. With Or, matching any active condition is enough.
Add sorting or pagination if the grid needs it
Divi’s tutorial describes ordering by price, popularity or sales, rating, title, and date. Choose only the sorts that help shoppers compare the products you carry: popularity is based on sales counts, so equal counts do not distinguish products.
You can add a separate Pagination Module and connect it to the same loop. The tutorial says pagination follows active filters and returns to the first page when filters change.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to use WooCommerce’s filter block instead
Divi’s Loop Builder and Post Filter Module are the native Divi 5 approach for a custom card design in the Visual Builder. WooCommerce also documents a separate Product Filters block that filters a Product Collection; its documented controls include price, rating, attribute, availability, category, brand, and tag. The block normally updates without a full page reload, but enabling Reload full page on the surrounding collection changes that behavior. See WooCommerce’s Product Filters block documentation for that workflow.
WooCommerce’s Product Filters extension is another separate option, with a filter editor drawing from product attributes, categories, tags, and taxonomies. It is not a prerequisite for the Divi method; details are in the Product Filters extension documentation.
A WooCommerce Product Search theme guide notes a limitation involving context attributes in particular Product Search extension shortcodes processed by Divi’s Visual Builder, and gives a plain-text-editor workaround. That limitation is specific to those shortcodes; it does not establish that Divi 5’s native Loop Builder and Post Filter Module have the same issue. See the Product Search theme guide if you use those shortcodes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
