CSS to change variant display

Site URL: https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc

New to SquareSpace so I'm a bit frustrated that I can't change the layout of the product block, or change the font of the variant drop down menus. If you look at a sample page (https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc) you can see the variants stick out like a sore thumb. 

1) How can I change the font to match the font on the template?
2) How can I change the layout of the variants so they are not displayed one below the other, like they are now, but in two columns? 

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

2 hours ago, Cianfrani said:

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

 

You mean like this?

Exactly like that!

21 hours ago, Cianfrani said:

Exactly like that!

 

Add to Home > Design > Custom CSS

.product-variants {
    column-count: 2;
}
#productDetails .product-variants .variant-option {
    margin-top: 0;
}

Thank you!

@Cianfrani were you able to solve this variant field location issue?

Hey everyone! 

for my site, I'm trying to make the variant boxes the same width as the text above them. is there a way to do that?

an example product page is; https://www.andthenjewelry.com/collections/beni-shoga-n8amh

thanks so much for the help!

On 3/25/2020 at 10:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

.product-variants {
    column-count: 2;
}
#productDetails .product-variants .variant-option {
    margin-top: 0;
}

 

Hey Tuan,

I'm having the inverse problem. I adjusted the size of my product-variant dropdown menus with the code shown below and now when I go to my site, two dropdown menus end up beside each other on the same line. I tried to set the column count to 1 (and even 0) and it didn't solve the issue. Any tips? I'd like to be able to set the width of the boxes to 250px and have them on separate lines.

Thanks!

Existing code:

.variant-option {
  width: 250px !important;
}
.product-variants {
    column-count: 1;
}

Played around with it some more and figured it out myself:

.product-variants {
width: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; 
}

On 3/25/2020 at 10:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

.product-variants {
    column-count: 2;
}
#productDetails .product-variants .variant-option {
    margin-top: 0;
}

 

Hi Tuanphan, this is not working for me, can you possibly help? I am using the swatch plugin so maybe this is the issue?

Trying to get the colour and size variants all on one line with add to cart button below or if that is not possible, if I could reduce the spacing between price, variants and add to cart button that would help too.

Here is one product page for an example:https://kokorozenwear.com/loungewear/p/retro-tshirt

Attached is what I would like it to look like ideally:) Thanks so much in advance

On 10/6/2021 at 9:00 PM, Daniellerose said:

Hi Tuanphan, this is not working for me, can you possibly help? I am using the swatch plugin so maybe this is the issue?

Trying to get the colour and size variants all on one line with add to cart button below or if that is not possible, if I could reduce the spacing between price, variants and add to cart button that would help too.

Here is one product page for an example:https://kokorozenwear.com/loungewear/p/retro-tshirt

Attached is what I would like it to look like ideally:) Thanks so much in advance

Add to Design > Custom CSS

.variant-option {
    float: left;
}

Thank you so much!

On 10/8/2021 at 6:24 AM, tuanphan said:

Add to Design > Custom CSS

.variant-option {
    float: left;
}

 

Hi! Can someone help me style my product page buttons? This is what it currently looks like. Ideally I would like for size and quantity to look like add to cart! @tuanphan 🙏

On 2/17/2023 at 10:38 PM, malug said:

Hi! Can someone help me style my product page buttons? This is what it currently looks like. Ideally I would like for size and quantity to look like add to cart! @tuanphan 🙏

 

 

Can you share link to this product? We can help easier

Thanks! Here is a link to the product, i would like all products to be the same. Looking to customize! https://www.malugarcia.com/shop/p/tennis

On 2/23/2023 at 1:42 AM, malug said:

Thanks! Here is a link to the product, i would like all products to be the same. Looking to customize! https://www.malugarcia.com/shop/p/tennis

 

It looks like you changed add to cart style. Do you still need help?

yes! i would like to change the size and field styles (rounded corners vs square)

Add to Design > Custom CSS

div.sqs-add-to-cart-button {
    border-radius: 20px !important;
}

Hello! Can someone help me change the variant options to display on two different lines? Currently they're on the same line. https://www.lukelampco.com/test-variant-products/extended-length-tracer-bar-2

https://www.lukelampco.com/test-variant-products/extended-length-tracer-bar-2

4 hours ago, MMayfield said:

Hello! Can someone help me change the variant options to display on two different lines? Currently they're on the same line. https://www.lukelampco.com/test-variant-products/extended-length-tracer-bar-2

 

https://www.lukelampco.com/test-variant-products/extended-length-tracer-bar-2

Add to Design > Custom CSS

/* Variant dropdown */
.product-variants {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Variant dropdown */
.product-variants {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}

 

That worked perfectly, thank you Tuanphan! Is there a way to increase the padding in between the two lines?

18 hours ago, MMayfield said:

That worked perfectly, thank you Tuanphan! Is there a way to increase the padding in between the two lines?

Use this code

.product-variants {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
.product-variants>div {
	margin-bottom: 40px !important;
}

On 7/28/2023 at 4:23 AM, tuanphan said:

Use this code

.product-variants {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
}
.product-variants>div {
	margin-bottom: 40px !important;
}

 

Thanks so much!!