Show Variations on the Shop Page With a WooCommerce Variations Plugin

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

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

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

/**
* 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.

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.

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?

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

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

[…] 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/ […]

[…] 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/ […]

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?

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

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

Hello guys!

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

Thanks!

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?

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 :)

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

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

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

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

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

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 !

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?

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

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

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?

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

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

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

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

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!

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

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

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

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.

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

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

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?

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

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.

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.

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?

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

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

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

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.

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?