2 Ways to Show Variations on the Shop Page in WooCommerce

17 Shares

If you run a WooCommerce store, then you know how important it is to guide your users through to the checkout with as little friction as possible.

There’s been a number of studies which indicate that fewer clicks on your store mean higher conversions. As such, it makes sense to consider showing your WooCommerce product variations on the shop page; this includes the category pages, filtered pages, and search results. This means your customers won’t have to navigate through to the single product page to select their product options, or to see if the product they require is even available.

In this post, I’ll outline 2 methods to make your product variations accessible directly on the product listing pages; adding a snippet so users can select variable product options right on the shop page, and using a plugin to list variations in your shop as though they were “simple” products.

Method 1: Snippet to Show Variable Product Options on the Shop Page

This snippet will add the variable product attribute dropdowns into the WooCommerce shop pages, allowing us to add a variable product to cart without visiting the single product page. The result can be seen below.

The Code

The code we need to add to achieve the above functionality is actually quite simple. I suggest adding it to your child theme, creating a feature plugin, or using the Code Snippets plugin.

First of all, we want to remove the current add to cart buttons in the loop and replace them with our own.

/**
 * Replace add to cart button in the loop.
 */
function iconic_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', 'iconic_template_loop_add_to_cart', 10 );
}

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

/**

* Replace add to cart button in the loop.

function iconic_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', 'iconic_template_loop_add_to_cart', 10 );

}

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

Here we’ve removed the woocommerce_template_loop_add_to_cart function. This will remove the add to cart button for all products, but don’t worry, we’re going to add it back in with our own iconic_template_loop_add_to_cart function.

/**
 * Use single add to cart button for variable products.
 */
function iconic_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', 'iconic_loop_variation_add_to_cart_button', 20 );

	woocommerce_template_single_add_to_cart();
}

/**

* Use single add to cart button for variable products.

function iconic_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', 'iconic_loop_variation_add_to_cart_button', 20 );

woocommerce_template_single_add_to_cart();

}

This function checks to see if the product is variable. If it isn’t, then we just load the normal add to cart button using the woocommerce_template_loop_add_to_cart() function.

If the product is variable, we proceed to the next stage. Here I have removed the actual button from the add to cart template and replaced it with my own. All that will remain is the attribute select fields. This is so I can simplify it a bit and remove the quantity selector.

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

	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

/**

* Customise variable add to cart button for loop.

* Remove qty selector and simplify.

function iconic_loop_variation_add_to_cart_button() {

global $product;

<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

</div>

<?php

}

This is our simplified add to cart button for loop based variable products.

The full block of code then looks like this:

/**
 * Replace add to cart button in the loop.
 */
function iconic_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', 'iconic_template_loop_add_to_cart', 10 );
}

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

/**
 * Use single add to cart button for variable products.
 */
function iconic_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', 'iconic_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 iconic_loop_variation_add_to_cart_button() {
	global $product;

	?>
	<div class="woocommerce-variation-add-to-cart variations_button">
		<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
		<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
		<input type="hidden" name="variation_id" class="variation_id" value="0" />
	</div>
	<?php
}

/**

* Replace add to cart button in the loop.

function iconic_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', 'iconic_template_loop_add_to_cart', 10 );

}

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

/**

* Use single add to cart button for variable products.

function iconic_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', 'iconic_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 iconic_loop_variation_add_to_cart_button() {

global $product;

<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

</div>

<?php

}

If you’ve got this far, you may notice that the styling isn’t the prettiest. I imagine most using this technique will implement their own styling, but if you’re not sure what to do, then you can use this CSS to achieve the look in my previous screenshot. The results may vary depending on your theme.

.products .variations {
    border: 1px solid #eee;
    position: relative;
    margin-bottom: 50px;
}

.products .variations td {
    display: block;
    padding: 10px 20px 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.products .variations td:first-child {
    padding-bottom: 0;
    border: none;
}

.products .variations td:last-child {
    padding-top: 5px;
}

.products .variations tr:last-child td {
    border: none;
}

.products .variations td label {
    font-weight: 600;
}

.products .variations td select {
    width: 100%;
}

.products .variations .reset_variations {
    margin: 10px 0 0;
    position: absolute;
    bottom: -35px;
    left: 0;
    right: 0;
}

.products .variations {

border: 1px solid #eee;

position: relative;

margin-bottom: 50px;

}

.products .variations td {

display: block;

padding: 10px 20px 18px;

text-align: center;

border-bottom: 1px solid #eee;

}

.products .variations td:first-child {

padding-bottom: 0;

border: none;

}

.products .variations td:last-child {

padding-top: 5px;

}

.products .variations tr:last-child td {

border: none;

}

.products .variations td label {

font-weight: 600;

}

.products .variations td select {

width: 100%;

}

.products .variations .reset_variations {

margin: 10px 0 0;

position: absolute;

bottom: -35px;

left: 0;

right: 0;

}

Most modern themes have an Additional CSS tab in the customizer ( Appearance > Customize ).

Pros/Cons of This Method

Pros	Cons
Makes it easier to quickly add variable products to the cart.	Doesn’t give an immediate idea of what product options are available.
	Can adversely affect the layout of your shop page.

Method 2: WooCommerce Show Single Variations Plugin

WooCommerce Show Single Variations is an Iconic plugin which allows you to show variations in your WooCommerce shop page, category pages, search and filter results pages. The variations are displayed as though 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.

View Demo

Buy now

Install and Configure WooCommerce Show Single Variations

Once you’ve bought the plugin, setting it up is pretty straightforward.

First, you want to upload and activate the plugin. Go to Plugins > Add New > Upload Plugin. Choose the zip file you downloaded, upload, and then click Activate. Once activated, you’ll need to enter your licence key.

After the plugin is installed and activated, you’ll be presented with 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.

Now it’s time to start enabling product variations to show on the shop pages. Navigate to Products and then choose one of your variable products to edit.

Click the Variations tab and then select a variation that you want to enable.

Here you’ll see a number of new options. You can enable this variation to appear in the search results, filtered results, and the catalog (shop/category/shortcodes). You can also set the variation to “Featured”; this will then show up in featured product queries. The final option allows you to disable the “Add to Cart” button. 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.

There’s also a custom Title field which will show alongside the product on your shop pages.

Simply save the variations and you’ll now see them appear throughout your store, based on your settings.

Pros/Cons of This Method

Pros	Cons
Makes it easier to quickly add variable products to the cart.	Can increase the appearance of your product collection (could be pro or con).
No negative SEO impact as the variable product pages use a canonical link.
Accurate filter and search results.
Shows relevant product image for the variation.
Flexibility; choose which product variations to show and where.

Conclusion

Both of these methods are viable solutions for showing your product variations in your WooCommerce shop pages. However, when using the WooCommerce Show Single Variations plugin you can offer your customers more accurate shopping results without affecting the layout and design of your theme.

Have you got any other methods of achieving this? Is there anything you’d like to see which hasn’t been covered here? Let me know in the comments!

17 Shares

49 Comments

Amal Soni says:

December 10, 2017 at 4:44 pm

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?

Reply
- James Kemp says:
  
  January 26, 2018 at 12:10 pm
  
  Hey, yes, it should definitely be possible! If I have time I’ll see if I can update the snippet.
  
  Reply
  - Rick says:
    
    June 29, 2018 at 1:37 pm
    
    Great James! It would be excellent! The whole community thanks you!
    
    Reply
Jan Hagge says:

December 22, 2017 at 9:43 am

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.

Reply
- James Kemp says:
  
  January 26, 2018 at 12:09 pm
  
  Hey, definitely possible, but it wouldn’t be a small change – it’d essentially be a new snippet
  
  Reply
Alan says:

February 6, 2018 at 2:09 am

Hi James
I used your full block of code which is very nearly what I am trying to achieve. The only problem I have is that once a variation is selected and added to cart it changes all products defaults that contain that variation on that page. Is there an easy way round this please.

Example on http://chelmsfordwholefoods…

Adding 100g to the cart on the 1st variable product ( ajwain seeds) alters 4 other product default weights.
Thanks for your code and time.

Reply
- James Kemp says:
  
  February 6, 2018 at 10:24 am
  
  Hey, someone else mentioned this the other day. I proposed this snippet to fix it! https://gist.github.com/ico…
  
  Reply
  - Alan says:
    
    February 6, 2018 at 11:00 pm
    
    Hi James
    Thank you so much for your very quick reply – works a treat. I can now ease up on the headache pills !!
    
    Reply
  - Manjot Singh says:
    
    October 20, 2018 at 10:55 am
    
    hi James, I am unable to find above code.
    
    Reply
  - Pol says:
    
    November 15, 2018 at 5:49 pm
    
    Dear,
    The link is not working:(
    
    Thank you
    
    Reply
    - James Kemp says:
      
      January 3, 2019 at 3:52 pm
      
      hey, I couldn’t find a broken link?
      
      Reply
dirk2099 says:

February 20, 2018 at 3:05 pm

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

Reply
- Eric Embacher says:
  
  March 5, 2018 at 7:56 am
  
  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?
  
  Reply
  - James Kemp says:
    
    March 5, 2018 at 9:27 am
    
    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.
    
    Reply
    - Eric Embacher says:
      
      March 5, 2018 at 9:36 am
      
      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!
      
      Reply
      - Nathan says:
        
        May 3, 2018 at 10:19 pm
        
        Hi Eric I was wondering if you found a solution to this problem and wouldn’t mind sharing it.
      - James Kemp says:
        
        May 3, 2018 at 10:40 pm
        
        Sorry guys, forgot to reply. Try this: https://gist.github.com/jamesckemp/199386787b5341199b656ac846d1335a
      - Nathan says:
        
        May 3, 2018 at 11:10 pm
        
        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.
      - James Kemp says:
        
        May 3, 2018 at 11:42 pm
        
        Can I see a link to the page you’re using it on?
      - Nathan says:
        
        May 4, 2018 at 12:02 am
        
        Absolutely, http://testing.en-sci.com/product-catalog/
      - James Kemp says:
        
        May 4, 2018 at 2:56 pm
        
        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/
      - Nathan says:
        
        May 4, 2018 at 6:26 pm
        
        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?
      - James Kemp says:
        
        May 4, 2018 at 6:28 pm
        
        Can you email your full code (including the code from this article) so I can test it locally to support [at] iconicwp.com? Thanks!
      - James Kemp says:
        
        May 22, 2018 at 2:07 pm
        
        Just realised the woocommerce_add_to_cart_form_action filter isn’t available yet. Should be in the next version!
      - Greg says:
        
        May 24, 2018 at 8:05 pm
        
        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;
        }
Matt D says:

February 24, 2018 at 8:25 pm

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

Reply
- Dion D says:
  
  January 29, 2019 at 1:17 pm
  
  I would like to know this too! Need to ajax add to cart for variations
  
  Reply
Mihail Skorlupkin says:

March 11, 2018 at 6:40 pm

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?

Reply
Lorena Rivera says:

March 15, 2018 at 8:28 pm

Hi, James!! I used the first options and it looks great on my page!! Thanks a lot!
The only problem that I have is when I click on the Add to Cart button (after I select a variation), it takes me to the CHECKOUT PAGE. It doesnt happen with the simple products.
Its there some change to the code or something I can do to let the client stay on the shop page?
Thanks again!!!
(http://granelgourmet.cl/cat… The product Im working with is Aceite de Maní 250 ml.

Reply
Pär Nilsson says:

March 21, 2018 at 6:33 pm

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.

Reply
- James Kemp says:
  
  May 16, 2018 at 11:56 am
  
  Hey, yes – if they all have their own variations then that is possible. You can set a custom title for each variation.
  
  Reply
Michael says:

May 1, 2018 at 4:39 pm

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.

Reply
- James Kemp says:
  
  May 3, 2018 at 10:42 pm
  
  What code did you use?
  
  Reply
- Andrew says:
  
  July 6, 2018 at 5:35 am
  
  Any word on adding a quantity box to this?
  
  Reply
Lynette says:

June 12, 2018 at 9:12 am

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 ‘.’

Reply
- James Kemp says:
  
  June 13, 2018 at 1:11 pm
  
  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.
  
  Reply
Ushan says:

June 23, 2018 at 4:46 am

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?

Reply
Samuel Basash says:

July 26, 2018 at 6:38 pm

Thanks for the Code. Works so far. You’re a life saver.

Reply
glenn kline says:

August 6, 2018 at 10:06 pm

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

Reply
Varun says:

August 17, 2018 at 2:15 pm

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.

Reply
prashant says:

September 6, 2018 at 7:42 am

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;
}
}

Reply
Tom says:

September 13, 2018 at 6:09 pm

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

Reply
Kelly says:

October 10, 2018 at 1:59 pm

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

Reply
Nick Imming says:

October 10, 2018 at 8:49 pm

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!

Reply
Arpit Shah says:

October 19, 2018 at 10:04 am

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

Reply
Mehran Khan says:

October 22, 2018 at 11:55 am

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

Reply
Sean says:

November 3, 2018 at 7:23 pm

How do i add the quantity selector again? Thanks in advance…

Reply
pol says:

November 15, 2018 at 5:41 pm

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

Reply
Tyler Sands says:

February 19, 2019 at 4:24 pm

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?

Reply