How to Modify Products Element Query in Bricks to Output Child Products

This Pro tutorial provides the steps to limit WooCommerce products output by Bricks' Products element on single product pages to only the children of the current product.

Step 1

Let's make the product post type hierarchical.

Add the following in child theme's functions.php or a code snippets plugin:

<?php

add_filter( 'woocommerce_register_post_type_product', function ( $args ) {
    $args['hierarchical'] = true;
    $args['supports'][] = 'page-attributes';

    return $args;
} );

Edit your products and set up parent-child arrangements as needed.

Step 2

Edit your single WooCommerce product template with Bricks.

Add a Section and inside its Container, an optional heading and Products element.

Step 3

Let's

  1. define a custom function that returns an array of current post's (of any post type) child posts and the count of the same
  2. hook a function to bricks/query/result filter to limit the products to only the child products on single WooCommerce product pages

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 526 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

How to add a “Sold Out” badge for out of stock products in Bricks

How to add a “Sold Out” badge for out of stock products in Bricks

Looking to add a "Sold Out" badge for products in the Shop page for WooCommerce products that are out of stock when using Bricks' Products…
Pro
On Sale Ribbon for WooCommerce Products Query Loop in Bricks

On Sale Ribbon for WooCommerce Products Query Loop in Bricks

Showing a SALE ribbon for products that are output using Bricks‘ Query Loop.
Categories:
Pro
Product Attribute based Related Products Bricks Query Loop

Product Attribute based Related Products Bricks Query Loop

How to output products related by value of attribute(s) for the current product on single WooCommerce product pages.
Categories:
Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Appending WooCommerce Endpoint Names To My account Page Titles in Bricks

Adding the WooCommerce endpoint names, “Orders”, “Downloads” after the WooCommerce ‘My account’ Page’s title text at the various endpoint URLs.
Categories:
Pro
Outputting Only the First ACF Repeater Row in Bricks

Outputting Only the First ACF Repeater Row in Bricks

Updated on 12 Dec 2023 In the Bricks Facebook group a user asks: How can I display only the first entry from an ACF repeater?…
Side-by-side WooCommerce Quantity and Add to Cart in Bricks

Side-by-side WooCommerce Quantity and Add to Cart in Bricks

Looking to position the quantity input field and Add to cart button next to each other instead of one below the other in Bricks? Add…
Categories: