By default, the WooCommerce Shop page displays simple, variable, grouped, bundle and other product types. As you know, each variable product is made of one or more “single variations”, and these are only visible in the single product page.
Now, what if you want to display a grid of all “single variations” in a custom page / post? Well, a shortcode can be coded so that you can achieve just that. Enjoy!
PHP Snippet: Show All Single Variations As Simple WooCommerce Products Via a Shortcode
In the example below, I’m showing 24 products per page (posts_per_page) and pagination buttons (woocommerce_pagination) above and below the grid of variations.
/**
* @snippet Display All Single Variations Shortcode
* @how-to businessbloomer.com/woocommerce-customization
* @usage Place shortcode [single_variations] anywhere
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 7
* @community https://businessbloomer.com/club/
*/
add_shortcode( 'single_variations', 'bbloomer_single_variations_shortcode' );
function bbloomer_single_variations_shortcode() {
$query = new WP_Query( array(
'post_type' => 'product_variation',
'post_status' => 'publish',
'posts_per_page' => 24,
'paged' => absint( empty( $_GET['product-page'] ) ? 1 : $_GET['product-page'] ),
));
if ( $query->have_posts() ) {
ob_start();
wc_setup_loop(
array(
'name' => 'single_variations',
'is_shortcode' => true,
'is_search' => false,
'is_paginated' => true,
'total' => $query->found_posts,
'total_pages' => $query->max_num_pages,
'per_page' => $query->get( 'posts_per_page' ),
'current_page' => max( 1, $query->get( 'paged', 1 ) ),
)
);
woocommerce_pagination();
woocommerce_product_loop_start();
while ( $query->have_posts() ) {
$query->the_post();
wc_get_template_part( 'content', 'product' );
}
woocommerce_product_loop_end();
woocommerce_pagination();
wp_reset_postdata();
wc_reset_loop();
return ob_get_clean();
}
return;
}
Is There a Plugin For That?
If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result.
Actually, in this case, I wrote a full tutorial – it covers many plugin alternatives and gives you screenshots and links. Here it is:
But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂
Hi,
I am using Tutor LMS plugin in a page I am developing for selling courses. The customer wants to show variables for a course that will start on different dates. I pasted your code and it works, however, it shows the products one below the other (3 variables), they don’t look like the image you show above (horizontal view).
Plus, these viarables show in “all courses”, they should normally show on the product which had the variable set up (variables are set up on the product page created to associate the course)
Any idea on how to solve these problems?
Hi Jose, try to add a “columns” parameter to the wc_setup_loop array, where you can specify e.g. “3” columns. Also, I don’t understand the second question 🙂
What modifications would I have to make to filter only products from a specific category?
It’s a little complex. You’d need to (1) get all product IDs that belong to a given category, and (2) use ‘post_parent__in’ in the WordPress query to limit the search to those IDs