Adding "Add to Wishlist" to my Essential-grid product thumbnail

Hi lidorex,

I’ve made some test on local installation, and I think I’ve reached an acceptable result.

1. I’ve duplicated an existing skin, and edited single skin item (Ess Grid -> Item Skin Editor)

2. On the single skin item, I’ve added a “Blank Html” snippet, where I want to add “Add to wishlist” button

3. I edited “Blank Html”, setting this content:

[yith_wcwl_add_to_wishlist product_id="%post_id%"]

Now, you can create your grid with previously setted skin, and use it in a page.

Note that, if you have debug activated, a notice will show up; this bug appears when you try to use “add to wishlist” shortcode and global variable $product is not defined.

We will fix this problem in the next revision of the plugin; if you want to resolve the problem, and test our fix, please paste this code

if( ! isset( $product ) ){
    $product = ( isset( $atts['product_id'] ) ) ? wc_get_product( $atts['product_id'] ) : false;
}

in wp-content/plugins/yith-woocommerce-wishlist/includes/class.yith-wcwl-shortcode.php:304

Let me know if this helps you
Have a nice day ??

Testing, by the way is there any option to set icon instead of just simple-anemic “Add to wishlist” text?

Thanks.
Appreciate your help.

So make it similar to my theme wishlist-button visual.

?? Any suggestions please?

Hi again lidorex,

you can use shortcode attribute “icon” to specify “add to wishlist” icon; this attributes accepts any fontawesome class, as listed here

So, the shortcode should be something like this

[yith_wcwl_add_to_wishlist product_id="%post_id%" icon="glass"]

For a complete list of shortcode attribute, you can check the official documentation

Let me know if this helps

Thank you for your replay
Nope, It showing me the “glass” in text side by side to the Wishlist text, Any other suggestions?
By the way I also mention that the code for the fontawesome Is with “fa”, you sure you need to add only “glass” and thats It?

??

Hi lidorex,
Sorry for the misunderstanding, I think I got an acceptable result.

The icon is not shown for a small error in the parsing of the shortcode attributes: we will fix it in our next release that we are going to publish soon.

In the meantime, you can try to act on your installation replacing \YITH_WCWL_Shortcode::add_to_wishlist (wp-content/plugins/yith-woocommerce-wishlist/includes/class.yith-wcwl-shortcode.php:301-369) with this code

public static function add_to_wishlist( $atts, $content = null ) {
	global $product;

	if( ! isset( $product ) ){
		$product = ( isset( $atts['product_id'] ) ) ? wc_get_product( $atts['product_id'] ) : false;
	}

	$template_part = 'button';

	$label_option = get_option( 'yith_wcwl_add_to_wishlist_text' );
	$icon_option = get_option( 'yith_wcwl_add_to_wishlist_icon' ) != 'none' ? get_option( 'yith_wcwl_add_to_wishlist_icon' ) : '';

	$label = apply_filters( 'yith_wcwl_button_label', $label_option );
	$icon = apply_filters( 'yith_wcwl_button_icon', $icon_option );

	$browse_wishlist = get_option( 'yith_wcwl_browse_wishlist_text' );

	$already_in_wishlist = get_option( 'yith_wcwl_already_in_wishlist_text' );

	$product_added = get_option( 'yith_wcwl_product_added_text' );

	$classes = apply_filters( 'yith_wcwl_add_to_wishlist_button_classes', get_option( 'yith_wcwl_use_button' ) == 'yes' ? 'add_to_wishlist single_add_to_wishlist button alt' : 'add_to_wishlist' );

	$default_wishlists = is_user_logged_in() ? YITH_WCWL()->get_wishlists( array( 'is_default' => true ) ) : false;

	if( ! empty( $default_wishlists ) ){
		$default_wishlist = $default_wishlists[0]['ID'];
	}
	else{
		$default_wishlist = false;
	}

	$exists = YITH_WCWL()->is_product_in_wishlist( $product->id, $default_wishlist );

	$wishlist_url = YITH_WCWL()->get_wishlist_url();
	$product_type = $product->product_type;

	$additional_params = array(
		'wishlist_url' => $wishlist_url,
		'exists' => $exists,
		'product_id' => $product->id,
		'product_type' => $product_type,
		'label' => $label,
		'browse_wishlist_text' => $browse_wishlist,
		'already_in_wishslist_text' => $already_in_wishlist,
		'product_added_text' => $product_added,
		'icon' => $icon,
		'link_classes' => $classes,
		'available_multi_wishlist' => false,
		'disable_wishlist' => false
	);

	$additional_params = apply_filters( 'yith_wcwl_add_to_wishlist_params', $additional_params );
	$additional_params['template_part'] = isset( $additional_params['template_part'] ) ? $additional_params['template_part'] : $template_part;

	$atts = shortcode_atts(
		$additional_params,
		$atts
	);

	$atts['icon'] = ! empty( $atts['icon'] ) ? '<i class="fa ' . $atts['icon'] . '"></i>' : '';

	// adds attributes list to params to extract in template, so it can be passed through a new get_template()
	$atts['atts'] = $atts;

	$template = yith_wcwl_get_template( 'add-to-wishlist.php', $atts, true );

	return apply_filters( 'yith_wcwl_add_to_wishlisth_button_html', $template, $wishlist_url, $product_type, $exists );
}

As you suggested, you surely have to use the class with the fa- prefix in order to make it works correctly.

Please, excuse me again for the mistake.

This is the final result I achieved with this changes

Let me know if this helps

Have a nice day!

Thanks for your reply.
1.Keeping:

}
}
}

add_shortcode( ‘yith_wcwl_wishlist’, array( ‘YITH_WCWL_Shortcode’, ‘wishlist’ ) );
add_shortcode( ‘yith_wcwl_add_to_wishlist’, array( ‘YITH_WCWL_Shortcode’, ‘add_to_wishlist’ ) );

?
Or replace It?

2.How your text is colored in white?

Hi again

1. yes, for sure keep them! Replacing them would cause a parse error
2. I simply added some css to style.css file of my theme

In my example, this code worked fine

.esg-grid .add_to_wishlist {
  color: #fff;
}

Let me know!
Have a nice day ??

Hi,

I`ll join your conversation.

I tried to follow these steps and show only heart icon but unfortunately no result so far.

What changes should be made in order to show only the heart icon in essential grid.

Hi GotMort,

This conversation started with 2.0.8 release of the plugin; any changes suggested to the code, was included in 2.0.9 release, so it should not be required to make any change to shortcode class.

To display only heart icon, you can customize text print within add to wishlist button, using the ‘label’ attribute

So, the content of “Blank Html” block, should be something like this:

[yith_wcwl_add_to_wishlist product_id="%post_id%" label=""]

Let me know if this helps
Have a nice day ??

Add to Wishlist not display in my product page..i installed walleto theme its support woo commerce (or) not