@MLML Not yet - but that’s something we’re looking to add in the future. In fact, I just created a Wishlist item to gather numbers on that request, feel free to give it a +1!
1 Like
@brjohnson. I am new to ecommerce, but I am doing a lot of research and slowly building a couple of stores. I spent a couple of hours talking to someone who has been building woo stores for 5 years and variant visibility in collections was mentioned. I can see the logic of not hiding variants behind dropdowns. Edit: Not that dropdowns don’t have advantages as well.
I wont bang on about it but this was a good explanation Show Variations on the Shop Page With WooCommerce Variations Plugin. It is obviously a mature and well documented requirement.
My demo
I seem to be having trouble implementing the Product Variants. My product pages look fine without the product variant, but when I add it in and publish, I get a 404 page. Then, when I take it out the page is fine again. Anyone experience this issue or have a solve?
Some style setting within my already created add to cart button seemed to trigger this, I tried replacing my current add to cart with a default, tested it and the page worked fine after I published.
Have you tried via custom code? Sure there will be a way with JS.
Thank you for the update. Would be very useful.
Is there any way to get rid of the rounded corners?
It’s simple enough. Add this to the select box class with custom code:
-moz-appearance: none; -webkit-appearance: none;
Then change the border-radius to 0, or whatever you like and you can change the bg colour with the colour overlay option (not background colour option). Will be worth testing on other browsers, hope this helps.
2 Likes
Unfortunately not. Webflow is the platform for designers, most of us do not have programming skills (again, unfortunately).
@Bogette Unfortunately @danwilko’s suggestion is the only solution at the moment - dropdown fields are notoriously difficult to style in the wild world of CSS. The code to override the rounded corners is very simple, and should go in the <head> section of your custom code (be sure to change the select-field class to whatever you’ve named your select field):
<style>
.select-field {
-webkit-border-radius: 0px;
}
</style>
In the Boheme example from my original post, I also got rid of the default up/down arrow icon by adding some appearance: none code. The full snippet I added was:
<style>
.select-field {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0px;
}
</style>
Then I set a custom arrow icon as a background image for the select field in Webflow, no-repeat, 5px from the right side. The final result:
3 Likes
Are you still having trouble here? This sounds like a bug we tackled yesterday. Let me know if you’re still having this issue and I’ll follow up with the team.
Thanks for the detailed clarification. This is a great idea to file on the Wishlist. I’m also keen to see new options other than dropdowns as options for variant selectors, which I filed as an idea here.
1 Like
I replaced my current Add to bag with a new one without any styling and that seemed to work, then I just slowly added the styles back in to make sure it wasn’t breaking again. I’m good with this now, thank you for following up!
1 Like
I can’t add default variant to Basket.
When I click “Add to Cart” button, it brings me to dropdown menu.
I think it should work different, adding default variant to the basket immediately. That was the idea I think… ?
Awesome guys, Look forward to checking it out in depth very soon 
oh yes that is another high impact way to highlight the variants without a click. Obviously the unique url is in planning which will be good for sharing etc.My biggest wishlist item is for more wishlist votes! I am all out.
Great work @brjohnson, already done a test project yesterday and everything works fine that is so cool !!!
Quick question : Do you guys plan to change/improve the api data sent to zapier before launch ? They are a lot of fun zaps to do but a lot of things comes in single string right now like customers info or product bought, VAT is missing etc
Thanks again
Perfect, thank you for the explanation.
1 Like
Hello, is there a way to duplicate products so I don’t have to input variations over and over again?
