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

Fixing Common YITH WooCommerce Wishlist Mobile Display Issues

33 threads Sep 7, 2025 Plugin → Yith woocommerce wishlist

Content

Mobile compatibility is a common challenge for many YITH WooCommerce Wishlist users. Based on community reports, issues like missing buttons, distorted images, and layout problems frequently occur on mobile devices while working perfectly on desktop. This guide covers the most frequent mobile display problems and their proven solutions.

Why Do Mobile Display Issues Happen?

Mobile display problems with the wishlist plugin typically stem from three main sources:

  • Theme conflicts: Many themes implement custom mobile layouts that can interfere with plugin styling
  • Responsive design thresholds: The plugin switches to a mobile-specific view at certain screen widths
  • CSS specificity issues: Theme styles may override the plugin's mobile-specific CSS rules
  • JavaScript compatibility: Some mobile browsers handle AJAX requests differently than desktop browsers

Common Mobile Issues and Their Solutions

1. Missing Remove/Delete Buttons on Mobile

Several users reported that the remove product button disappears on mobile devices. This often occurs because the mobile responsive template doesn't include this element by default.

Solution: Try disabling the mobile-responsive template entirely by adding this code to your theme's functions.php file:

add_filter( 'yith_wcwl_is_wishlist_responsive', '__return_false' );

This forces the plugin to use the desktop layout on all devices, which often resolves missing element issues.

2. Product Images Not Displaying or Appearing Distorted

Many users encounter problems with product images not showing up at all or appearing stretched/squashed on mobile view.

Solution: Add custom CSS to control image display on mobile devices. This CSS can be added through Appearance → Customize → Additional CSS:

ul.wishlist_view.responsive.mobile li .product-thumbnail a img {
    width: 100px !important
}

ul.wishlist_view.responsive.mobile li, ul.wishlist_view.responsive.mobile li div.item-wrapper {
    display: flex !important;
    align-items: center !important;
}

Adjust the width value (100px) to your preferred image size.

3. Layout and Spacing Issues on Mobile

Improper spacing between columns and misaligned elements are common complaints on mobile devices.

Solution: Use targeted CSS to adjust mobile-specific spacing:

.wishlist_table.mobile li .item-wrapper .product-thumbnail {
    max-width: 150px !important;
}

.wishlist_table.mobile li .item-wrapper .item-details {
    width: 90px !important;
}

Modify these values according to your layout needs.

4. Pop-up Messages Appearing Cut Off or Off-Center

Some users reported that success/error messages appear cut off or improperly positioned on mobile screens.

Solution: Add this CSS to fix pop-up message positioning on mobile:

@media(max-width:991px){
    div#yith-wcwl-popup-message {
        margin: 0px 10px !important;
        left: 0 !important;
    } 
}

5. Products Not Adding to Wishlist on Mobile

This serious issue prevents the core functionality from working on mobile devices, often showing loading animations that never complete.

Troubleshooting steps:

  1. Update the plugin, WooCommerce, and WordPress to their latest versions
  2. Switch to a default WordPress theme (like Twenty Twenty-Three) temporarily to test
  3. Deactivate all plugins except WooCommerce and YITH Wishlist, then reactivate them one by one to identify conflicts
  4. Check for JavaScript errors in the browser console on mobile devices
  5. Ensure your hosting environment isn't blocking AJAX requests (look for 403 or 400 errors)

When Standard Solutions Don't Work

If the above solutions don't resolve your mobile display issues, consider these additional steps:

  1. Browser testing: Test on multiple mobile browsers (Chrome, Safari, Firefox) to identify browser-specific issues
  2. Device testing: Test on actual mobile devices rather than just browser simulation tools
  3. Cache clearing: Clear all caching mechanisms including browser cache, plugin cache, and server-side cache
  4. Plugin conflict testing: Methodically disable other plugins to identify conflicts

Important Considerations

Before implementing any custom code solutions:

  • Always use a child theme to add custom code to avoid losing changes during theme updates
  • Test changes on a staging site before applying them to your live website
  • Keep the plugin updated, as many mobile compatibility issues are addressed in newer versions
  • Note that some features mentioned in support threads may be available only in premium versions of the plugin

Mobile display issues with YITH WooCommerce Wishlist are often resolvable through careful troubleshooting and targeted CSS adjustments. By methodically testing and applying these solutions, most users can achieve proper mobile functionality for their wishlist features.

Related Support Threads Support