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:

982215062_ScreenShot2021-11-04at9_33_30PM.thumb.png.209053926c9e952e59ed46e1f0905319.png

 

To something like this:

2126273305_ScreenShot2021-11-04at9_33_57PM.thumb.png.ec9686615480d60bd3b8f5b359dc8bf0.png

 

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
  • 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() {
	
})

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.