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

How to Fix and Customize the YITH Wishlist Heart Icon on Your WooCommerce Site

31 threads Sep 16, 2025 Plugin → Yith woocommerce wishlist

Content

One of the most common challenges users face with the YITH WooCommerce Wishlist plugin is getting the heart icon to display correctly. Whether it's not showing up at all, appearing in the wrong place, or not changing after a product is added, these issues can be frustrating. This guide compiles the most effective solutions from community discussions to help you troubleshoot and customize your wishlist icon.

Why Do These Icon Issues Happen?

Most display problems are not caused by bugs in the YITH WooCommerce Wishlist plugin itself. The primary culprits are:

  • Theme Conflicts: Many popular themes, especially Flatsome, apply their own styles and customizations that override the plugin's default CSS. This can hide the icon, change its position, or alter its appearance.
  • CSS Specificity: Your theme's stylesheet might use more specific CSS selectors, making the plugin's styles ineffective.
  • JavaScript Interactions: For dynamic changes (like color updates after adding a product without a page reload), JavaScript is often required alongside CSS.
  • Plugin Settings: The icon might simply be disabled in certain locations, like the shop loop, within the plugin's settings.

Common Solutions and Code Snippets

1. Make the Icon Always Visible (Not Just on Hover)

If your wishlist icon only appears when you hover over the product, this CSS can force it to be permanently visible.

.product .image-tools.is-small {
    opacity: 1;
}

Add this code in your WordPress dashboard under Appearance > Customize > Additional CSS.

2. Reposition the Icon on Product Images

To move the icon from the default top-left position to another corner, use CSS positioning. The following code moves it to the top-right.

.add-to-wishlist-before_image .yith-wcwl-add-to-wishlist {
    left: auto !important;
    right: 10px !important;
}

You can modify the top, bottom, left, and right values to achieve the exact placement you need.

3. Fix Icon Display in Flatsome Theme

Flatsome is a common source of conflicts. If the above CSS doesn't work, you may need to enqueue the plugin's assets with this PHP code snippet. Add it to your child theme's functions.php 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';
            wp_enqueue_script( 'yith-wcwl-frontend', YITH_WCWL_URL . 'assets/js/frontend/wishlist' . $suffix . '.js', array( 'jquery' ), YITH_WCWL_VERSION, true );
        }
        add_action( 'wp_enqueue_scripts', 'yith_wcwl_enqueue_back_required_assets', 20 );
    }
}

4. Enable the Icon on Shop and Archive Pages

Before trying any code, first check the plugin's settings. Navigate to YITH > Wishlist > Add to Wishlist Options > Loop Settings. Ensure the "Show Add to wishlist button" option is enabled and choose your preferred position from the dropdown.

5. Change the Icon's Appearance (Size, Color, Background)

You can use CSS to style the icon to match your site's design. This example reduces the size, changes the color to red, and removes the circular background.

.yith-wcwl-add-to-wishlist i {
    font-size: 1.2rem;
    color: red;
    background-color: transparent !important;
    border: none !important;
}

Important Considerations

  • Use a Child Theme: Always add custom code to a child theme's style.css or functions.php file. This prevents your changes from being overwritten during theme updates.
  • Clear Your Cache: After making CSS changes, clear any caching plugins or server-side caches to see the results immediately.
  • Test with a Default Theme: If problems persist, temporarily switch to a default WordPress theme like Twenty Twenty-Four. If the icon works there, the issue is definitively a conflict with your main theme, and you may need to contact its support for further assistance.

By following these steps, you should be able to gain control over the appearance and placement of your YITH wishlist heart icon, creating a seamless experience for your customers.

Related Support Threads Support