Jump to content

Help customizing Product Variant BUtton

Go to solution Solved by tuanphan,

Recommended Posts

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
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

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

image.png.c9294852408e6c664b497279d3a15838.png

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

image.png.c9294852408e6c664b497279d3a15838.png

Hi @tuanphan!! I used the code you gave me but still no change.

 

 

ERRORSQUARE.png

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.