Add to Cart Button on event page

[tremblayly]

Hi,
How do I change the hover color of the Add to Cart button on the events page? I tried several different CSS styling and I was successful in making the button color work on the Tickets page, but not on the event page itself.
Here’s the link to one of the event that has a ADD TO CART button. You will have to login with username: KFT and p/w: KFTgo to view the page.
http://kelownafuturestennis.com/event/kft-itf-pro-circuit-weekly-pass
Thanks,
Lyse

[Barry]

You mean the grey appearance on the product page is your customization? Where did you add the CSS to make that happen?

[tremblayly]

Hi Barry,
The grey comes with WooCommerce, however I changed the hover color from their hover purple to my green. Here’s the grey from WooCommerce CSS which I would like as initial color:

a.button, a.edit, .woocommerce-page .nav-next a, .woocommerce-page .nav-previous a, button.button, input.button, #respond input#submit, #content input.button, #wp-submit, .sidebar #searchsubmit, ul.products .add_to_cart_button, .actions .button, .shipping-calculator-form .button, #review_form #respond .form-submit input {
background-color: #F7F6F7;
background-image: linear-gradient(to bottom, #F7F6F7, #DFDBDF);
border: 1px solid #C7C0C7;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.075) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.1) !important;
color: #5E5E5E !important;
cursor: pointer;
font-family: inherit;
font-size: 13px;
font-weight: bold;
height: auto;
left: auto;
line-height: 1em;
margin: 0;
overflow: visible;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

Here’s the three CSS customization that I had to customized to get my green hover color replacing the WooCommerce purple:
a.button:hover, ul.products .add_to_cart_button:hover, a.edit:hover, .woocommerce-page .nav-next a:hover, .woocommerce-page .nav-previous a:hover, a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, #content input.button.alt, .actions .checkout-button {
background-color: #28360c!important;
background-image: linear-gradient(to bottom, #24913c, #28360c)!important;
border-color: #28360c!important;
border-radius: 2px 2px 2px 2px !important;
color: #FFFFFF !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
}
a.button.alt:hover, button.button.alt:hover, input.button.alt:hover, input#submit.alt:hover, input.button.alt:hover {
background-color: #28360c!important;
background-image: linear-gradient(to bottom, #AD74A2, #864F7B) !important;
}

Hope this can help….
Lyse

[Barry]

This code won’t achieve the exact style you are after, but you can test if it works (it should) by placing it at the bottom of your custom events.css file (if you haven’t already set this up, please see our themer’s guide and template overrides tutorial).

You can then use those same selectors as a framework for your own preferred style.

[Author]

Posts