Jump to content

Change the style of the product-variant (combobox) in the product block

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.xystema.com/

I am working on changing the style of the product-variant (combobox) in the product block from the template design to something I want, as described below:

From the template design:



To something like this:



I can only do the above design in the chrome inspector with this code:

element.style {
 text-transform: none;
 height: 35;
 width: 185;
 margin: auto;
 border: 1 solid #d5d5d5;
 border-radius: 0.4;
 background-color: #209D50;
 color: white;
 text-align: center;
I am having difficulty translating this in the CSS Squarespace. I am not able to get the target block elements like  the one I tried the below. There must be something missing in the block id elements.
#block-yui_3_17_2_1_1635989652851_13463 .variant-option .variant-select-wrapper .select {
    text-transform: none;
    height: 35px;
    width: 185px;
    margin: auto;
    border: 1px solid #d5d5d5;
    border-radius: 0.4em;
    background-color: #209D50;
    color: white;
    text-align: center;


I will appreciate any help here.
If you want to look at my website, here is the password:
password: 061298
I have already removed my codes.
Link to comment
  • Replies 2
  • Views 562
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
50 minutes ago, Ciodensky said:

Hi @tuanphan, I will appreciate much if you can look into this. Many thanks.

You can add this code to listen the change event

$(document).on("change", ".variant-select-wrapper > select", function() {


BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


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.