mrart Posted June 24, 2022 Share Posted June 24, 2022 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, Link to comment
tuanphan Posted June 26, 2022 Share Posted June 26, 2022 Hi, Can you share link to product on your site? We can check variant size easier. 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
mrart Posted June 26, 2022 Author Share Posted June 26, 2022 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, Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 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? 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
mrart Posted July 1, 2022 Author Share Posted July 1, 2022 Hi, Sorry about that, here is an updated link: https://www.myriamrousseauart.com/new-products/lion-iii Thanks, Link to comment
tuanphan Posted July 2, 2022 Share Posted July 2, 2022 Add to Design > Custom CSS #productDetails .product-variants .variant-option select { padding: 10px; width: 100%; border-radius: 0 !important; } 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
mrart Posted July 2, 2022 Author Share Posted July 2, 2022 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, Link to comment
tuanphan Posted July 4, 2022 Share Posted July 4, 2022 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 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
mrart Posted July 5, 2022 Author Share Posted July 5, 2022 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, Link to comment
tuanphan Posted July 6, 2022 Share Posted July 6, 2022 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; } 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
mrart Posted July 7, 2022 Author Share Posted July 7, 2022 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, Link to comment
tuanphan Posted July 8, 2022 Share Posted July 8, 2022 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. 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
mrart Posted July 11, 2022 Author Share Posted July 11, 2022 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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment