Wishlist button doesn’t look pretty after update

Hi there,
thanks for contacting us!

Please share with us your site URL in order to check it the issue. Probably with CSS code we fix it.

Let us know.

Best regards.

hi, that’s shabbytiger.nl

https://shabbytiger.nl/product/parel-strik-veters/

at the moment i have the old version, because, as i explained, the new version isn’t making the button looking pretty

Hi there.

We need to see the HTML of your site with our plugin update in order to make a CSS fix. If you don’t update our plugin in your live site, you can do it in a staging site.

Could you check it, please?

Best regards.

Hi, i’ve updated the plugin. Can you please check it? https://shabbytiger.nl/product/parel-strik-veters/ and sent me CSS to fix it? ?? Thanks!

Hello there.

It seems that our style are not loading in your site. Please add the following code in the functions.php file of your active theme and check if it solves the problem:

if (!function_exists('yith_wcwl_enqueue_back_required_assets')) {
    function yith_wcwl_enqueue_back_required_assets()
    {
        $suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '' : '.min';
        $version = defined('WC_VERSION') ? WC_VERSION : '';

        wp_enqueue_style('woocommerce_prettyPhoto_css', plugins_url('assets/css/prettyPhoto.css', WC_PLUGIN_FILE), array(), $version);
        wp_enqueue_script('prettyPhoto', plugins_url('assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', WC_PLUGIN_FILE), array('jquery'), '3.1.6');
        wp_enqueue_script('prettyPhoto-init', plugins_url('assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', WC_PLUGIN_FILE), array('jquery'), $version);

        wp_enqueue_style('yith-wcwl-main', YITH_WCWL_URL . 'assets/css/style.css', array('jquery-selectBox'));
    }
    add_action('wp_enqueue_scripts', 'yith_wcwl_enqueue_back_required_assets', 100);
}

If you have cache, please try cleaning it.

If it doesn’t work, please try adding the following CSS in Appearance > Customize > Additional CSS:

body.single-product .summary #yith-wcwl-icon-heart-outline {
  width: 30px !important;
}
body.single-product .summary a.add_to_wishlist {
  display: inline-flex !important;
  align-items: center !important;
}

Could you check it, please?

Best regards.

Hi, the CSS worked a bit. But the button is still on the same place as it was. I’ve marked it red where it needs to be. https://ibb.co/wZkQbVm

Hi there.

Please replace the previous CSS with this new one:

body.single-product .summary #yith-wcwl-icon-heart-outline {
  width: 30px !important;
}
body.single-product .summary a.add_to_wishlist {
  display: inline-flex !important;
  align-items: baseline !important;
}

Could you check it, please?

Best regards.

when i replace it with your new CSS, nothing changes except the text isn’t in the middle anymore, but like before.

Hello there.

I see that you still have the old CSS instead of the last one provided. I tested it again from the browser console and it works fine.

Anyway, try this code (you should keep the one you already have):

.summary a.add_to_wishlist {
  align-self: baseline !important;
}

Could you check it, please?

Best regards.

thanks, that worked. When you click on the ‘add to wishlist’ button the text appears, but it doesn’t look pretty and there’s a random black heart. Can that be aligned the same as the button?

https://ibb.co/F7zy3cK

Hello there.

Please try with this CSS:

.yith-wcwl-wishlistaddedbrowse {
    background: var(--color-add-to-wishlist-background, #333) !important;
    font-weight: bold !important;
}

Let us know.

Best regards.

hi, yes that worked. Is it also possible to line ‘bekijk je wishlist’ left, just as the text above. https://ibb.co/kGRtxmV

And is it possible to add a link to the word ‘login’? This link https://shabbytiger.nl/mijn-account-2/

Hi there.

Try with this CSS:

.yith-wcwl-wishlistaddedbrowse a {
    display: block !important;
    text-align: right !important;
}

Regarding the text, how did you add it? Because that text does not exist within our plugin’s strings.

Please let us know.

Best regards.

hi, i’ve added the css but nothing changed. I’ve added the text through Loco translate

Hi there.

I see that the CSS is applied correctly:

https://ibb.co/XsnVYkn

Regarding the text, you can try with the following text in Loco Translate:

Het product is toegevoegd. <a >Log in</a> of maak een account aan om je wishlist op te slaan.

Let us know.

Best regards.