[MexConceptParticipant]

Hi,

We’d need to have the same css code for the wishlist button as the “add to cart” button. Could you have a look at this? the only change to the wishlist css would be:

– customizable bg & text color + hover over.
– add heart icon before the text (just as the “add to cart button”)
– to have the button on the right of the “add to cart button” http://screencast.com/t/s4LGw9fX8

thanks guys!

[MexConceptParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in!

To customize your wish list button, please try to add this css code in your child theme’s style.css, Appearance > Editor

.site a.add_to_wishlist.single_add_to_wishlist.button.alt {
  color: #ffffff;
  border-color: #ac1100;
  background-color: #ff2a13;
  margin-bottom: 0.25em;
  text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
  box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
  border-radius: 0.25em;
}

.site a.add_to_wishlist.single_add_to_wishlist.button.alt:hover {
  color: #ffffff;
  border-color: #600900;
  background-color: #ef2201;
  margin-bottom: 0.25em;
  text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
  box-shadow: 0 0.25em 0 0 #a71000,0 4px 9px rgba(0,0,0,0.75);
}

.site a.add_to_wishlist.single_add_to_wishlist.button.alt:before {
  content:"\f004";
  font-family: fontawesome;
}

It should look like this:

Please let us know if this works out for you.

[MexConceptParticipant]

Hi guys,

it works perfectly! http://screencast.com/t/6J1tMqbJ

could you just tell us how to have it next to the “add to cart” button?

thanks a million

p.d.: by the way, in some post you recommended to use Jing, it just saves so much time! huge thank for that!!

[ThaiModerator]

Hi There,

Please try following CSS:

.woocommerce .cart, .woocommerce-page .cart {
	display: inline-block;
}
.yith-wcwl-add-to-wishlist {
	display: inline-block;
	margin-left: 10px;
}

Hope it helps.

[MexConceptParticipant]

awesome, thanks!

[ThaiModerator]

You’re most welcome 🙂

[Author]

Posts