Related FAQs on Product pages Based on Product Category Taxonomy in Bricks

Updated on 20 Dec 2023

This Pro tutorial provides the steps to modify a Bricks query loop’s posts (of a CPT) output to those related to the current post’s (another CPT) terms using a Taxonomy type field.

Scenario

CPT: faq
custom field: product_category of type Taxonomy created using ACF
return type: ID

FAQ posts have 1 or more product categories associated with them.

Objective

On single product pages, show all the FAQs associated with the current WooCommerce product’s product categories (which again, can be single or multiple).

Solution Approach

• Create a PHP function that loops through all posts of faq post type, and for each faq, loop through the values of its product_category ACF field of type taxonomy and add the faq to the array of faqs for that product category. This function returns an associative array of faqs with product category ID as the key and corresponding faqs’ array as the value.
• We create another function that gets the current product’s product categories, loops over them, checks if the product category ID is in the earlier function’s output, and if so, merge its value (array of FAQs) with a new FAQ array in each iteration.
• Another function that returns the count of the earlier function so the entire Section of “Related FAQs” can be conditionally output only if there’s at least 1 related FAQ item.
• Finally, we set unique faq post IDs of this new FAQ array as the value of post__in query parameter.

Sample Data

Numbers in brackets indicate the post/term ID.

FAQ 1:
 product_category = Automotive (66)

FAQ 2:
 product_category = Automotive (66), Baby (71)

FAQ 3:
 product_category = Watch (64)

View: Single product pages

Any product that has Automotive as its product category should show these FAQs:
 FAQ 1 (393) and FAQ 2 (394)

Any product that has Automotive and Baby as its product categories should show these FAQs:
 FAQ 1 (393) and FAQ 2 (394)

Any product that has Baby as its product category should show this FAQ:
 FAQ 2 (394)

Any product that has Watch as one of its product categories should show this FAQ:
 FAQ 3 (395)

Step 1

Create a faq CPT using ACF.

Register an associated ACF field group tilted say, “FAQ Fields”:

Step 2

Create a few FAQ entries and for each, select one or more corresponding product categories.

Step 3

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

<?php

// Function that loops through all posts of `faq` post type, and for each faq, loops through the values of its `product_category` ACF field (return type of ID) of type `taxonomy` and adds the faq to the array of faqs for that product category. Returns the associative array of faqs with product category ID as the key and corresponding faqs as the value.
// Sample output: https://d.pr/i/lNoqFr
function bl_get_product_category_faq_array(): array {
	// an empty array to store the result in
 	$faq_array = [];

	// get all the FAQ post objects
	$faqs = get_posts( [
		'post_type' => 'faq',
		'posts_per_page' => -1,
	] );

	// loop through all the FAQ posts and for each
	// get the post's product_category field value
	// loop through the above value which is an array of product category IDs and in each iteration
	// populate the $faq_array with its key being the product category ID and the value being the FAQ post ID
	foreach ( $faqs as $faq ) {
		$product_categories = get_field( 'product_category', $faq->ID );
		
		if ( ! empty( $product_categories ) ) {
			foreach ( $product_categories as $product_category ) {
				$faq_array[ $product_category ][] = $faq->ID;
			}
		}
	}
	
	return $faq_array;
}

// Function to get the FAQs associated with the current product's product categories
// Sample output: https://d.pr/i/erpXBF
function bl_get_related_faqs_ids(): array {
	// array of current product's product category IDs
	$product_category_ids = wp_list_pluck( get_the_terms( get_the_ID(), 'product_cat' ), 'term_id' );
	
	// if the current product does not have any product categories set, return an empty array
	if ( ! $product_category_ids ) {
		return [];
	}

	// array of product category IDs => corresponding FAQ post IDs array
	$faq_array = bl_get_product_category_faq_array();

	// an empty array to store the output
	$product_faq_array = [];

	// loop through the current product's product category IDs
	// for each, check if the ID is present in array returned by bl_get_product_category_faq_array()
	// and if so, store the ID's corresponding FAQ posts' IDs in an array
	foreach ( $product_category_ids as $product_category_id ) {
		if ( array_key_exists( $product_category_id, $faq_array ) ) {
			$product_faq_array = array_merge( $product_faq_array, $faq_array[ $product_category_id ] );
		}
	}
	
	// return the above array of FAQ post IDs
	return array_unique( $product_faq_array );
}

// Function to get count of FAQs associated with the current product's product categories
function bl_get_related_faqs_ids_count(): int {
	return count( bl_get_related_faqs_ids() );
}

Step 4

Edit the Bricks template that applies to singular products.

Paste the Single Product Section from this tutorial if you have not already built your single WooCommerce product template with Bricks.

Copy and paste this JSON so it appears below the Single Product Section.

Ensure that the following condition is present on the Section:

{echo:bl_get_related_faqs_ids_count}

You should now have a working solution.

Go ahead and test it.