Hey Jeffrey,
To display only the WooCommerce products that are compatible with the current Board Game post, you need to query the product post type using a meta query that checks if the current Board Game’s Post ID is stored inside the product’s compatible_games field.
Clarification on How ACF Stores Post Objects
Even though your ACF field is set to return a Post Object, ACF actually stores the data in the database as a PHP serialized array of Post IDs (e.g., a:2:{i:0;s:3:"123";i:1;s:3:"456";}). Therefore, you do not query by the post title; instead, you must query by matching the current Board Game’s ID inside that serialized array.
Here are the two ways you can set this up:
Solution 1: Custom Looper Provider (PHP – Highly Recommended but requires custom coding)
Please just note that the following code serves only as a guide. We cannot support issues that might arise from the use of it and we cannot improve the code. You can subscribe to our One service for that.
Because ACF stores the multiple post objects as a serialized array, querying them directly via the builder’s UI can sometimes lead to partial matches (e.g., searching for ID 12 might mistakenly match ID 123).
Using a Custom Looper hook in your child theme allows for a 100% precise query by wrapping the ID in double quotes.
Step 1: Add PHP Filter to functions.php
Open your child theme’s functions.php file (located at wp-content/themes/pro-child/functions.php) and add the following code at the end of the file:
// Custom Looper Provider to query products compatible with the current Board Game
add_filter('cs_looper_custom_compatible_products', function($result, $args = []) {
// 1. Get the current Board Game's post ID
$current_game_id = get_the_ID();
if (!$current_game_id) {
return [];
}
// 2. Query WooCommerce products
$query = new WP_Query([
'post_type' => 'product',
'posts_per_page' => -1, // Retrieve all compatible products
'meta_query' => [
[
'key' => 'compatible_games',
'value' => '"' . $current_game_id . '"', // Matches the exact ID format in ACF's serialized array
'compare' => 'LIKE',
]
]
]);
// 3. Return the posts array to the Looper Provider
return $query->posts;
}, 10, 2);
Step 2: Configure in Cornerstone Builder
- Open the Single Layout for your Board Game custom post type.
- Select the element where you want to start the loop (e.g., a Row, Div, or Layout Grid).
- Go to the Customize tab, enable Looper Provider, and configure it:
-
Type:
Custom
-
Hook:
compatible_products
- Select the child element that should repeat (e.g., Column or Div), enable Looper Consumer, and style it.
- Inside the consumer, use standard dynamic tags like
{{dc:post:title}} or {{dc:woocommerce:product_price}} to display the product details.
Solution 2: Query String (Cornerstone UI Only)
If you prefer not to write any PHP, you can use a Query String provider directly inside the Cornerstone builder.
Configure in Cornerstone Builder:
- Select the element you want as your Looper Provider.
- Go to the Customize tab and enable Looper Provider:
-
Type:
Query String
-
Query:
post_type=product&posts_per_page=-1&meta_key=compatible_games&meta_value={{dc:post:id}}&meta_compare=LIKE
- Enable Looper Consumer on the repeating child element.
Caveat with Solution 2: Because the query string passes the ID dynamically (e.g. 12) without the surrounding serialization quotes ("12"), it uses a standard SQL LIKE %12% search. This may occasionally pull in a product that has game ID 123 or 412 instead of just game ID 12. Solution 1 is recommended for complete accuracy.