Overview
As we know, on shop pages you can display WooCommerce product types like simple product, variable product, grouped product, etc.
But what about product variations? It looks like that product types do not deserve to be displayed on shop pages and by default you can view them only on a single page of corresponding variable products.
At first I drew attention to this when I developed a premium version for Advanced Woo Search plugin. So this plugin allows users to search for product variations and show them as search results along with other product types.
The problem appeared when I needed to display that product's variations on a separated search results page.
So after some time I found a solution and now I want to share it with you, because I realized that this problem occurs to quite a large number of people.
Solutions
Use existing plugins
So, first of all, quick googling shows some already existing plugins that fixed exactly the same problem. I found Products By Attributes & Variations for WooCommerce, Show WooCommerce Variations on the Shop Page and could find even more if I want.
You can just use any of such plugins and probably it will close your problem. Problem here is that many of these plugins are paid one and additionally to the main feature ( showing product variations ) can bring a huge number of other features that are not always needed for you.
As a developer, I always try to keep the use of third-party plugins to a minimum. The reason for this is that each next plugin installed increases the load on your site, potentially reducing performance. Also, all of these plugins carry excessive functionality and potential security risks.
Also the reason is that I just like to do all this custom stuff and have full control over everything ;).
My custom code snippet
So after sitting and thinking for a while I wrote the following code which adds all existing product variations to the store pages. These variations will be displayed along with all other products.
add_action( 'pre_get_posts', 'my_pre_get_posts', 999 );
function my_pre_get_posts( $query ) {
if ( is_admin() || ! is_shop() || ! is_main_query() ) {
return $query;
}
$query->set( 'post_type', array( 'product', 'product_variation' ) );
}
As you can see, that code is very simple and short. It's just using pre_get_posts hook to add an additional product_variation post type to the array of allowed posts types for the current loop.
When clicking on any product variation user will be redirected to the product single page with pre-selected attributes that are corresponding to selected product variation.
Image for the product variation is inherited from its parent product.
My custom plugin
To make things even simpler, I created a little plugin, installing which you can add exactly the same functionality, which gives the code above.
Get WordPress plugin from GitHub.
Additionally this plugin has a settings page where you can specify product IDs that must be excluded from displaying on shop pages. To find this option just open Settings -> Add Products Variations page.
Here you can specify a comma separated list of product IDs that must be excluded. If you specify variable product ID - it will exclude all its child products.