Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix Now×
Skip to content
Divi 5

How to Build a Filterable WooCommerce Product Grid in Divi 5

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

In Divi 5, build the product cards with the Loop Builder, then connect a Post Filter Module to the looped card container. The key is preparing WooCommerce product data first: category, price, rating, and attribute filters can only return useful results when those values are already assigned to products.

Prepare WooCommerce products and filter data

Install WooCommerce and add products before building the grid. Create the product categories and global attributes you plan to expose as filters, then assign the appropriate categories and attribute terms to each product. Adding a filter control does not create its underlying options.

Consider what shoppers need to narrow or compare. A price slider is most useful when product prices vary; rating filters need review data, and popularity sorting relies on sales counts. If the catalog has little or no variation in the relevant data, that control may offer little practical value.

WooCommerce attributes can describe products and support filtering. They can also define variable products, but an attribute filter only narrows the grid; it does not replace the product page’s variation-selection controls.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Elebase USB to USB C Adapter for iPhone 18 Pro Max,USBC Car Charger Adapter
  • Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
  • Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
  • Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
  • Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
  • 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.

Build a product card and repeat it with a Divi 5 loop

  1. Open the page in Divi 5’s Visual Builder. Add the layout structure for the product grid, then build one card using the modules appropriate to your design. The Elegant Themes tutorial uses Image, Heading, Text, and Button modules.
  2. Enable a Loop on the card container. Set Query Type to Post Type, choose Products, and choose the desired posts per page. Divi uses that container as the repeated card structure for products returned by the query.
  3. Connect card content to product data. Use dynamic data for the featured image, product title, and price. Set the button’s link to the product URL; its visible label can remain ordinary text.
  4. Design the card once. Divi applies that shared layout to each product in the loop, so check that the dynamic fields and spacing work for products with different titles, images, and prices.

The steps above follow the [Elegant Themes Divi 5 product-grid tutorial].

Target the loop with a Post Filter Module

Give the outer grid and the container with the enabled Loop distinct Element Labels. Add a Post Filter Module above or beside the grid, then set Target Loop to the label of the looped card container. Labels make it easier to choose the right target when a page contains multiple loops.

Rank #2
Anker USB-C Hub, 5-in-1 USB Hub for Laptops, 4K HDMI Multiport Adapter
  • 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
  • 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
  • Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
  • 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
  • What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.

Choose the filter behavior before adding fields:

  • Submit waits until a shopper activates Apply before updating the results.
  • Auto applies changes as a shopper adjusts a field.
  • And returns products that satisfy every active condition.
  • Or returns products that satisfy any active condition.

These settings answer different questions: Auto or Submit determines when filters run, while And or Or determines how active conditions combine. The tutorial’s example uses Auto and And. A Reset control can still help shoppers clear selections in Auto mode.

Add the filter fields shoppers need

Keyword and category

Keep a Search field for shoppers who know what they want, and add a category field set to Product Categories to browse by category. By default, search looks through product titles and content; it does not automatically search every value displayed on the card. Use dedicated controls for categories, attributes, or price rather than assuming keyword search covers them.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
Sale
Anker USB C Hub, 7in1 Multi-Port USB Adapter, 4K@60Hz USBC to HDMI Splitter
  • Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
  • Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
  • Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
  • Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
  • What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.

Price, availability, and ratings

Add a Price Range item when shoppers need to narrow by price. The product-loop filter setup also supports stock-status and review-rating fields. These controls depend on relevant catalog data: a rating field needs ratings to distinguish products, while price filtering needs prices that give shoppers a meaningful range.

Attributes and other product data

For an attribute filter, add a checkbox item and select the relevant global attribute. Shoppers can then filter by terms assigned to products. Tags, shipping classes, and custom fields can also be filter sources when the product data is present and the comparison setting matches the values stored in that data.

Rank #4
Sale
UGREEN USB to USB C Adapter Combo 4-Pack, 10Gbps USB C Converter Space Gray
  • Dual Converters, Infinite Potential:Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
  • Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
  • Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
  • Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
  • Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Consider sorting and pagination

Add ordering controls only when they help shoppers make sense of the catalog. The Divi tutorial describes sorting by price, popularity or sales, rating, title, and date. Popularity is based on sales counts, so it will not meaningfully distinguish products with identical counts.

If the grid spans multiple pages, 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 filter selections change.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
Anker USB C Hub, 5-in-1 USBC to HDMI Splitter with 4K Display
  • 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
  • Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
  • Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
  • HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
  • What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.

Choose the right filtering workflow

Divi 5’s Loop Builder and Post Filter Module are the native Divi Visual Builder approach described above. WooCommerce also documents a separate Product Filters block for a Product Collection; it is a block-editor workflow, not a setting inside the Divi Post Filter Module.

Approach Where you build it Filtering and update behavior
Divi 5 Loop Builder and Post Filter Module Divi 5 Visual Builder Targets a labeled product loop; the cited tutorial covers keyword, product category, price, and additional product-loop controls such as availability, rating, and attributes.
WooCommerce Product Filters block WooCommerce blocks with a Product Collection Documented controls include price, rating, attribute, availability, category, brand, and tag. It normally updates without a full page reload; enabling Reload full page on the surrounding collection changes that behavior.

See WooCommerce’s documentation for the Product Filters block. WooCommerce’s separate Product Filters extension has its own filter editor, with fields drawing on product attributes, categories, tags, and taxonomies; it is another option, not a prerequisite for the Divi method.

Keep shortcode limitations in scope

A WooCommerce Product Search theme guide notes that Divi Visual Builder processing is incompatible with context attributes in particular Product Search extension shortcodes, and gives a plain-text-editor workaround. That limitation concerns those shortcodes; it does not establish that Divi 5’s native Loop Builder and Post Filter Module have the same issue. Consult the Product Search theme guide if your build uses those extension shortcodes.

Troubleshoot an empty or unexpected grid

  • A filter has no useful choices: check that products have the relevant category, global attribute term, tag, or other source value assigned.
  • A filter returns no matches: confirm that the selected values exist on products and that the filter’s comparison matches the stored data.
  • Search misses information shown on a card: default search covers product titles and content, not every displayed field. Add a dedicated field for the relevant product data.
  • The filter appears disconnected: verify that Target Loop uses the Element Label of the container with the Loop enabled, not merely the outer grid label.
  • Popularity sorting looks unchanged: products with the same sales count do not gain a meaningful order from that criterion.

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.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Read next

Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.