Please consider leaving a donation if you appreciate this information. Lightning network now available
By default, the WooCommerce Shop Page only outputs an “Add to Cart” button for simple products. It will output a “Select Options” button for variable products. This is probably very useful for most use-cases.
This is the default shop page output
On the other hand, perhaps you would like to give your customers the option to select product variations directly from the Shop page rather than forcing them to click through to the single product page. This can be done with a simple PHP snippet. The following snippet will also add a quantity input for simple products (as well as variable products)
Which will result in a similar output on the front end:
Allow product variation selection on the main shop page
You will probably need some custom CSS to help the layout along just a little bit. This may or may not work with your theme, but should serve as an example:
Not sure what to do with code snippets? See What Do I Do With These Code Snippets?
Please consider leaving a donation if you appreciate this information. Lightning network now available
Hello this cool!!The only issue is that there is no button add to cart for variable products as i see in your pics and the same goes for my site.Any idea?
I updated the code snippet as well as the screenshot. Add to cart button works as expected.
Awesome!It works perfectly..it needs just some css for my theme! Thank you a lot for your work!
Hi there,
This is just what I was looking for, thank you!
I was getting two add to cart buttons – the one coded here and the original, so I CSS’d the original one away.
However, I’m encountering a bug on archive pages where I select quantity, add to cart, and the page refreshes (no AJAX setup) – and then all the quantities of the products on the page have the same quantity I just selected. So I installed an AJAX plugin and this works well for the variable products (no refresh, so no quantities transferred to other products). But the plugin doesn’t work with the single products. Nor does Woocommerce’s default AJAX setting, because I think it works with the regular Add to Cart button only, which I CSS’d away, and doesn’t work with this one. Does this make sense?
I’m looking for either a fix for this quantity transference bug or a way to apply AJAX to this button for single products. Any ideas how I could do this?
Thanks for your time.
Andy
>I was getting two add to cart buttons
That has nothing to do with this code snippet specifically.
What type of conflict troubleshooting have you done to isolate why that might be?
>…a way to apply AJAX to this button for single products
https://codex.wordpress.org/AJAX_in_Plugins
Thanks for your quick reply. As I’m ‘on the clock’ and really don’t have programming skills, I haven’t been able to troubleshoot the double add to cart buttons. Thank you for the link. Have a great weekend.
hi, where should i add this code to which file ? waiting for the reply
Read the article all the way to the bottom – there’s a link.
i got it thankiuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu sooooooooooooooooooooooooooooooooooo muchhhhh
hurrrayyyyyyy 🙂
hi there
Actualy my question is not related to this topic
i have purchased a theme,in that the variations are not changing in the quick view option please help
waiting for your reply
Thank you for the great snippet. I got this to work on the Storefront theme by WooCommerce, but I’m having trouble with the spacing. Any quick fixes for the bad spacing as illustrated by: http://newobp.onebreathphoto.com/index.php/product-category/matted-photographs/
A big gap opens between the summary of prices and the list of variations and then between the last variation and the quantity box. Thank you in advance!
Awesome, this still works!
How easy would it be to adapt this also into other widget locations of the site?
I imagine that would be extraordinarily difficult to pull off but you’re welcome to try.
This is a very simple and elegant snippet that still works with the latest WP+Woo.
Has anyone been able to enable AJAX add to cart functionality with this snippet? The current implementation over-rides the woocommerce AJAX and redirects to the product page.
Hi Superyawn,
2 years later, did you find a solution ? I’ve got the same issue and it seems it’s the only page dealing with this (btw, many thanks Will for this great help)
Eheh actually I just found a solution, leaving it here for anyone wondering : simply one ligne of PHP ->
add_filter( ‘woocommerce_add_to_cart_redirect’, ‘beardedguy_get_referer’ );
Awesome code! I’ve got this working great on my default shop page, however if I use woocommerce shortcode to display a category the options are no longer there. Any help or thoughts are appreciated!