wishlist icon

[tonywong]

Hi, i need 2 things. one to change the colour of the wishlist’s background colour, currently purple. Also, when i hover over the product image, the wishlist icon & background colour is not full padded. please see attached.

[Kyle – SUPPORT]

Hi

You seem to have lost some of the themes styling, please can I see your link to check?

– Kyle

[tonywong]

http://honk.sg/product/robert-glasper-experiment-black-radio-2/

i have fixed the padding with custom css. just to change the colour

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.add_to_wishlist:hover {
  background: #444444!important;
}

– Kyle

[tonywong]

thanks. but how can i change the default purple colour to brown?

[tonywong]

for the listing page. i mean.

[Kyle – SUPPORT]

Add this:

.woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt {
  background: transparent;
}

– Kyle

[tonywong]

hi, still having problem with padding on two area. the listing & the product page. please see attached.

[Kyle – SUPPORT]

Add this:

.woocommerce form.cart .yith-wcwl-add-to-wishlist a {
  padding: 13px 13px;
}

– Kyle

[tonywong]

tested it on mobile and padding still not perfect. see attached for mobile shot.

this are the custom css in action

li.product figcaption .shop-actions {
min-height: 33px;
}

li.product figcaption .shop-actions > a {
padding: 7px 14px;
}
.add_to_wishlist:hover {
background: #444444!important;
}
.woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt {
background: transparent;
}
.woocommerce form.cart .yith-wcwl-add-to-wishlist a {
padding: 9.2px 9.2px;

[Swift Ideas – Ed]

Hi @tonywong,

You shouldn’t need any of this CSS. What version of the theme/WooCommerce are you using?

– Ed

[tonywong]

theme is 1.7.3 & woocommerce is 2.1.9

[Swift Ideas – Ed]

@tonywong – very odd. I think it must be something to do with your minification. Can you please try commenting out the custom css you’ve been given, and disabling that to see if it shows correctly?

– Ed

[tonywong]

hi, i have removed this css:

li.product figcaption .shop-actions > a {
padding: 7px 14px;
}

=>>>>> the outcome is the first attachment

remove css:
.add_to_wishlist:hover {
background: #444444!important;
}
.woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt {
background: transparent;
}

>>>>outcome is 2nd attachment

[Swift Ideas – Ed]

Sorry it took a while to get back to you, this code should be all you need:

.yith-wcwl-add-to-wishlist a.add_to_wishlist {
line-height: 22px;
}

Let me know.

– Ed