mphdesign Posted August 28 Share Posted August 28 (edited) I'd like to reduce the width of my add-to-cart button on all product pages. They max out the width of the product box and look quite odd... I'd prefer them to be about 50%. https://www.porfiriogutierrez.com/shop Edited August 28 by mphdesign url Link to comment
Lesum Posted August 28 Share Posted August 28 @mphdesign You can try adding this code snippet under Website > Utilities > Website Tools > Custom CSS .tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart { justify-content: center !important; align-items: center !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 35% !important; } @media only screen and (max-width: 640px) { .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 50% !important; } } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
mphdesign Posted August 28 Author Share Posted August 28 Thank you - that worked! If I want to fiddle with the width, which settings do I customize? Lesum 1 Link to comment
Lesum Posted August 28 Share Posted August 28 (edited) Awesome! To adjust the width on the shop page, you can change the width "70%" inside this block of code. You've to add this block of code with the previous code. section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper { width: 70% !important; } And to adjust the width on the product page, you can change the width "35%" inside this block of code. You added this block of code already: .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 35% !important; } Edited August 29 by Lesum Updated the first block of code If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
mphdesign Posted August 28 Author Share Posted August 28 Thanks - when I add that first snippet of code above I don't see a change (even when I try other numbers other than 70%). Do I delete any of the other code you gave me? Link to comment
Lesum Posted August 29 Share Posted August 29 @mphdesign Can you try the updated code? Here's the entire version: .tweak-products-add-to-cart-button.plp-add-to-cart .products.collection-content-wrapper .plp-grid-add-to-cart { justify-content: center !important; align-items: center !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 35% !important; } section.plp-grid-add-to-cart .sqs-add-to-cart-button-wrapper { width: 70% !important; } @media only screen and (max-width: 640px) { .ProductItem-details .sqs-add-to-cart-button-wrapper { width: 50% !important; } } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
mphdesign Posted August 29 Author Share Posted August 29 Thank you so much, this worked! I really appreciate 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