Jump to content

Digital Product Block Payment Plan Button Border Color

Go to solution Solved by Lesum,

Recommended Posts

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

 

 

Screenshot 2024-06-05 at 6.03.18 PM.png

Link to comment
  • Solution
Posted (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 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
Posted (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?

Screenshot 2024-06-06 at 7.55.38 PM.png

Edited by E-W
Link to comment

@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
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.