ECZ Posted March 8 Share Posted March 8 Hi! I’m trying to customize my product variant buttons with the following code, I’m pretty sure it was working before but now it doesn’t and I’m not able to figure it out why. On the other hand, I’m trying also to move the Add to Cart button next to the quantity one. Site: https://icosahedron-shark-ltdr.squarespace.com/collection/p/raleigh-suit Password: goodmorning /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: gray!important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ border-radius: 3rem !important; /* change the button shape */ } Thanks in advance! -E Link to comment
tuanphan Posted March 13 Share Posted March 13 Use this CSS code label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ECZ Posted March 13 Author Share Posted March 13 7 hours ago, tuanphan said: Use this CSS code label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } Hi @tuanphan!! I used the code you gave me but still no change. Link to comment
tuanphan Posted March 15 Share Posted March 15 I think you have wrong code somewhere You can use this new code to Website > Website Tools > Code Injection > Header <style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ECZ Posted March 15 Author Share Posted March 15 9 hours ago, tuanphan said: I think you have wrong code somewhere You can use this new code to Website > Website Tools > Code Injection > Header <style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } </style> Thank you! @tuanphan it finally worked! I dont want to bother you more but how can I make them stay gray when selected? Thanks in advance and of course for the working code!! -Ernesto Link to comment
Solution tuanphan Posted March 17 Solution Share Posted March 17 On 3/16/2024 at 12:44 AM, ECZ said: Thank you! @tuanphan it finally worked! I dont want to bother you more but how can I make them stay gray when selected? Thanks in advance and of course for the working code!! -Ernesto Use this new code <style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: #fff !important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ /* change the button shape */ } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ECZ Posted March 17 Author Share Posted March 17 12 hours ago, tuanphan said: Use this new code <style> label.sqs-button-element--secondary { background: white!important; /* change the button background color */ border: 1px solid black!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: .5rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ color: black!important; } label.sqs-button-element--secondary:hover { background:gray!important; /* change the button background color */ color: white!important; /* change the font color */ } input[type="radio"]:checked+label { background: gray!important;/* change the button background color */ color: #fff !important;/* change the button font color */ border: 1px solid white!important; /* change the button border */ /* change the button shape */ } </style> Thanks for all your help! 😄 tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment