Select size button shape on Avenue 7.0 product page

Hi,

Would anybody know how to have the "Select Size" button on Avenue template (7.0) product page look like the add to cart button (as in example image)?

Thanks for any help,

Hi,

Can you share link to product on your site? We can check variant size easier.

Hi,

Thank you,

Here is an example:

https://www.myriamrousseauart.com/baby-animals-1/panda-iii

I have tried this code and it helped, but the corners were still rounded:

.variant-select-wrapper select {
    padding:12px; width:43%
}

Thanks again,

On 6/26/2022 at 8:07 PM, mrart said:

Hi,

Thank you,

Here is an example:

https://www.myriamrousseauart.com/baby-animals-1/panda-iii

I have tried this code and it helped, but the corners were still rounded:

.variant-select-wrapper select {
    padding:12px; width:43%
}

Thanks again,

The url doesn't exist. Can you check it again?

Hi,

Sorry about that, here is an updated link:

https://www.myriamrousseauart.com/new-products/lion-iii

Thanks,

Add to Design > Custom CSS

#productDetails .product-variants .variant-option select {
    padding: 10px;
    width: 100%;
    border-radius: 0 !important;
}

Hi again,

Thank you so much, this is working perfectly on mobile, I've gotten the widths of the buttons to be equal as well, but the widths don't remain equal on desktop, I tried adding "!important;" to the width input, but it didn't help:

#productDetails .product-variants .variant-option select {
    padding: 15px;
    width: 197px !important;
    border-radius: 0 !important;
}

Would you know of something that can help to keep the same width of buttons on desktop as well?

Thank you again,

On 7/2/2022 at 9:29 PM, mrart said:

 

Hi again,

Thank you so much, this is working perfectly on mobile, I've gotten the widths of the buttons to be equal as well, but the widths don't remain equal on desktop, I tried adding "!important;" to the width input, but it didn't help:

#productDetails .product-variants .variant-option select {
    padding: 15px;
    width: 197px !important;
    border-radius: 0 !important;
}

Would you know of something that can help to keep the same width of buttons on desktop as well?

Thank you again,

Can you send all current code in Custom CSS? I guess some code in wrong place

Hi,

Thank you, it now seems to be working on desktop, I think the previous info must have been cached.

Would you know how to have the border of the select size box on desktop (mobile is fine) appear as one colour? I believe it presently has the "raised" border.

Also, would you know if it's possible to change the background colour of the select size box to white?

Thank you again,

7 hours ago, mrart said:

 

Hi,

Thank you, it now seems to be working on desktop, I think the previous info must have been cached.

Would you know how to have the border of the select size box on desktop (mobile is fine) appear as one colour? I believe it presently has the "raised" border.

Also, would you know if it's possible to change the background colour of the select size box to white?

Thank you again,

Add this CSS

#productDetails .product-variants .variant-option select {
    border: 2px solid red !important;
    background-color: white;
}

Hi,

Thank you very much this works perfectly.

Is there also a way to choose the font within the button?

Is it also possible to change what the button says, in this case could it say " 12 x 12" " rather than " Select Size" ?

Thank you again,

14 hours ago, mrart said:

 

Hi,

Thank you very much this works perfectly.

Is there also a way to choose the font within the button?

Is it also possible to change what the button says, in this case could it say " 12 x 12" " rather than " Select Size" ?

Thank you again,

Use this code

#productDetails .product-variants .variant-option select {
    border: 2px solid #fff !important;
    font-family: monospace;
    background-color: lightgrey;
}

To rename text, I Have no idea, However I remember on forum, there has some topics, you try searching.

Hi,

Thank you, I haven't been able to find the rename text option anywhere, but this code worked perfectly for the font.

Thank you very much for all of your help!