Add and Remove from wishlist – Same "heart" button

Hi guys,

Here I am with a little tutorial for you 🙂

1. The first step is to overwrite wishlist default template add-to-wishlist.php inside your theme folders

In order to obtain this goal simply copy wp-content/plugins/yith-woocommerce-wishlist/tempaltes/add-to-wishlist.php file, and paste it inside wp-content/themes/your-theme/woocommerce/ folder (if it doesn’t exists, you can create it 🙂 )

2. Change yith-wcwl-wishlistaddedbrowse and yith-wcwl-wishlistexistsbrowse inside your brand new file, to match this

<div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
	        <a class="remove_from_wishlist_custom button alt" href="#" rel="nofollow" data-product-id="<?php echo $product_id ?>">
	            <?php _e( 'Remove from wishlist', 'yith-wcwl' ) ?>
	        </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" />
	    </div>

	    <div class="yith-wcwl-wishlistexistsbrowse <?php echo ( $exists && ! $available_multi_wishlist ) ? 'show' : 'hide' ?>" style="display:<?php echo ( $exists && ! $available_multi_wishlist ) ? 'block' : 'none' ?>">
	        <a class="remove_from_wishlist_custom button alt" href="#" rel="nofollow" data-product-id="<?php echo $product_id ?>">
		        <?php _e( 'Remove from wishlist', 'yith-wcwl' ) ?>
	        </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" />
	    </div>

3. Now we’ll need some js magic 🙂
The easiset way to add some js to your project, and make it work, is to overwrite default plugin js.

So, once again, copy wp-content/plugins/yith-woocommerce-wishlist/assets/js/unminified/jquery.yith-wcwl.js inside wp-content/themes/your-theme/woocommerce/, renaming file to wishlist.js

4. Now we can add code.

First of all, click handler: add the following code at around line 31 of wishlist.js

t.on( 'click', '.remove_from_wishlist_custom', function( ev ){
            var t = $( this );

            ev.preventDefault();

            remove_from_wishlist_custom(t);

            return false;
        } );

5. And finally, remove_from_wishlist_custom function; you can add it, within other functions, at around line 380 (after last change)

function remove_from_wishlist_custom( el ){
        var product_id = el.data( 'product-id' ),
            el_wrap = $( '.add-to-wishlist-' + product_id ),
            msg = $( '#yith-wcwl-popup-message' );

        $.ajax({
            beforeSend: function(){
                el.siblings( '.ajax-loading' ).css( 'visibility', 'visible' );
            },
            complete: function(){
                el.siblings( '.ajax-loading' ).css( 'visibility', 'hidden' );
            },
            data: {
                action: yith_wcwl_l10n.actions.remove_from_wishlist_action,
                remove_from_wishlist: product_id
            },
            success: function(){
                $( '#yith-wcwl-message' ).html( 'Product removed' );
                msg.css( 'margin-left', '-' + $( msg ).width() + 'px' ).fadeIn();
                window.setTimeout( function() {
                    msg.fadeOut();
                }, 2000 );

                el_wrap.find( '.yith-wcwl-add-button' ).show().removeClass('hide').addClass('show');
                el_wrap.find( '.yith-wcwl-wishlistexistsbrowse').hide().removeClass('show').addClass('hide').find('a');
                el_wrap.find( '.yith-wcwl-wishlistaddedbrowse' ).hide().removeClass('show').addClass('hide').find('a');

                $('body').trigger('removed_from_wishlist');
            },
            method: 'POST',
            url: yith_wcwl_l10n.ajax_url
        });
    }

And that’s all, folks: this should do the trick 🙂
Can you please check this solutoin and let me know if it works for you?
Have a nice day