woocommerce show variations on shop page

WooCommerce Tutorials

Show Variations on the Shop Page With a WooCommerce Variations Plugin

As a WooCommerce store owner, you likely have a lot of products with variations. However, your customers have to click through to single product pages before they can even see them. 

By showing product variations on the shop page (as individual products), you’ll be able to make variations more appealing to customers and expand your product catalog in just a few clicks.

By the end of this article, you’ll walk away knowing exactly how to show variations on your WooCommerce shop page. The best part? You’ll be able to do it in just 2 steps with the WooCommerce variations plugin, Show Single Variations.

Start your 14-day free trial of Show Single Variations

Start your free trial now and instantly show WooCommerce variations on the shop page.

or learn more

How Show Single Variations works

WooCommerce Show Single Variations allows you to show variations on your WooCommerce shop page, category pages, search and filter results pages. 

These variations are displayed as if they were ‘simple’ products, but link through to the parent variable product page with the options pre-selected. The screenshot below demonstrates this (variations have been labeled with a ‘Variation’ banner for demonstration purposes).

woocommerce show variations on shop page

WooCommerce Show Single Variations allows you to:

  • Display product variations on the shop page as though they are separate products.
  • Define where variations are displayed – everywhere, search results, or filtered results.
  • Show accurate filter results by displaying relevant variations and images, rather than a generic parent product.
  • Save your customers from numerous clicks by enabling them to add a specific variation to the cart, directly on the shop page.

So now we understand how Show Single Variations works, let’s get it up and running on your site.

How to show variations on the shop page

To show variations on the shop page with WooCommerce, you’ll need to:

  1. Install the WooCommerce variations plugin, Show Single Variations.
  2. Enable product variations to show on shop/catalog pages.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your online store.

Step 1: Install Show Single Variations

Purchase WooCommerce Show Single Variations from the Iconic store to get started: iconicwp.com/woocommerce-show-single-variations

Or start a free trial:

Start your 14-day free trial of Show Single Variations

Start your free trial now and instantly show WooCommerce variations on the shop page.

or learn more

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload, and then click Activate.
  3. Once activated, you’ll need to enter your license key.

Once installed, you’ll see the general settings page.

On this page, there’s a Process Product Visibility button. It’s worth running this now as it will go through all of your products and variations and set their default visibility settings. By default, all variations are hidden until you enable them.

process product vidibility

Now that we have Show Single Variations installed, we can move onto enabling product variations to shop on the shop page.

Step 2: Enable product variations to show on shop pages

To get your variations to show individually on the shop page in WooCommerce, do the following:

  1. Go to Products > All Products in your WordPress dashboard.
  2. Select the variable product you want to edit.
  3. Scroll down to the Product Data section of the page (usually found below the main text/product description area).
  4. Click the Variations tab on the left.
  5. Click the expand arrow on the variation you want to show on the shop page.
WooCommerce variable product
  1. Once expanded, you’ll be able to see a bunch of new options, all added by the Show Single Variations Plugin, including:
    1. Show in Search Results?
    2. Show in Filtered Results?
    3. And Show in Catalog?
    4. Featured – this will show your product in featured product queries.
    5. Disable “Add to Cart”? This will change the ‘Add to Cart’ button to a ‘Select Options’ button. Useful for pre-selecting one attribute like ‘Color’ but having your customers choose the other attribute on the single product page.
show woocommerce variations in search
  1. Continue scrolling and you’ll see a Display Options section. Here you’re able to set a custom title for your variation.
  2. Once you’ve customized all your variations, hit Save Changes in the Product Data section of the page and then scroll up to the Publish section of the page and click Update.

Troubleshooting: WooCommerce variations not showing or working

If you’re having trouble with your WooCommerce variations not showing or working, there may be a few things causing the problem.

First of all, make sure to check you’ve set up your variable product correctly. We have step-by-step instructions on how to do this in our variable product guide. Just scroll down to the how-to section.

Next, if you’re using Show Single Variations, you need to make sure you’re setting the variations to be visible in the catalog. Please refer to our in-depth documentation which will walk you through it.

Lastly, if you’re using Show Single Variations and are still having problems after checking our docs. You can get in touch with us via a support ticket.

Show variations on the shop page with Show Single Variations

That’s it, your store’s now ready to start selling WooCommerce variations with ease. With this up and running, you’ll be able to offer more options for your customers in fewer clicks.

Make this change quickly and easily with WooCommerce Show Single Variations.

Start your 14-day free trial of Show Single Variations

Start your free trial now and instantly show WooCommerce variations on the shop page.

or learn more

Avatar

James is the founder of Iconic and an experienced WooCommerce plugin developer. He has been featured on numerous WordPress publications.

He is a keen photographer and currently shoots using his favourite mirrorless camera, a Fuji X-T20.

83 Responses

Avatar

Hello. I just installed WooCommerce Show Single Variations plugin, but when i go to my ctegories pages, it is generated a lot of pages with 2, 3 or 0 products por each page, so I can not see the products in orden. anyone can help me to solve this problem please?.

Avatar
Kenneth admin 3 months ago

Hi Omar,

Please could you try processing the product visibility under WooCommerce > Show Single Variations > Dashboard > Process Product Visibility?

If that still doesn't fix the issue, please kindly open a support ticket from the link below.
https://iconicwp.com/support/

Hope that helps!

Avatar
pcgameskey 3 months ago

how to create variations with seperate product pages for each variations ?

Avatar
Kenneth admin 3 months ago

Hi pcgameskey,

It looks like what you need is the Linked Variations plugin.
Please check out this link below to confirm.
https://iconicwp.com/products/woocommerce-linked-variations/

Here's a demo link for you to test as well.
https://demos.iconicwp.com/woocommerce-linked-variations/product/iphone-x-space-grey-64gb/

Hope that helps!

Avatar

Is their any shortcode we can generate to show variation as single product on any pages?

Jhim

Hi Fred,

You can use WooCommerce shortcode:- https://docs.woocommerce.com/document/woocommerce-shortcodes

You can use variations ID to display the variations.

I hope this helps.

Avatar
Naresh Yadav 10 months ago

/**
* Replace add to cart button in the loop.
*/
function mycustom_change_loop_add_to_cart() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'mycustom_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'mycustom_change_loop_add_to_cart', 10 );

/**
* Use single add to cart button for variable products.
*/
function mycustom_template_loop_add_to_cart() {
global $product;

if ( ! $product->is_type( 'variable' ) ) {
woocommerce_template_loop_add_to_cart();
return;
}

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'mycustom_loop_variation_add_to_cart_button', 20 );

woocommerce_template_single_add_to_cart();
}

/**
* Customise variable add to cart button for loop.
*
* Remove qty selector and simplify.
*/
function mycustom_loop_variation_add_to_cart_button() {
global $product;

?>

single_add_to_cart_text() ); ?>
<input type="hidden" name="add-to-cart" value="get_id() ); ?>" />
<input type="hidden" name="product_id" value="get_id() ); ?>" />

<?php
}

Sir , Above snippet creates duplicate add to cart button and it is redirecting when adding product to cart. please sir customize this code. I appropriate your effort to make code like this.

Avatar

Hey i Used this snippet code its work for 1st time variation product after some scroll other variation product not work properly for add to cart.

Avatar
Fereshteh Faraji 1 year ago

hi your code really saves me. but i have a problem that I couldn't find my answer from above comments.
When you click the add to cart button is there a way to keep the page from redirecting to the product page?

Avatar
Schalk Joubert 1 year ago

Hi James,
thank you so much for sharing the code snippet. It works for me on the shop page, BUT...
I have a custom query to show products on the home page.
I don't use the built-in shortcode as I also show the products gallery for each of the 4 products on the home page.

I can't manage to change your code so that it will also work for my home page.

If you can shed some light, please and thank you!

'post_type' => 'product',
'stock' => 1,
'posts_per_page' => 4,
'orderby' =>'date',
'order' => 'DESC' );
$loop = new WP_Query( $args );

Avatar
Byron Rivera 1 year ago

Thanks for leaving the code here and not just sell your plugin. That's something not everyone does. Again, thanks a lot.

Avatar
Display Product Variations In Shop/Catalogue Page – Tech Inspiration 1 year ago

[…] We hope this article helped you learn some new useful tricks for functions.php file in WordPress. You may also refer https://iconicwp.com/blog/show-variations-shop-page-woocommerce/ […]

Avatar
Display Product Variations In Shop/Catalogue Page - Quick Learn Code 1 year ago

[…] We hope this article helped you learn some new useful tricks for functions.php file in WordPress. You may also refer https://iconicwp.com/blog/show-variations-shop-page-woocommerce/ […]

Avatar
Eirek E 1 year ago

Hi. I think I have tried "everything", but I am not able to make product variations appear in product searc results. Are there any known incompatabilities or anything obvious I might be missing?

Avatar
James Kemp admin 1 year ago

Hey, some themes link to the incorrect search results page (at which point the search settings wouldn't be applied). The URL should look like:

?s=Some+search+term&post_type=product

Rather than simply:

?s=Some+search+term

Usually can be solved by swapping out the search field in your theme with the WooCommerce search field widget.

Avatar
Gsmorigin 2 years ago

Hi i want to add a quick add hover variant based on product Sizes is it possible using this snippet.

Avatar
sunil george 2 years ago

its works perfectly in my website through code snippets ,how to add qty selector , pls help

Avatar

Hello guys!

Did you noticed that the ajax search will not work with either method? Do you have a solution for that?

Thanks!

Avatar

Hi there,

thanks for snippet. In the first version, for the simple products it prints ADD TO CART button again. So there two add to cart buttons. Did you notice that?

Avatar

Hello :) you are dope.. I used the code in my website, but I can't stop the redirect after I click "Add to cart" to the single product page.. Do you know for a chance how can I help it? Thanks a lot :)

Avatar
Pre-select variation when displaying on a separate page – WordPress Solutions Group 2 years ago

[…] tried to use Method 1 from this article, but I couldn’t remove the add to cart […]

Avatar

`woocommerce_template_single_add_to_cart();`

This part of the code makes my featured image thumbnail (on the product page) get by random other product's image.

If I remove this function, it works again but the "add to cart" button obviously disappears.

Any solution to this?

Avatar

Error
: Cannot redeclare iconic_template_loop_add_to_cart() (previously declared in /home/ba315311/probnik.pp.ua/www/wp-content/themes/gannapro/woocommerce/content-product.php:129) in
/home/ba315311/probnik.pp.ua/www/wp-content/themes/gannapro/woocommerce/content-product.php
on line
140

Avatar
James Kemp admin 2 years ago

Hey, looks like you might have already added the function on line 129 of that file

Avatar

HELLO SIR, when I choose a variation of a variable product and then press "add to cart button" it redirects me in the single product page, I don't want to redirect when buying any product, how can I solve this. can you help me...

Avatar
Hari Barman 2 years ago

THANK U SIR, sir I have no knowledge of coding and enough money for by that plugin but I use your first method it is working.. thank u again

Avatar
Hugo Fredes 2 years ago

Estimateds Good day there !

I've added the code, works and looks great.

I have only one " problem " , hope you can help me....

When i add a product with variation to the cart from the shop page, it goes to the product page and if i want to continue shopping, i have to go back the shop page, is possible to no redirect when i add to the cart ? I imagine yes, can you send me the code for that please ?

Thanks !

Avatar

Hi,Sir i add your first plugin code to my website but it would show two add to carts .First add to cart is not remove.Please guide me why it is show?

Avatar
Shaarif Siddiqui 2 years ago

Hi,
Thanks for this wonderful post.
It was really helpful for me as you explained very well. I found some good plugins for eCommerce at MakeWebBetter. That's just a recommendation.
Thanks

Avatar

Is it possible change product image when customer change attribute on metod 1?

Avatar
James Kemp admin 2 years ago

It's possible! But not something I can write out for you at the moment. It's actually possible to do that using my Swatches plugin. Might be worth checking out!

Avatar
Tyler Sands 2 years ago

Hi, this is a bit of a combination of both methods that I'm after. Currently using your plugin and it's great!

I was wondering if there was a way to display dropdowns on the shop archive for products that have ALREADY been separated using the plugin. For example, there's two variations in my case - flavour and strength.

I've told the plugin to split them on flavour only by leaving all the dropdowns as "Any Strength..." in the variation section. This works fine, but then I'm stuck for a way to buy the product directly from the shop page - which is what I liked about the first example and the dropdown implementation. Is this achievable?

Avatar
James Kemp admin 2 years ago

I see! Glad you're enjoying the plugin.

I think it would be possible, yes. You can try the code in the example, but modify it to fetch the parent product and use that as a basis for generating the dropdowns.

I won't have the time to write it out personally for you, but I do think what you want would be achievable!

Avatar

Dear, Do you know how can I disable the woocommerce_add_to_cart_redirect after adding the product to the cart with this method? Because it redirects me to the product page.

Thanks

Avatar
Mehran Khan 3 years ago

Hello how can i also add quantity field please guide me ASAP ! Thanks a lot for your time i am waiting for your response

Avatar
Arpit Shah 3 years ago

Hello There,

I like method 1 but i need some more help. Is it possible to add Quantity option after variation attributes?

Please let me know.

Thanks in Advance

Avatar
Nick Imming 3 years ago

Hey there! is there a way to have the first option + the add to cart button on a different page than the shop page.
Example: I have made a nice looking page in word press and I want to have a add to cart button on that page but also let people select the correct variation. I have been searching for a solution like this for ages now. Hope you could help!

Avatar

You are my hero. I have been looking for this for weeks! Any tips on getting a quantity field for each product added on the shop page as well??

Avatar

How can I make option 1 work? it didnt work for me and i need exactly this
I followed the steps but nothing

Avatar
prashant 3 years ago

For simple products use this function: woocommerce_template_loop_add_to_cart();
For variable products use this function: woocommerce_variable_add_to_cart();

So have a look this function could be something like this:

function iconic_template_loop_add_to_cart() {
global $product;

if ( ! $product->is_type( 'variable' ) ) {
woocommerce_template_loop_add_to_cart();
return;
}
else if($product->is_type( 'variable' ))
{
woocommerce_variable_add_to_cart();
return;
}
}

Avatar

I had took your solution from the comments for not redirecting to the single product page after clicking on the add to cart button from product category and shop and thanks a lot its working fine,but whats the problem now is that i too have products on my home page and from here if a add to cart its again taking to single product page.Please help me with this.

Avatar
glenn kline 3 years ago

How can i get this code to work with Woocommerce Custom Fields For Variation Pro Plugin?
Looks great and it works... but it wont show any custom fields.

Thanks

Avatar

Hi James! Your WooCommerce Show Single Variations is certainly doing the trick. Is it possible to remove the parent product from the page if there are variations? eg Only show the variations if there are any, or just show the parent if there are none?

Avatar

Hi James, thanks for the code, I just added your snippet to my page and now the shop page is not showing the categories. I also cant get the style snippet to work, I get the following error message:

The snippet has been deactivated due to an error on line 1: syntax error, unexpected '.'

Avatar
James Kemp admin 3 years ago

Hey, sounds like you may be adding it as an incorrect snippet type. You need to ensure it's a CSS snippet, or wrapped in style tags.

Avatar

Hello, this code helps me a lot. My question, is there any way to add a quantity box before the add to cart button? I already add it myself but it's not working.

Avatar
Pär Nilsson 3 years ago

Hi,

Great initiative. I was wondering if this plugin allows product pages with for example 5 colors, and obviously like 4-6 different sizes? if so, will it take the name of: Product name + color + Size in the category page then? All the examples i´ve seen on your site, was with only 2 variations, so i got a bit confused.

Avatar
James Kemp admin 3 years ago

Hey, yes - if they all have their own variations then that is possible. You can set a custom title for each variation.

Avatar
Mihail Skorlupkin 3 years ago

Hi, James!

Thanks for that snippet. Ihave 2 questions:

1. I want to remove variation description from the shop page.

2. I use a variation swatches. Can I make them with a carousel slider on shop page?

Is it posible to to with some changes in your snipppet?

Avatar

Thanks for this solution. Very clean and elegant snippet. Have you given any thought to making it AJAX add to cart friendly?

Avatar

I would like to know this too! Need to ajax add to cart for variations

Avatar
dirk2099 3 years ago

WHen you click the add to cart button is there a way to keep the page from redirecting to the product page?

Avatar
Eric Embacher 3 years ago

I would also like to know how to do this. It seems a bit daft to be able to select options from the first page, and then be redirected to a second page where you are prompted to select options...or am I missing something?

Avatar
James Kemp admin 3 years ago

This was brought in because of an update to WooCommerce. You'd need to filter `woocommerce_add_to_cart_form_action` and return an empty string for archive pages.

Avatar
Eric Embacher 3 years ago

Thanks James. Unfortunately I'd need more detailed explanation of what to do (I know JS/PHP/CSS/HTML, but am a novice at custom tweaking for WooCommerce). I also wouldn't expect you to give me a tutorial for free...I'd gladly pay you for a detailed set of instructions!

Avatar

Hi Eric I was wondering if you found a solution to this problem and wouldn't mind sharing it.

Avatar
James Kemp admin 3 years ago

Sorry guys, forgot to reply. Try this: https://gist.github.com/jamesckemp/199386787b5341199b656ac846d1335a

Avatar

Thanks for reaching out James, I was not successful getting it to work. I'm still redirected to the single product page. I implemented your code to the bottom of my functions.php file that I have in my child theme.

Avatar
James Kemp admin 3 years ago

Can I see a link to the page you're using it on?

Avatar

Absolutely, http://testing.en-sci.com/product-catalog/

Avatar
James Kemp admin 3 years ago

It may be the `is_archive()` conditional that was used. You could try `is_shop()` or `is_product_category()`. More examples: https://docs.woocommerce.com/document/conditional-tags/

Avatar

Still no success, I tried a handful of conditions. May I ask if you were successful in accomplishing this on a site you worked on?

Avatar
James Kemp admin 3 years ago

Can you email your full code (including the code from this article) so I can test it locally to support [at] iconicwp.com? Thanks!

Avatar
James Kemp admin 3 years ago

Just realised the woocommerce_add_to_cart_form_action filter isn't available yet. Should be in the next version!

Avatar

Hi: I have the new version of woocommerce, and the second snippet works, but reloads the page. And I use your snippet to show the variations on my main page, and works great, but if I add something to the cart the notification notice shows up on top of the page over the menu, so I use this to prevent that:

add_filter( 'wc_add_to_cart_message', 'remove_add_to_cart_message' );

function remove_add_to_cart_message() {
return;
}

Avatar
James Kemp admin 3 years ago

Hey, someone else mentioned this the other day. I proposed this snippet to fix it! https://gist.github.com/ico...

Avatar

Hi James
Thank you so much for your very quick reply - works a treat. I can now ease up on the headache pills !!

Avatar
Manjot Singh 3 years ago

hi James, I am unable to find above code.

Avatar
Tamsin Carter 2 years ago

I would like to see the snippet as I have the same issue but the link in your post above seems to be incomplete - can you post it again please?
I have found your code really helpful, thank you.
Tamsin

Avatar
Jan Hagge 4 years ago

Hi James, I like your snippet method 1 very much. Is it possible with a small change, just showing "size variable in stock/out of stock" when howering the product image?
Looking forward to hear your answer. Thanks.

Avatar
James Kemp admin 4 years ago

Hey, definitely possible, but it wouldn't be a small change - it'd essentially be a new snippet

Avatar
Amal Soni 4 years ago

Hello, Thanks for this code, Is there a way to make the image change when selecting the variable from the picklist? Just like it does on the product page?

Avatar
James Kemp admin 4 years ago

Hey, yes, it should definitely be possible! If I have time I'll see if I can update the snippet.

Avatar

Great James! It would be excellent! The whole community thanks you!

Avatar
Leiv Lorenz 11 months ago

Hey James,

is this already implemented? https://www.adidas.de/search?q=stan%20smith

Best regards
Leiv

Avatar
James Kemp admin 11 months ago

Hey, it's possible with our Attribute swatches plugin: https://demos.iconicwp.com/woocommerce-attribute-swatches/

Is this what you mean?

Leave a Reply

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