Hover colour add to cart

[TiiPii]

Hi,

How do I change the hover color from add to cart? now its the button disappears when mouseover, because it’s white. Screen shots attached.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

To have full control over those buttons you can use this CSS to change the style, please add this to Theme Options => Custom CSS:

.woocommerce form.cart button.add_to_cart_button, #jckqv .cart .add_to_cart_button, #jckqv .cart .single_add_to_cart_button, #jckqv .quantity .qty, #jckqv .cart .yith-wcwl-add-to-wishlist a, #jckqv .quantity .qty-plus, #jckqv .quantity .qty-minus, .woocommerce .single_add_to_cart_button, .woocommerce .single_add_to_cart_button.button.alt, .woocommerce button.single_add_to_cart_button.button.alt.disabled {
    border-color: red;
    color: red;
}

.woocommerce form.cart button.add_to_cart_button:hover, #jckqv .cart .add_to_cart_button:hover, #jckqv .cart .single_add_to_cart_button:hover, #jckqv .cart .yith-wcwl-add-to-wishlist a:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button.button.alt:hover {
    border-color: blue!important;
    color: white!important;
    background: blue!important;
}

[TiiPii]

Thanks for the quick reply, unfortunately no luck yet! http://27.123.26.98/~tiipiibe/product/tiipiibed-natural-white/

thanks

[Rui Guerreiro – SUPPORT]

Hi,

You got some errors on your site.

https://www.dropbox.com/s/z6s8x1c6olunose/Screenshot%202016-10-20%2018.17.52.png?dl=0

Can you provide admin credentials to have a look?
Use the private reply.

Thanks

-Rui

[TiiPii]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

It was a syntax error in the css above the one David provided, so the code provided wasn’t executed.

I also found the css below inside the custom js option what was causing some errors, I removed it.

div.pp_default .pp_description {
  display: none!important;
}

.product .cart-overlay .shop-actions{
  display:none;
}

.product figure:hover .cart-overlay {
    opacity: 0;
}

nav .menu ul.sub-menu, li.menu-item.sf-mega-menu > ul.sub-menu > div {
    top: 600px!important;
}

-Rui

[TiiPii]

This reply has been marked as private.

[TiiPii]

This reply has been marked as private.

[David Martin – Support]

This looks like a separate issue then the topic of the thread. Please start a new thread and we will assist you there.

– David.

[TiiPii]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

ok. thanks
-Rui

[westcoastsurf]

It was a syntax error in the css above the one David provided, so the code provided wasn’t executed.

Is that code above fixed? I would like to change the button css as well.

Thank you

[Rui Guerreiro – SUPPORT]

the error was in some code of the costumer site, the code provided in this topic is fine.

-Rui

[TiiPii]

Hi,

It all works except the hover, the hover is still blue even though I changed all to black. See code below.

Thanks!

.woocommerce form.cart button.add_to_cart_button, #jckqv .cart .add_to_cart_button, #jckqv .cart .single_add_to_cart_button, #jckqv .quantity .qty, #jckqv .cart .yith-wcwl-add-to-wishlist a, #jckqv .quantity .qty-plus, #jckqv .quantity .qty-minus, .woocommerce .single_add_to_cart_button, .woocommerce .single_add_to_cart_button.button.alt, .woocommerce button.single_add_to_cart_button.button.alt.disabled {
border-color: black;
color: black;
}

.woocommerce form.cart button.add_to_cart_button:hover, #jckqv .cart .add_to_cart_button:hover, #jckqv .cart .single_add_to_cart_button:hover, #jckqv .cart .yith-wcwl-add-to-wishlist a:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .single_add_to_cart_button.button.alt:hover {
border-color: black!important;
color: white!important;
background: black!important;
}

[David Martin – Support]

Can you screenshot where you refer to?

I see this on hover: