E-W Posted June 5 Share Posted June 5 Anyone know how to customize the payment option buttons on digital product blocks? I'd like to separate them with different colors so it's clearer there's one highlighted. And I'd like to put a border around them/change the border color. Similar to how Squarespace shows it on their page about the digital product block (below). Here's the page I'm working on: https://www.paulinapinsky.com/writing-about-hard-things-writing-course Link to comment
Solution Lesum Posted June 5 Solution Share Posted June 5 (edited) @E-W To customize the payment option buttons on digital product blocks, you can add this code under Website > Pages > Website Tools > Custom CSS. #siteWrapper .pricing-plan-block .pricing-plan-pricing-option-button { background-color: transparent !important; border-color: #000 !important; transition: all 0.3s ease; } .pricing-plan-block .pricing-plan-pricing-option-selected { background-color: #f6f055 !important; } Edited June 5 by Lesum 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
E-W Posted June 6 Author Share Posted June 6 (edited) On 6/5/2024 at 6:27 PM, Lesum said: @E-W To customize the payment option buttons on digital product blocks, you can add this code under Website > Pages > Website Tools > Custom CSS. #siteWrapper .pricing-plan-block .pricing-plan-pricing-option-button { background-color: transparent !important; border-color: #000 !important; transition: all 0.3s ease; } .pricing-plan-block .pricing-plan-pricing-option-selected { background-color: #f6f055 !important; } Thanks @Lesum! The background color in the first section didn't work for me. It works if I get rid of that. I'm wondering if there's some way to make use of the: aria-pressed="false" and true part of the code. Do you know? Edited June 6 by E-W Link to comment
Lesum Posted June 7 Share Posted June 7 @E-W I'm not entirely sure what you meant. I'm seeing the code is changing the background color of the active/selected button, as you mentioned in your post. You can use this code to implement the 'aria-pressed="false"' option. However, it achieves the same result as the code I provided earlier. #siteWrapper .pricing-plan-block .pricing-plan-pricing-option-button[aria-pressed="false"] { background-color: #f7dde6 !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
Lesum Posted June 7 Share Posted June 7 @E-WI think the brighter yellow color might be more user-friendly for the selected button. Currently, you've set the selected button to a lighter color. 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
E-W Posted June 7 Author Share Posted June 7 12 hours ago, Lesum said: @E-WI think the brighter yellow color might be more user-friendly for the selected button. Currently, you've set the selected button to a lighter color. @Lesum I agree, that's what I was going for but this is an old site that originally came from a template and the coding is a mess! I cleaned it up and it's fixed now. Thanks for your help! Lesum 1 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