Add to Cart button styling

[James]

How do I get the “Add to Cart” button to look more like my theme? I tried to edit css but didn’t work. Maybe I was editing wrong thing?

http://sportclinic.clover-enterprises.com/event/practical-applications-in-sports-medicine/

[Courtney]

Hello James

Can you add the following code to your child theme, or in Appearance » Customize » Additional CSS?


#tribe-events .button {background:linear-gradient(180deg,#3065b5,#173460) }


Let me know if that works for you.

Thanks
Courtney 🙂

[James]

Thanks!!

Is there an easy way to get the Add to Cart button to look like the “Learn More” button on this page?
http://sportclinic.clover-enterprises.com/concussions/

[Courtney]

Hi James

You can certainly customize the CSS of the button to match. A few tips on styling that include:

1. Start by modifying what you can at Appearance » Customize » The Events Calendar.
2. Typically, don’t change the theme or plugin’s css files, they will be overwritten on updates. To avoid this, follow the steps outlined in Themer’s Guide
3. Use overriding CSS files, or add CSS to your site using Appearance » Customize » Additional CSS.
4. Use !important before a semicolon to override every css rule. It’s a brute force method, but works for quick fixes.
5. Please check out this Customizing WordPress #2 – Using Chrome Developers Tools YouTube video in addition to our Using Chrome Developer Tools tutorial on how to easily make changes using CSS.

I’d suggest starting with the Chrome Developer Tools to inspect the button that you like.

Thanks
Courtney 🙂

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts