Displaying the wishlist in 2 different styles

  • Resolved danearly

    (@danearly)


    3 years, 11 months ago

    Hello Joris,

    I’ve managed to overlay a heart icon on my catalog page images, but for some reason (probably my theme) this does not work well on single product images. I’ve tried a couple of different hooks but it’s always slightly off the image.

    For now I’m happy to keep the default button (Next to Add to Cart) on single product pages, but is there a way I can keep my other style on catalog pages? So essentially two differently styled ways to initiate the same ‘Add to wishlist’ action.

    Many thanks, Dan

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Joris van Montfort

    (@jorisvanmontfort)

    Hello Dan,

    I find it hard to reply to this without a link to a site I can view. Essentially the catalog page is hooked up to a different WooCommerce hook, so you can control the the single product page and catalog page independently.

    I suppose you should be able to manage the placement of the icon with some CSS adjustments, but without an example page I can’t help you.

    Am I correct in understanding you want to use the icon style and text style mixed? You could do somthing like this:

    
// Remove the default hook the plugin uses.
remove_action( 'woocommerce_after_add_to_cart_button', 'jvm_woocommerce_add_to_wishlist');

// Add a custom hook for the single product
add_action( 'woocommerce_after_add_to_cart_button', function($productID=null){
  // Change the style to text just before adding it
  add_filter( 'jvm_add_to_wishlist_class', function($class) {
    return 'jvm_add_to_wishlist text';
  });  

  // Call the function normally hooked by the plugin
  jvm_woocommerce_add_to_wishlist($productID);
}, 10, 1);

    The code above is not tested but it should show a text based icon on the product page. If your own code serves for showing an icon based version on the catalog page a combination of my code and yours should work.

    I hope I understood you correctly.

    Kind regards and good luck, Joris

    Thread Starter danearly

    (@danearly)

    Thanks Joris,

    This seems to be working well and is exactly what I was trying to achieve. I now have the icon on catalog pages and ‘Add to wishlist’ text on single product pages.

    It also displays the text version on ‘related products’ which I don’t need but I’ll hide that with CSS for now.

    Cheers, Dan

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Displaying the wishlist in 2 different styles’ is closed to new replies.