Similarly Priced WooCommerce Products Bricks Query Loop

In the Bricks Facebook group, a user asks:

Is it possible to perform calculations for a meta value in the META QUERY section of Bricks Query loops? I want a similar product query loop to display products with prices close to the current product. So my reasoning is to add to meta queries, one that takes the current price and adds 25% and another where I remove 25%. That way, I limit the suggestions to that range.

Otherwise, can anyone explain the Compare field and how it works? I’m interested in the “Between” option.

This Pro tutorial provides the steps to show products priced within 25% (or any other percentage of your choice) of the current single product.

Let’s take a product whose price is $20 for example.

25% of $20 is $5.

After implementing the tutorial, the “Similarly Priced Products” section on this single product page will show the products priced between $20-$5 and $20+$5 i.e., between $15 and $25.

We shall restrict this to simple products.

Step 1

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

<?php

function bl_get_prices_given_range( $price_range = 25 ): string {
    // Get the regular and sale prices
    $regular_price = floatval( get_post_meta( get_the_ID(), '_regular_price', true ) );
    $sale_price    = floatval( get_post_meta( get_the_ID(), '_sale_price', true ) );

    // Determine the current product price
    $current_product_price = $regular_price;
    if ( ! empty( $sale_price ) && $sale_price > 0 ) {
        $current_product_price = $sale_price;
    }

    // Calculate the ±% range
    $min_price = $current_product_price * ( 1 - $price_range / 100 );
    $max_price = $current_product_price * ( 1 + $price_range / 100 );

    // Example:
    // return '15, 25';
    return "$min_price, $max_price";
}

We defined a custom function that takes in an integer (like 20) and returns a string that is comma-separated values 20% below and above the current product price.

We’ve set the default argument value to 25, which means if the argument is not supplied when this function is called, then the % is going to be 25 by default.

Step 2

Whitelist the bl_get_prices_given_range function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_get_prices_given_range'
  ];
} );

You should also add any other functions (native or custom) being used in your Bricks instance in addition to bl_get_prices_given_range. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Step 3

Edit your single WooCommerce product template with Bricks.

If you do not have one, here’s a starter.

Copy this JSON and paste by clicking the “Paste (All)” button next to Structure on the right.

Query loop settings:

Meta value:

{echo:bl_get_prices_given_range}

If you want to show products in a range that’s other than 25, specify that like this:

{echo:bl_get_prices_given_range(20)}

Type: NUMERIC

Condition on the Section element:

Replace 4fac05 with the Bricks ID of the query loop-enabled Block.

Note: When Compare is set to BETWEEN, Meta value is usually an array of min and max values.

Like this:

[15, 25]

When a string is provided like 15, 25, WordPress will auto-separate the string into an array.

In the Bricks control, [15, 25] should not be entered since it will become BETWEEN "[15" and "25]" which is wrong.