BugWP logo BugWP
Back to Community
Home / Community / Plugin → Yith woocommerce wishlist

Troubleshooting Guide: Fixing Missing or Misplaced YITH Wishlist Icons

46 threads Sep 7, 2025 Plugin → Yith woocommerce wishlist

Content

Why Is My YITH WooCommerce Wishlist Icon Not Showing?

One of the most common issues users face with the YITH WooCommerce Wishlist plugin is the heart icon not appearing where expected. Based on community reports and solutions, this problem typically stems from conflicts with your WordPress theme, page builder, or customizations.

Common Causes and Their Solutions

1. Theme CSS Conflicts

Many themes apply custom styles that can override or hide the wishlist icon.

Solution: Add custom CSS to your theme's Additional CSS section (Appearance → Customize → Additional CSS).

ul.products li a.add_to_wishlist.single_add_to_wishlist{
    font-size: 13px!important;
}

ul.products li a.add_to_wishlist.single_add_to_wishlist i:before{
    font-family: FontAwesome;
}

2. Outdated Theme Template Files

If your theme has a custom add-to-wishlist.php template file, it might be outdated and causing display issues.

Solution: Locate the template file in your theme's folder (often in the root or under /woocommerce/) and rename it to add-to-wishlist.php.bak. This will force the plugin to use its own updated template.

3. Page Builder Compatibility (Elementor, Divi)

Page builders sometimes modify how WooCommerce hooks work, preventing the automatic display of wishlist buttons.

Solution: Use the dedicated YITH Wishlist widget if available in your page builder, or manually add the shortcode [yith_wcwl_add_to_wishlist] to your product templates.

4. Missing CSS/JS Assets

In some cases, the plugin's CSS and JavaScript files might not be loading properly.

Solution: Add the following code to your theme's functions.php file to force loading the required assets:

if ( defined( 'YITH_WCWL' )) {
    if( ! function_exists( 'yith_wcwl_enqueue_back_required_assets' ) ) {
        function yith_wcwl_enqueue_back_required_assets() {
            $suffix  = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
            $version = defined( 'WC_VERSION' ) ? WC_VERSION : '';
            
            wp_enqueue_style( 'woocommerce_prettyPhoto_css', plugins_url( 'assets/css/prettyPhoto.css', WC_PLUGIN_FILE ), array(), $version );
            wp_enqueue_script( 'prettyPhoto', plugins_url( 'assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', WC_PLUGIN_FILE ), array( 'jquery' ), '3.1.6', true );
        }
        add_action( 'wp_enqueue_scripts', 'yith_wcwl_enqueue_back_required_assets', 100 );
    }
}

5. Custom Icon Positioning

If the icon appears but not in the desired location, you can reposition it with CSS.

Solution: Use custom CSS to adjust the icon's position. For example, to move it to the top left corner of product images:

.products .product .yith-wcwl-add-to-wishlist {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
}

Header Wishlist Icon in Free Version

The free version of YITH WooCommerce Wishlist doesn't include a heart icon widget for the header. However, you can:

  • Add a custom menu item with a heart symbol (♥)
  • Use the shortcode [yith_wcwl_wishlist_items_count] in an HTML widget
  • Consult your theme's documentation for adding custom elements to the header

When to Seek Additional Help

If none of these solutions work, the issue might require:

  • Consulting your theme's support team (for theme-specific conflicts)
  • Checking for plugin conflicts by temporarily disabling other plugins
  • Ensuring you're using the latest versions of WordPress, WooCommerce, and the YITH Wishlist plugin

Remember that theme compatibility can vary significantly, and some solutions may require custom CSS tailored to your specific theme's structure.

Related Support Threads Support