WooCommerce - Showing product variations as individual products not working

[Magnus]

Hi,

I am trying to show WooCommerce product variations as individual products using the query Cwicly block.
I have tried using the query editor to select posts with type product and product_variation,
which correctly selects all variations as a single product.
But when I save the page and look at it on the frontend, then it still only shows the main products.

I have 3 main products with 4–5 variations each. A total of 13 variations.

Step-by-step reproduction instructions:

Prerequisite:

• WooCommerce product with variations

1. Open the Post Editor/Site Editor
2. Add Cwicly query block
3. Make sure the query block is set to “Posts”
4. In Post Type choose Products and then type product_variation and choose Create product_variation
5. Add Query Template
6. Add image, and set data source to Dynamic. For Data choose WordPress. For ´WordPress choose Featured Image

Now if you look at the page it will show all the variations. However, if you enable frontend rendering for the query, then it won’t work.

Editing in the Gutenberg editor:

Frontend with Frontend Rendering enabled:

Frontend with Frontend Rendering disabled:

Networks tab response from /wp-json/wp_query/args

Environment info

• WordPress version: 6.7.1
• Cwicly Plugin version: 1.4.4

[Magnus]

Small Update

I found that I had to allow the post type product_variation before Cwicly allows it to be selected using the Ajax call.

In the Cwicly theme function.php I have added the following code to allow product_variation post type to be fetched.

// Allow product_variation as a post type for cwicly queries
add_filter('cwicly/query/api/allowed_post_types', function ($post_types) {
	$post_types['product_variation'] = 'product_variation';

	return $post_types;
});

After adding this to the function.php file, the products show up on the frontend. However, the Add to cart button does not work anymore.
When I click it, nothing happens. I have looked in the console for errors, but there are none, and I have looked in the network tab to see if a request is made, but it does nothing.

Note, if I look for events on the Add to cart button then I can see that there is a click event listening from the file BlockMaker-Ya5typht.js so there must be some logic which prevents the click from adding the product to the cart.