WooCommerce: Display All Single Variations (Shortcode)

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!

With the snippet below, and by placing the [single_variations] shortcode on a custom page, I was able to display all my single product variations in a loop, together with pagination links above and below the loop. How cool?

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        Get CustomizeWoo.com FREE
 * @usage         Place shortcode [single_variations] anywhere
 * @author        Rodolfo Melogli
 * @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 ๐Ÿ™‚

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Display All Products Purchased by User
    When a WooCommerce customer is logged in, you might want to show them the list of previously purchased products (maybe in a custom “My Account” tab). This is helpful when customers tend to buy the same products over and over again, and therefore you can help them “order again” without having them to search the […]
  • WooCommerce: Display Out of Stock Products (Shortcode)
    A client of mine wanted to show out of stock products on a separate page – so I coded a simple shortcode for you all! You can use this shortcode for different goals. For example, you might want to display what products you’ve sold to enhance customer trust / social proof. So let’s see (1) […]
  • WooCommerce: Recently Viewed Products (Shortcode)
    Currently, you can use a widget or a block to have the user see the list of products they recently viewed. But for now, let’s create our own shortcode… and let’s take advantage of the existing Business Bloomer ClubRated 5.00 out of 5 $9.00 – $599.00 /once Whether youโ€™re only starting with WooCommerce or youโ€™re […]
  • WooCommerce: Exclude Category from ‘product_categories’ Shortcode
    Sometimes solutions are very simple, and you don’t need rocket science to fix your issue! A client of mine needed to hide a category from the Product Categories Shortcode ( BloomerArmada (1) WooCommerce Mini-Plugins (30) ); in fact, there is no parameter that allows you to “exclude” a given product category such as “uncategorized” or […]
  • WooCommerce: Display Product Reviews @ Custom Page (Shortcode)
    WooCommerce product reviews shows by default in the “Reviews” tab in the single product page. But what if, like me, you’re using custom sales pages and need to show such reviews elsewhere – by using a shortcode? I’ve spent some time doing this for two Business Bloomer pages, the contact page (beside the request a […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

4 thoughts on “WooCommerce: Display All Single Variations (Shortcode)

  1. 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?

    1. 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 ๐Ÿ™‚

  2. What modifications would I have to make to filter only products from a specific category?

    1. 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

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *