Automatic show on the div

Hi marcaira14,

First of all, default “Add to Wishlist” button uses url only as a fallback, for users that deactivated JavaScript on their browser.

The correct way to add a product to the wishlist, without refreshing the page, is to use yith_wcwl_add_to_wishlist shortcode, like this

<?php echo do_shortcode( '[yith_wcwl_add_to_wishlist]' ); ?>

Remebere that, if global $product is not defined in your page, you’ll need to pass product id as shortcode attribute, like this

<?php echo do_shortcode( '[yith_wcwl_add_to_wishlist product_id="HERE PRODUCT ID"]' ); ?>

If you’re printing on the same page also the yith_wcwl_wishlist shortcode, you’ll need some javascript magic in order to refresh wishlist content after add to wishlist

$( 'body').on( 'added_to_wishlist', function(){
	$('.wishlist_table').block({message: null,
		overlayCSS                           : {
			background    : 'transparent url(' + yith_wcwl_l10n.ajax_loader_url + ') no-repeat center',
			backgroundSize: '16px 16px',
			opacity       : 0.6
		}
	}).load( window.location.href + ' .wishlist_table', {}, function(){
		$(this).unblock({
			message: null,
			overlayCSS : {
				background    : 'transparent url(' + yith_wcwl_l10n.ajax_loader_url + ') no-repeat center',
					backgroundSize: '16px 16px',
					opacity       : 0.6
			}
		});
	});
});

You can add this snippet to a js library of your theme loaded on the page where you want to obtain this resukts

Or you can copy yith-wcwl.js file from wp-content/plugins/yith-woocommerce-wishlist/assets/js/unminified/, and paste it in your theme root, renaming it wishlist.js

Then you can add the code I suggested at the end of the file, before the last line

Let me know if this solves the problem
Have a nice day 🙂

Hi again

I’m not sure to fully understand your request
Do you need a shortcode as “yith_wcwl_remove_from_wishlist” to remove a specific product from wishlist via ajax?

What do you mean with “look like an image”?

Thanks for your patience
Have a nice day!