更新WordPress与YITH插件后，添加到心愿单的心形图标消失求助

Hey there! Let's get that heart icon back on your wishlist button. Here are some step-by-step solutions to try:

1. Double-Check Your Template File Path #

First, make sure you copied the template file to the correct directory structure in your theme. The original plugin file is usually at:
wp-content/plugins/yith-woocommerce-wishlist/templates/add-to-wishlist-button.php

When overriding it in your theme, it needs to match the plugin's template hierarchy exactly. So it should go here:
wp-content/themes/your-active-theme/woocommerce/yith-woocommerce-wishlist/add-to-wishlist-button.php

If you just dropped it directly into woocommerce/ without the yith-woocommerce-wishlist subfolder, WordPress won't pick it up.

2. Add the Icon Code to Your Overridden Template #

Open the add-to-wishlist-button.php file in your theme's directory. Look for the line that outputs the button text—this might look something like:

echo esc_html( $label );

Modify it to include the heart icon element before the text. If your site uses Font Awesome (common with older WP versions like 4.9.4), use this:

echo '<i class="fa fa-heart"></i> ' . esc_html( $label );

If YITH uses its own icon font, try their native icon class instead:

echo '<span class="yith-wcwl-icon yith-wcwl-icon-heart"></span> ' . esc_html( $label );

Save the file and refresh your site to test.

3. Verify Plugin Settings #

Sometimes updates reset plugin settings. Head to YITH > Wishlist > Settings > Add to Wishlist in your WordPress dashboard. Look for options like:

• "Button type" (choose "Icon + Text" instead of just "Text")
• "Show icon on add to wishlist button" (make sure this checkbox is ticked)

Adjust these settings and save changes—this might be the quick fix you need.

4. Fix Icon Font Loading Issues #

If the icon isn't rendering (shows a square or nothing), the icon font might not be loading correctly:

• Check your browser's developer tools (F12) to see if the font file is returning a 404 error.
• If you're using Font Awesome, you can re-enqueue it by adding this code to your theme's functions.php file:

function enqueue_font_awesome_for_wishlist() {
    wp_enqueue_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome_for_wishlist' );

(Version 4.7.0 is compatible with WP 4.9.4—avoid newer versions that might cause conflicts.)

5. Clear All Caches #

Don't forget to clear:

• Your browser cache (Ctrl+F5 to force-refresh)
• Any WordPress caching plugins you're using (like W3 Total Cache or WP Super Cache)
• Server-side cache (if your host uses it, check their docs for how to clear it)

6. Use a Filter to Add the Icon (No Template Edit Needed) #

If overriding the template isn't working, you can use a WordPress filter to inject the icon directly. Add this code to your theme's functions.php:

add_filter( 'yith_wcwl_add_to_wishlist_label', 'prepend_heart_icon_to_wishlist', 10, 2 );
function prepend_heart_icon_to_wishlist( $label, $product_id ) {
    // Adjust the icon class to match your site's icon font
    return '<i class="fa fa-heart"></i> ' . $label;
}

This will add the icon before the button text regardless of template changes.

内容的提问来源于stack exchange，提问作者Mohsin Abbas