Add to Wishlist Icon

[fleuraw]

Hi Swiftideas team,

I need your help on a couple of issues which I am unable to solve on my own.

Question 1:

How can I customize the “Add to shopping bag” button on the product page? I want it the button with white background, black text and 2px black solid border. I have made the changes in CSS but it doesn’t seem to change anything.

Please refer to the codes below.

.woocommerce form.cart button.single_add_to_cart_button {
	background: #ffffff;
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: none;
	height: 30px;
	padding: 0 15px;
	float: left;
	font-weight: normal!important;
	outline: 0!important;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}
.woocommerce form.cart button.single_add_to_cart_button:active {
	top: 0!important;
}
.woocommerce form.cart button.single_add_to_cart_button i {
	margin-right: 10px;
	font-size: 10px;
	vertical-align: 1px;
}

Question 2:

I want to reduce the height of the “Add to shopping bag” and the add to wishlist “star button”. The “star button” looks fine on its own, but after clicking on it to add the item to wishlist, the “star button” turns into a “tick button” with the original height.

May I know how I can fix this?

Looking forward to hear from your team. Thank you!

[Mohammad – SUPPORT]

Hi,
Please provide me product page url to check and find the exact css selector.
Thanks
Mohammad

[fleuraw]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.woocommerce form.cart .yith-wcwl-add-to-wishlist a {
  height: auto!important;
}

– Kyle

[fleuraw]

Hi Kyle,

Thank you for your solution, the problem in Question 2 is fixed!

Could you help me with the other question as well? Please see below:

How can I customize the “Add to shopping bag” button on the product page? I want it the button with white background, black text and 2px black solid border. I have made the changes in CSS but it doesn’t seem to change anything.

Please refer to the codes below.

.woocommerce form.cart button.single_add_to_cart_button {
	background: #ffffff;
	border: 2px solid #000000;
	border-radius: 0;
	box-shadow: none;
	height: 30px;
	padding: 0 15px;
	float: left;
	font-weight: normal!important;
	outline: 0!important;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:0.5px;
}
.woocommerce form.cart button.single_add_to_cart_button:active {
	top: 0!important;
}
.woocommerce form.cart button.single_add_to_cart_button i {
	margin-right: 10px;
	font-size: 10px;
	vertical-align: 1px;
}

Thank you!

[Rui Guerreiro – SUPPORT]

Hi,

Regarding 1) try the code below

.woocommerce form.cart button.single_add_to_cart_button, .woocommerce p.cart a.single_add_to_cart_button, ul.products li.product a.quick-view-button {
  background: #FFFFFF!important;
  color: #000000!important;
}

-Rui

[fleuraw]

Hi Rui,

Thank you for your help. Unfortunately the code did not work. Is there another code I can try?

Thank you!

[Rui Guerreiro – SUPPORT]

Hi,

It worked for me when inspecting the page in the browser. Can you provide admin access so I can check for a solution? It’s Faster that way.

-Rui

[fleuraw]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Check again the product page.

-Rui

[fleuraw]

Hi Rui,

Thank you so much for your help!

For the add to wishlist “star button”, I would like it to have the 2px black border at the top, right and bottom, such that it looks joined with the “add to shopping bag” button.

I would also like for the buttons to have a hover effect, such that when each button is hovered, the button turns to one with black background and white text / icon.

Will you be able to help me with the above? Otherwise, may I know where I can make the above edits?

Thank you!

[Mohammad – SUPPORT]

Hi,
You have version 1.71 installed. Update to 2.18.
Thanks
Mohammad

[fleuraw]

Hi Mohammad,

I have previously tried to update to the latest version of the theme, but it messes up the website.

Is there a way to edit the “Add to Shopping Bag” and the wishlist “star button” like mentioned above, without updating the theme?

Thank you!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.woocommerce form.cart button.single_add_to_cart_button:hover {
    background: none repeat scroll 0% 0% #000 !important;
    color: #fff !important;
}

.yith-wcwl-add-button > a:hover i{
color:#fff !important;
}

Thanks
Mohammad

Thanks
Mohammad

[fleuraw]

Hi Mohammad,

Thank you for your help! The code worked for me 🙂