Change text on hover

Hello there,

hope you are doing well ??

To change on hover ‘Add to wishlist’ text, you will need to follow these steps:

– Create the following template in your active theme:

wp-content/themes/your_active_theme/woocommerce/add-to-wishlist-button.php

– Put this code inside of the file:

<?php
/**
 * Add to wishlist button template
 *
 * @author Your Inspiration Themes
 * @package YITH WooCommerce Wishlist
 * @version 2.0.8
 */

if ( ! defined( 'YITH_WCWL' ) ) {
    exit;
} // Exit if accessed directly

global $product;
?>

<a href="<?php echo esc_url( add_query_arg( 'add_to_wishlist', $product_id ) )?>" rel="nofollow" data-product-id="<?php echo $product_id ?>" data-product-type="<?php echo $product_type?>" class="<?php echo $link_classes ?>" >
    <?php echo $icon ?>
    <span><?php echo $label ?></span>
</a>
<img src="<?php echo esc_url( YITH_WCWL_URL . 'assets/images/wpspin_light.gif' ) ?>" class="ajax-loading" alt="loading" width="16" height="16" style="visibility:hidden" />

– Add the following CSS rules in Appearance -> Customize -> Additional CSS:

.yith-wcwl-add-to-wishlist .yith-wcwl-add-button:hover a.add_to_wishlist:after {
	content: 'your text';
}
.yith-wcwl-add-to-wishlist .yith-wcwl-add-button:hover a span{
	display: none;
}

You will need to change ‘your text’ for whatever you want.

Let us know.

Have a great day!

• This reply was modified 5 years, 1 month ago by YITHEMES.

Hi,

Thanks for your reply

I’ve done all the steps you have suggested, but it doesn’t seem to do the job. It seems that :”after:hover” affects the button in product listing not the one in shop.

I had a look in Chrome with Inspect and I found this html script ( https://prnt.sc/pc2l9l). I’ve changed the title with something else and it works there, but could you please tell me how can it be changed? the problem is that the title doesn’t change using loco or css codes I’ve tried. is there any way you can help me to change the title from there so when users hover over a product in the shop page the text to say ‘add to favourites’?

Thanks!

• This reply was modified 5 years, 1 month ago by madalina251.
• This reply was modified 5 years, 1 month ago by madalina251.

Hello there,

hope you are doing well and sorry for the late reply!

With the change and CSS rule we sent you, the button should change the text also on the shop page.

You can check here how when a user do the hover the text changes to ‘your text’.

Have a great day!

Hi, thanks for your reply

I’ve tried again just now, but it’s still not changed. When users hover over the heart icon, the ‘add to wishlist’ text appears. Please see print screen https://prnt.sc/pg0yzd

I want to change the text on hover, not on a button as in your print screen.

Could you please help me out with this issue?

Thanks,

Hello there,

hope you are doing well ??

Please, try to add this custom code (jquery) in the functions.php of your active theme:

if( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_enqueue_scripts' ) ){
    function yith_wcwl_enqueue_scripts()
    {

        wp_add_inline_script('jquery-yith-wcwl', 'jQuery(\'.add_to_wishlist\').attr(\'title\', \'your new title\');');
    }

    add_action('wp_enqueue_scripts', 'yith_wcwl_enqueue_scripts', 999);
}

Let us know.

Have a great day!

Hi,

Thanks for providing this code, unfortunately it doesn’t seem to work at all,nothing happens upon saving it in functions.php

Could you please provide a different solution? I really need to change the text on hover

Appreciate your help!

Hello there, any updates in regards to this issue please?

Thank you,