Help customizing Product Variant BUtton

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

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 */
}

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.

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>

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

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! 😄