Like button position

[kk305]

Hi, I’ve noticed that the number of product variations affects the placement of the like button. Can this be fixed?

[Harry]

Hi,

Thank you for report the issue.

You can fix by add custom css in Claue > Theme Option > General Layout > Custom CSS

form.cart {
width: 100%;
}
.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
right: 0;
}
.single_add_to_cart_button {
width: calc(100% – 175px);
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[kk305]

Hi, thanks for your reply. Now the like button is far, like in the second picture on both products. I would like to move it closer to add to cart button. I tried tweaking the code a bit but I’m not a pro so, I’m not sure if I did it the right way.

form.cart {
width: 100%;
}
.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
left: 300px;
}
.single_add_to_cart_button {
width: calc(100% – 175px);
}

I changed right:0 to left:300. Looks ok on desktop but still a bit far on mobile.

 

[Harry]

Hi,

That is good idea.

You need remove prev code and add only the code below

.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
left: 300px;
}
@media only screen and (max-width: 800px) {
.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
left: auto;
right: 0;
}
}

Best regards
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[kk305]

Thanks Harry, this looks good on desktop but still a little off on my s7. I changed right: 0; to right: 50; and now it looks perfect.

[Harry]

Glad to hear you solve your issue. Feel free contact us again if you need more help.

Have a nice day!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[kk305]

Hey Harry, looks like those settings gave different results in different mobile browsers. I tweaked it a little and this one seems to work perfectly across different browsers.

.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
left: 300px;
}
@media only screen and (max-width: 800px) {
.cart .yith-wcwl-add-to-wishlist,
.cart.variations_form .yith-wcwl-add-to-wishlist {
left: 270px;
}
}

[Author]

Posts