Hi Sviatlana,
Thanks for reaching out to us. Why you are trying to write custom CSS while you can change the style from Swatches > Style > Item Selected Styling?
Hope to hear from you soon!
Thank You
Because I cannot remove the border completely using the plugin settings. And I only need to remove the border from the attribute in the form of a button.
Hi Sviatlana,
Could you please try the below CSS and paste it here- Appearance > Customize > Additional CSS
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected {
box-shadow: 0 0 0 #000000 !important;
}
Please let me know if it works from your side. Hope to hear from you soon!
Thank You
This is not it.
But then the border around the circular attributes also disappears. And I only need it for the button and for all states (hover, select, normal). I used CSS:
.button-variable-item {box-shadow: none! important;}.
But it is overridden by the .woo-variation-swatches .variable-items-wrapper .variable-item: not (.radio-variable-item) {box-shadow: 0 0 0 1px rgba (0, 0, 0, 0.3 )! important; }.
Hi Sviatlana,
Can you please give me a screenshot? It will help me to understand.
Please use Lightshot and paste the screenshot link here.
Thank You
Hi Sviatlana,
Please use the below code and let me know-
.woo-variation-swatches .variable-items-wrapper.button-variable-wrapper .variable-item:not(.radio-variable-item){
box-shadow: none !important;
}
.woo-variation-swatches .variable-items-wrapper.button-variable-wrapper .variable-item:not(.radio-variable-item):hover, .woo-variation-swatches .variable-items-wrapper.button-variable-wrapper .variable-item:not(.radio-variable-item).selected:hover{
box-shadow: none !important;
}
Thank You
In selected and hover state, the border appears. And I don’t need it at all in any state of the button.
Hi Sviatlana,
I have updated my reply. Did you paste the full code?
Can you please give us temporary admin access to your site? We’ll try to investigate the issue for you.
You can add new users by going to Users > Add New set the user and password for us, set the role to admin, and set the info here.
And add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7
Hope to hear from you soon!
Everything is great now! Thanks!
Hi Sviatlana,
Glad to know everything is working now. You can also add the below code for the selected hover button–
.woo-variation-swatches .variable-items-wrapper.button-variable-wrapper .variable-item:not(.radio-variable-item):hover, .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected:hover {
box-shadow: none !important;
}
If you found my support helpful, my humble request to you to write your beautiful word here: https://wordpress.org/support/plugin/woo-variation-swatches/reviews/?filter=5
Your beautiful word keeps us inspired.
Thank You
Overriding internal styles
Sviatlana Buracheuskaya
Why embed internal styles in the Variation Swatches For WooCommerce Pro plugin using !important? After all, in this case, the user cannot change the CSS styles! In particular, I cannot hide the CSS display:
.woo-variation-swatches .variable-items-wrapper .variable-item: not (.radio-variable-item) {box-shadow: 0 0 0 1px rgba (0, 0 , 0, 0.3) !important;}