Lily278 Posted November 11, 2021 Share Posted November 11, 2021 Hi, I would like to change the style of the products variants selection from this: to this: What custom CSS could I use? Thanks in advance Link to comment
tuanphan Posted November 12, 2021 Share Posted November 12, 2021 On 11/11/2021 at 7:40 AM, Lily278 said: Hi, I would like to change the style of the products variants selection from this: to this: What custom CSS could I use? Thanks in advance Can you share link to a variant product? We can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Lily278 Posted November 13, 2021 Author Share Posted November 13, 2021 https://www.leapoesie.com/jewelry/p/bold Thanks in advance! Beyondspace 1 Link to comment
tuanphan Posted November 15, 2021 Share Posted November 15, 2021 On 11/14/2021 at 3:08 AM, Lily278 said: https://www.leapoesie.com/jewelry/p/bold Thanks in advance! Add to Design > Custom CSS .product-details .variant-option select { border: none !important; border-bottom: 1px solid black !important; } .product-details .variant-select-wrapper[data-text] { padding-left: 0 !important; padding-bottom: 5px !important; } .ProductItem .ProductItem-details .variant-select-wrapper:after { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Lily278 Posted November 15, 2021 Author Share Posted November 15, 2021 20 hours ago, tuanphan said: Add to Design > Custom CSS .product-details .variant-option select { border: none !important; border-bottom: 1px solid black !important; } .product-details .variant-select-wrapper[data-text] { padding-left: 0 !important; padding-bottom: 5px !important; } .ProductItem .ProductItem-details .variant-select-wrapper:after { display: none; } Thank you so much!! The result is very close to what I wanted. Do you know how to ensure that the two products variants selections are side by side and not one below the other? I would also like the text to be capitalized, is that possible? Many thanks in advance Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 On 11/16/2021 at 6:47 AM, Lily278 said: Thank you so much!! The result is very close to what I wanted. Do you know how to ensure that the two products variants selections are side by side and not one below the other? I would also like the text to be capitalized, is that possible? Many thanks in advance Capitalized or uppercase?? Add to Design > Custom CSS @media screen and (min-width:768px) { .ProductItem-details .product-variants { display: flex; justify-content: space-between; width: 90%; } .variant-option { margin-right: 20px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Lily278 Posted November 18, 2021 Author Share Posted November 18, 2021 12 hours ago, tuanphan said: Capitalized or uppercase?? Add to Design > Custom CSS @media screen and (min-width:768px) { .ProductItem-details .product-variants { display: flex; justify-content: space-between; width: 90%; } .variant-option { margin-right: 20px; } } Thank you so much! It's perfect on desktop. Do you know how to have the two products variants selections side by side on mobile too? Yes uppercase letters 🙂 Link to comment
tuanphan Posted November 20, 2021 Share Posted November 20, 2021 On 11/18/2021 at 10:55 PM, Lily278 said: Thank you so much! It's perfect on desktop. Do you know how to have the two products variants selections side by side on mobile too? Yes uppercase letters 🙂 change 768px to 1px Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Lily278 Posted November 24, 2021 Author Share Posted November 24, 2021 On 11/19/2021 at 11:09 PM, tuanphan said: change 768px to 1px Thank you so much! Do you know how to change to uppercase letters ? Link to comment
tuanphan Posted November 27, 2021 Share Posted November 27, 2021 On 11/25/2021 at 5:29 AM, Lily278 said: Thank you so much! Do you know how to change to uppercase letters ? try this @media screen and (min-width:768px) { .ProductItem-details .product-variants { display: flex; justify-content: space-between; width: 90%; } .variant-option { margin-right: 20px; } .ProductItem-details .product-variants * { text-transform: uppercase !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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