Skip to main content

Common filter setups

Divi 5 only

These recipes use Filter Posts and Archive Loop in the Divi 5 Visual Builder. For every field name, see Filter item settings.

Before you start​

  1. Add Filter Posts and Archive Loop to the same page.
  2. Match Post type on both modules.
  3. Set Target loop on Filter Posts to the Archive Loop that should refresh.
  4. Add filter items under Filter Posts → Filter items.

Add Filter Posts and Archive Loop​

  1. Create or open a page in the Visual Builder.
  2. Insert Filter Posts above or beside your results area.
  3. Insert Archive Loop where filtered posts or products should appear.
  4. On Filter Posts, choose the same Post type as Archive Loop and select that loop under Target loop.

See Ajax filter module behavior for update timing, layout, and mobile options.

Filter by category​

  1. In Filter items, add a new item.
  2. Set the source to your category taxonomy (for example Product categories on shops or Categories on blogs).
  3. Choose Select or Checkbox / radio as the control type.
  4. Under taxonomy options, limit to parent terms, child terms, or counts as needed.
  5. Save and test on the front end.

Filter by tags​

  1. Add a filter item sourced from Tags or a custom tag taxonomy.
  2. Pick a control type that fits the number of terms (select for long lists, checkboxes for short lists).
  3. Confirm the Archive Loop post type uses that taxonomy.

Filter by search text​

  1. Add a filter item with source Search.
  2. Place the search field where visitors expect it (often first in the filter bar).
  3. Pair with Update method → On change or a Filter button depending on how quickly you want results to refresh.

WooCommerce: price, attributes, and rating​

Price — Add a filter item sourced from Price. Use a range control when you want a min/max slider.

Attributes — Add items per attribute taxonomy (for example color or size). Swatch controls work well when attributes map to colors.

Rating — Add a filter item sourced from Rating so shoppers can narrow by star score.

Use a product post type on both modules and a product-oriented loop template or library layout.

Custom loop layout in the library​

  1. Build a single-item layout in the Divi Library.
  2. Add Post Thumbnail, Post Title, and other modules as needed.
  3. On Archive Loop, choose Library layout and pick that layout.
  4. See Custom loop item modules.

What's next​