Menu Close

Blocksify Pro Docs

Filter WooCommerce products

Blocksify Pro filters WooCommerce products by price, sale status, stock, rating, and product attributes. This tutorial builds a Northstar shop filter and adds WooCommerce sorting above its results.

Before you start: Activate WooCommerce, create a Product Loop or a Content Loop that queries products, and add terms to the attributes you want to filter. If the filter itself is new to you, follow Add your first Loop Filter first.

Add the Price facet

  1. Open the Northstar shop page and select its Loop Filter.
  2. In Settings, confirm that Target Loop identifies the products-only Content Loop by its post type, layout, and block ID.
  3. Under Facets, click Add facet, choose Custom meta key…, then select WooCommerce — Price from the Field combobox. A Price range appears.
The Price facet Data tab shows WooCommerce — Price selected in Field and its automatic range settings below.
  1. Leave Min and Max on Auto to use the lowest and highest current product prices.
  2. Set Step and Decimals to suit the store, then open Display and choose Input or Slider.
  3. Leave Prefix and Suffix empty to follow the WooCommerce currency position, or enter custom text. Click Update.
The Northstar Shop sidebar shows a WooCommerce Price slider with currency-formatted endpoints of $26.00 and $148.00.

Price is treated as a band. If a variable product has several purchasable prices, it appears when any part of that band overlaps the visitor’s chosen range. The automatic ends come from the lowest band start and highest band end among matching products.

Add On sale, Stock status, and Rating

  1. Select the Loop Filter, click Add facet, and choose Custom meta key….
  2. In the Field combobox, select WooCommerce — On sale. It gives shoppers one On sale choice, which matches products with an active discount.
  3. Repeat the same Custom meta key… workflow and select WooCommerce — Stock status from Field. It uses WooCommerce’s current stock labels, including In stock, Out of stock, and On backorder when those values exist.
The Loop Filter settings show complete Price, On sale and Stock status facet rows with their WooCommerce field keys.
  1. Click Add facet, choose Custom meta key…, and select WooCommerce — Rating from Field. It offers Rated 4 & up, Rated 3 & up, Rated 2 & up, and Rated 1 & up.
  2. Open each facet’s Display tab to choose Checkboxes or Radio (single), counts, and empty-choice behavior.
  3. Click Update, view the page, and combine On sale with Rated 4 & up. The results narrow to Botanical Porcelain Teapot and Hand-Painted Tea Bowl.
The Northstar Shop shows On sale and Rated 4 & up active in the left sidebar beside Botanical Porcelain Teapot and Hand-Painted Tea Bowl product cards.

For a product with selectable versions, Blocksify Pro includes the parent product when a published purchasable version meets an attribute or sale choice. Sold-out attribute choices do not make that product look purchasable; Stock status follows the parent product’s current WooCommerce status.

Add a product attribute with Swatches

  1. In WooCommerce, confirm the Colour attribute has the Natural, Sage, Terracotta, Charcoal, Ochre, and Sea Glass terms used by the Northstar home-goods products.
  2. Select the Loop Filter, click Add facet, and choose the Colour taxonomy.
  3. Open the facet’s Display tab and choose Swatches. The six solid-colour choices appear with their result counts.
  4. Choose Checkboxes or Radio (single), then click Update.
The Northstar Shop Colour facet shows solid swatches for Charcoal, Natural, Ochre, Sage, Sea Glass and Terracotta with their result counts.

The Swatches choice appears only when the attribute has a supported colour or image setup. For term-name, fallback, and zero-result behavior, see Facet displays: list, buttons, dropdown and swatches.

Add WooCommerce catalog sorting

  1. Click +, insert Loop Toolbar above the products, and select the products Content Loop entry in Target Loop.
  2. Open Right, click Add toolbar part, and choose Sort.
  3. Open Sort options source. Its choices are Custom (authored below) and WooCommerce catalog sorting.
  4. Select WooCommerce catalog sorting. The preview shows the store’s available sorting choices.
  5. Click Update, then test Sort by price: low to high and Sort by average rating.
The complete Sort data popover shows the Sort by label, the order-by URL key and WooCommerce catalog sorting as the options source.

This automatic choice follows WooCommerce’s Default sorting setting and the shop’s current options: popularity, average rating, latest, and both price directions. Compatible shop extensions can add choices without requiring you to edit the toolbar. See Loop Toolbar for custom sorting.

WooCommerce facets

These four product fields are not top-level Add facet rows. When the Target Loop queries products, choose Custom meta key… and select them from the Field combobox.

FacetWhat it matches
PriceA product whose current price band overlaps the selected minimum or maximum. Currency text follows WooCommerce unless overridden.
On saleA product with an active sale on the product or one published purchasable version.
Stock statusThe parent product’s WooCommerce stock status.
RatingRated products whose average meets the selected 1, 2, 3, or 4-and-up threshold. Unrated products do not match.

Start with Build a WooCommerce product template when creating the product cards, and use the free Product Price block to show the prices these filters narrow.

Was this helpful?

0

Updated