How to Change Attribute Shape Style to Round for Color & Square for Button

  • Resolved cjgp1

    (@cjgp1)


    3 years, 7 months ago

    Hi, I would like to ask how to have a different shape style for different attributes.

    I would want to use the Round shape style for colors, while I would use square Shape style for buttons.

    If you need to know, I am also using Elementor & Astra theme.

    Is that possible? Thanks.

    • This topic was modified 3 years, 7 months ago by cjgp1.
Viewing 11 replies - 1 through 11 (of 11 total)

  • Hello,
    Thank you for your question.
    Unfortunately, this is not currently possible.
    ?But it’s a great idea. I’ll discuss this feature with my team and may add it in a future release.
    You can add the feature request here.
    But if you give us an exact product/page link then we can provide you CSS which will change the attribute shape.
    Regards

    Thread Starter cjgp1

    (@cjgp1)

    Here is the product page:

    https://infiniteconceptsph.com/product/reusable-half-gallon-stasher-bag

    If you can give me the exact CSS (& the logic behind it) I can use, that would also be great.

    Also will add the feature in the feature request.

    Hi,
    Thank you for the link though.
    Can you please specify which shape you want to implement on which attribute?
    With Regards

    Thread Starter cjgp1

    (@cjgp1)

    Preferrably all product pages. I am in the middle of doing some modifications, but all product pages will follow a similar structure.

    Sure, let us know whenever your modification will be done. And, we will try to achieve the shape by CSS only which will affect other products as well.
    Thanks.

    Thread Starter cjgp1

    (@cjgp1)

    Basically, in that page, I want the color attribute to be round, and I want the Quanitity attribute to be square. Can you share the CSS with me? Similar with the rest of the product pages. Thanks!

    Hi,
    Please add the below CSS code and it will make the colours only round and the quantity is already is in the square shape.

    li.variable-item.color-variable-item {
    border-radius: 50% !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).color-variable-item .variable-item-span-color,.woo-variation-swatches.wvs-style-squared .variable-items-wrapper .variable-item.color-variable-item span:after {
    border-radius: 50% !important;
}

    Thanks

    Thread Starter cjgp1

    (@cjgp1)

    I will test this out when my schedule clears. Will let you know when this works.

    Yes, sure please test and then let us know about it.
    Thanks.

    Thread Starter cjgp1

    (@cjgp1)

    Hi, just saying that the CSS worked for what I was trying to achieve.

    Though, I hope this feature can be added into the plugin. Thanks!

    Hello,
    Glad to hear that the CSS worked.
    Yes, we will try to add your requested feature in the future release.
    However, If you found my support helpful, could you leave your valuable review here:?https://www.ads-software.com/support/plugin/woo-variation-swatches/reviews/
    Your rating keeps us inspired.
    Thanks

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to Change Attribute Shape Style to Round for Color & Square for Button’ is closed to new replies.