Show product variations on shop page
I would love to have the possibility to show product variations (with their own image) as separate products on the product listing pages (main shop page, category page, etc). That way visitors would be able to see the right product images when they use the layered nav filters.
Let's say I have a product that is available in both blue and white. I dont want to create two separate simple products, as I want the customer to be able to see and choose between the available colors on the product page. So I create a variable product using a color attribute, and assign a product image to each variation. But since the visitor only see the product once (the featured product image showcasing one of the availabe colors) on product listing pages, he might miss that it's available in another color. Or if he uses the layered nav filters to view products in the other color, he will still only see the product's featured image, which might be a bit confusing.
Please add the ability to show variations as separate products (but leading towards the same product page). I would definitely be willing to pay for it as an extension, if it isn't something that will be added to WooCommerce. I am really happy with all the other features of WooCommerce, but might have to change to a different e-commerce solution just cause I cant find a solution to this as I need it for my ongoing project.
This can be done with extensions, rather than core. There is also the option of using simple products instead which may make more sense.
Try this extension - https://wordpress.org/plugins/woo-variation-swatches/
The plugin has almost all the swatches features that you may want for your Woo store.
A product has been released for this,
Can i attribute a product category to product variations or the product category off product variations is the same that principal product?
Zara John commented
Its would be very useful for a shoppers to find the variations on shop page before going inside each product page,It is wise to display these variations on the shop page, so that the shoppers can be early aware of the available choices. I this there are many extensions for display variations on shop page https://www.themehigh.com/product/woocommerce-product-variation-swatches
Is there any method to show variation on products catalouge. or plugin available,and I hove more problem in my website Please suggest me how can show add to cart button on products catalouge. I don't want to user go inside the product description page, i want to give the facilities to user choose variataion and add to cart button on product catalouge. I want to allow this feature all products. Please Suggest Me to solve this problem
Has anyone really figured this out yet? I've scoured all over looking for something to create a simple color indicator showing the variation colors on the Shop page (not product page). I've tried several great options for the actual product page however if it's not shown on the shop page it defeats my purpose. The drop down is fine for the product page. I need it to be visual that there ARE option available from the shop page. I've managed to create an attribute that I can toss up in a side menu for filtering is the only thing even close as of yet and that just isn't pretty. Does Shopify or other places offer it as a built in? I'd be willing to start over I suppose. I can't even find a place to pay for the option for woo.
This is a major miss.
Every single major department store and brand that sells clothing has this feature. You have a plugin: https://woocommerce.com/products/variation-swatches-and-photos/ - is there not a snippet that will allow color attributes to be shown on shop/archive pages?
Romeo Romeo commented
Mr. Mike Jolley can please recommend any free plugin to show variation on shop page ?
Mario Rocha commented
"This can be done with extensions, rather than core." What extension can I use?
Ben Peel commented
James Kemp -> Can you help me with some code I'm writing by any chance? I want to do something similar to what you have done but on a variable search for quantity. I have it working and it displays the product, but when I try pull the variations through it looks wrong. Any ideas?
James Kemp commented
It looks like my previous link to this plugin was removed (at least, I can't see it). I assume it's because it's a premium plugin, however, it does solve this exact issue, so surely worth keeping on the idea?
Anyway, a plugin I've worked hard on to display single variations of a variable product: https://iconicwp.com/products/woocommerce-show-single-variations/
It has been well received so far, and your feedback will always help me to improve it.
I've found this plugin:
From the video, it looks a lot like the solution we're looking for. But what's holding me back for now are:
1) The author is giving a free download right now, so the plugin is probably still in its beta? It's Wordpress we're talking about, so I'm also quite concern about security issue.
2) The author (WooComBros) is a member on CodeCanyon since August 2015, so he's quite new to the community and hasn't generated much sales so far (i.e. 6 downloads on another plugin so far), leave alone reviews. Once this plugin becomes available on CodeCanyon, I might give it a try. But for the time being, I'm not sure I want to do that given my security concern.
If anyone has tried or would like to give it a try, please share your experience. I, for one, would really appreciate to hear that.
Does anybody know how I would show sizes available and show up when you hover on the image on shop page. Don't want customers to need to click in to product page and click drop down on sizes to see which are available
Kike Montero commented
Hi everyone !
This look great !
Does anyone find the solution ?
@GauravSaxena did your plugins works ?
Алексей Орловский commented
a very good solution. html, of course, in its sole discretion
Brendan Wood commented
Thanks for the response. I will give it a try.
James Kemp commented
You can choose each individual variation to show in the catalog listing, so I would recommend either:
1. Create a variation for "Blue, Any Size" and show that (for example). I believe you can do this and then create more specific variations after it which will override in terms of price/sku/inventory.
2. Choose one size to display in the listing "Blue, Small" - so the user can pick their own size once they click through.
Let me know if that works for you.