Add and Remove from wishlist – Same "heart" button

Without redirect…

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

Sorry, but this tutorial is not working.

Hi @fourgood

Could you please explain me what problems are you finding with this tutorial, or show me an example page where I can check your result?

Please, let me know
Have a nice day ??

Yes,i will write it down. Actually i already written it here, but somehow the post wss deleted.

If i rename the js file to “wishlist.js” ->clicking the heart icon that is overlayed on an item, just reloads the shop page. Nothing happens.
(why should i even rename this file? than it does not override the “old” file)

If i leave the name “jquery.yith-wcwl.js”, then the heart moves to the left if I click it, and some text is visible (“Remove from wishlist”).
When clicking that, the wishlist opens, instead of removing the item from the list.
After coming back to the shop page, the hearts on the items I added are black, but the text is gone.

Hope this is understandable.

Thanks for your support!

Just tried this. I noticed that the problem I had was that the wishlist.js was generating a 404 error. It looks like the override uses the web server path.

For example the desired URL of:

/wp-content/themes/child-theme/woocommerce/wishlist.js?ver=2.0.16

is ACTUALLY being written as:

/home/cyberpunk/webapps/avgjoe/wp-content/themes/child-theme/woocommerce/wishlist.js?ver=2.0.16

A simple fix when using a redirect plugin but looks like a bug with the wishlist plugin overall.

Commenting to help anyone who might end up having a problem with this tutorial. I tried following it, and it wouldn’t work. My problem was that I didn’t enter the “unminified” folder, I grabbed the js script from the folder above it. So if it doesn’t work for you, check if you’ve taken the .js file from the correct folder.

Cheers

• This reply was modified 7 years, 8 months ago by kmsecpro.

I don’t know what you guys are doing wrong. Just follow the steps exactly as described…

For me, it’s working like a charm ??

1001 thanks, @yithemes!!!

no its still not working for me. Now I have taken the JS from the unminified folder. (Don’t know if I have done that before)
BUT its still the same.

Maybe someone can shar the two altered files, so that I can check if I did something wrong?

Well, I followed exactly the steps described by @yithemes. So, please see above ??

“…you can add it, within other functions” – Does that mean to put the function INSIDE the function on line 380, or ABOVE it ?
I tried both, but it doesnt work either.

@fourgood above it, or below it, but not inside.

This should be standard @yithemes

Ajax add and remove with heart or like button.