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

Fixing Missing or Broken Heart Icons in YITH WooCommerce Wishlist

24 threads Sep 16, 2025 Plugin → Yith woocommerce wishlist

Content

One of the most common issues users encounter with the YITH WooCommerce Wishlist plugin is the heart icon not displaying correctly. Instead of the familiar icon, you might see empty squares, strange symbols (like F08A), or even CSS class names appearing on your page. This guide will explain why this happens and provide the most effective solutions to get your wishlist icons working properly again.

Why Do Wishlist Icons Disappear or Break?

Based on extensive community reports, this issue is almost always caused by one of three factors:

  • FontAwesome Compatibility: The plugin historically used FontAwesome 4 icon classes. Many modern themes now use FontAwesome 5 or newer, which has different class names (fas fa-heart vs. fa fa-heart-o).
  • Theme Conflicts: Your active theme may be overriding the plugin's styles or not loading the necessary FontAwesome library.
  • Plugin or Cache Conflicts: Other plugins, particularly those that optimize, minify, or manage assets (like WPML, WP Hide, or caching plugins), can interfere with how the wishlist loads its icon fonts.

How to Fix Missing YITH Wishlist Icons

Solution 1: Add Custom CSS (Most Common Fix)

This is the first solution to try, as it resolves the issue in a majority of cases. It forces the icon to use the FontAwesome font family.

  1. Navigate to your WordPress Dashboard
  2. Go to Appearance → Customize → Additional CSS
  3. Paste one of the following code snippets:
.yith-wcwl-add-to-wishlist i {
    font-family: 'FontAwesome' !important;
}

Or, for a more comprehensive fix that also covers social sharing icons:

.yith-wcwl-add-to-wishlist i, 
.yith-wcwl-share i {
    font-family: FontAwesome !important;
}

Save the changes and clear your site and browser cache to see if the icons reappear.

Solution 2: Enqueue Required Assets via functions.php

If the CSS solution doesn't work, the issue might be that required stylesheets or scripts aren't loading properly, especially on certain pages like the homepage or in modals. This often happens after a site migration or theme change.

Warning: Editing theme files should be done with caution. Use a child theme to prevent your changes from being overwritten by theme updates.

  1. Access your theme's files, preferably via a child theme.
  2. Open the functions.php file.
  3. Paste the following code at the end of the file:
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' );
            wp_enqueue_script( 'prettyPhoto-init', plugins_url( 'assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', WC_PLUGIN_FILE ), array( 'jquery','prettyPhoto' ) );
        }
        add_action( 'wp_enqueue_scripts', 'yith_wcwl_enqueue_back_required_assets', 99 );
    }
}

Solution 3: Identify and Resolve Conflicts

If the above solutions fail, a conflict with your theme or another plugin is likely.

  1. Test with a Default Theme: Temporarily switch to a default WordPress theme like Twenty Twenty-One. If the icons work, the problem is with your theme's implementation. You may need to contact your theme's support for assistance.
  2. Perform a Plugin Conflict Test: Deactivate all plugins except for WooCommerce and YITH Wishlist. If the icons work, reactivate your plugins one by one to identify the culprit. Common conflicting plugins include asset managers, security plugins, and other optimization tools. As seen in one thread, the "shipcloud for WooCommerce" plugin was identified as the cause.
  3. Check for Template Overrides: Some themes override plugin templates. Check if your theme has a file at wp-content/themes/your-theme/woocommerce/share.php. If it does, temporarily remove or rename it to see if it resolves the issue.

Conclusion

Missing heart icons are a frustrating but usually solvable problem. The solutions listed here, particularly the custom CSS fix, have proven effective for a vast number of users. Always remember to clear your cache after implementing any change. If you've identified a specific plugin conflict, sharing your findings can help other users in the community troubleshoot similar issues.

Related Support Threads Support