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

How to Customize the Position and Appearance of Your YITH Wishlist Button

47 threads Sep 16, 2025 Plugin → Yith woocommerce wishlist

Content

One of the most common challenges when using the YITH WooCommerce Wishlist plugin is getting the 'Add to Wishlist' button to appear exactly where you want it on your product pages. Users often find the button appears in an unexpected location, such as below the 'Add to Cart' button, within payment methods, or not aligned correctly with other elements. This guide will walk you through the most effective methods to reposition and style your wishlist button for a seamless store experience.

Why Does This Happen?

The plugin's default settings and your theme's specific HTML structure are the primary factors. While the plugin offers several built-in positions (like 'After Add to Cart'), these hooks may not align perfectly with your theme's design. This often results in the button appearing in a less-than-ideal spot, requiring manual adjustment.

Common Solutions for Repositioning the Button

1. Using a Custom Code Snippet (PHP)

The most powerful way to move the button is by using a small code snippet in your theme's functions.php file. This method uses JavaScript to find the button and move it to a new location in the Document Object Model (DOM) after the page loads.

Example: Move the button next to the 'Add to Cart' button

if ( ! function_exists( 'yith_wcwl_custom_styles' ) ) {
    function yith_wcwl_custom_styles() {
        $jquery = 'jQuery( function($) {
            let wishlistContainer = $( "body.single-product .summary .yith-wcwl-add-to-wishlist" );
            wishlistContainer.insertAfter( ".summary button.single_add_to_cart_button" );
        });';
        wp_add_inline_script( 'jquery-yith-wcwl', $jquery );
        wp_add_inline_script( 'jquery-yith-wcwl-user', $jquery );
    }
    add_action( 'wp_enqueue_scripts', 'yith_wcwl_custom_styles', 999 );
}

How it works: This code targets the wishlist container on a single product page and moves it to appear immediately after the 'Add to Cart' button. You can customize the jQuery selectors (e.g., .summary button.single_add_to_cart_button) to target different elements on your page.

Important: Always add custom code to a child theme's functions.php file to prevent it from being overwritten during theme updates.

2. Using a WordPress Hook

For a more straightforward approach, you can use a WordPress action hook to output the button in a specific location. This is often cleaner than DOM manipulation.

Example: Use the 'woocommerce_after_add_to_cart_button' hook

if( defined( 'YITH_WCWL' ) && ! function_exists( 'yith_wcwl_move_wishlist_button' ) ){
    function yith_wcwl_move_wishlist_button(){
        echo do_shortcode( '[yith_wcwl_add_to_wishlist]' );
    }
    add_action( 'woocommerce_after_add_to_cart_button', 'yith_wcwl_move_wishlist_button' );
}

After adding this code, you must also change the button's position in the plugin settings to "Use Shortcode" to prevent it from being printed in two locations.

3. Adjusting with Custom CSS

Once the button is in the right general area, you often need CSS for fine-tuning, such as adding margin or adjusting its display property to sit inline with other buttons.

Example: Add space above an element following the wishlist button

.product .summary .product_meta {
    margin-top: 25px;
}

Example: Adjust the position of the button in a product loop

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

Add CSS like this to your theme's Additional CSS section (Appearance > Customize > Additional CSS).

Removing Unwanted Text Labels

Another frequent request is to remove the text that appears next to the icon, such as "Remove from list." This can be achieved with a simple filter.

Example: Completely remove the 'Remove from list' text

add_filter( 'yith_wcwl_remove_from_wishlist_label', '__return_empty_string' );

Troubleshooting Tips

  • Test First: Before making permanent changes, use a staging site or a test environment.
  • Check for Conflicts: If a solution doesn't work, a theme or plugin conflict could be the cause. Temporarily switch to a default theme like Twenty Twenty-Four and disable other plugins to test.
  • Selector Specificity: The jQuery and CSS selectors in these examples are based on common themes. You might need to inspect your page's HTML using your browser's developer tools to find the correct class names for your specific theme.

By combining these PHP, hook, and CSS techniques, you can gain full control over the placement and appearance of your YITH WooCommerce Wishlist button, ensuring it integrates perfectly with your store's design.

Related Support Threads Support