Hi Kevin,
Thanks for reaching out to us.
Do you want the round shape only for the color attribute?
If so, can you please give a product link to your site?
Hope to hear from you soon.
Thank You
https://woocommerce-555549-4382638.cloudwaysapps.com/product/monomounts-aluminium/
For the color we need the round, set at 45x45px so it matches the round products and also because for some other products there are up to a dozen colors hence round makes sense to save space when selecting.
Square/rectangle buttons is perfect for all the others. How can I make the color attribute only, as round (left image), and all other attribute buttons as square (typically 35x95px)? I can modify the square ones to whatever size by css, but not the round color one. Is there an easy workaround for this?
Hi Kevin,
Please add the following CSS at Appearance > Customize > Additional CSS
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item:not(.radio-variable-item) {
width: 45px;
height: 45px;
border-radius: 50%;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.color-variable-item .variable-item-contents{
border-radius: 50%;
overflow: hidden;
}
Please let me know if it works. Hope to hear from you soon.
Thank You
Of course. Works well. Does that mean there’s another similar css class if I want to preset the square buttons to their 35x95px size?
Hi Kevin,
I have targeted the color attribute type by adding this: .color-variable-item
You can target all the button types by adding this: .button-variable-item
Please let me know if it helps.
Thank You
shape style
Kevin Trye
I noted that for shape we have round or square as a global setting. Is it possible (perhaps through a code snippet or css) to have one attribute use the round colour and others use a square button? It just makes more sense visually for a particular project we’re on.