Support » Plugin: YITH WooCommerce Wishlist » How to add the Heart icon to header

  • maxgorky

    (@maxgorky)


    Hi!

    How do I add that Heart icon to the header? Products are added to Wishlist but how do customers find it?

    Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author YITHEMES

    (@yithemes)

    Hi there

    Products are added to Wishlist but how do customers find it?

    By default when a product is added to wishlist, “Add to Wishlist” button becomes “View wishlist” link, so users are able to navigate to their wishlist

    Besides, you can add Wishlist link to any menu of your shop, since Wishlist is a simple page in your store

    How do I add that Heart icon to the header?

    This could be done in various way
    – You could use our widget Wishlist items, if your shop provides you with a sidebar area in the header (widget is included in another version of the plugin, check out plugins’ landing page on our site for more informations)
    – Many themes that supports our plugin provides some sort of Mini Wishlist, or wishlist link in the header
    – You could implement it as a counter shortcode, as I briefly described here
    In this case, it will be up to you to place the shortcode in the correct location in your theme

    maxgorky

    (@maxgorky)

    I get a Heart icon as a wishlist in my header using TI Wishlist. How do I get your plugin working the same way? I’m using OceanWP theme. Can you provide the same functionality? Are you compatible with OceanWP at all?

    Hi,

    I checked this one https://wordpress.org/support/topic/add-menu-item-with-counter/ but where do I need to put your code, if I need the heart icon after a certain menu item? And will it correspond to my theme?

    I also don’t see the products in the Wishlist after they’re actually added (as I added it to the main menu).

    Plugin Author YITHEMES

    (@yithemes)

    Hi there

    For example you can place it inside partials/header/nav.php template, after line 158, as

    echo do_shortcode( '[yith_wcwl_items_count]' );
    

    Then you could try to add the following CSS rules to Additional CSS section of theme customizer

    .yith-wcwl-counter {
        margin-right: -40px;
        line-height: 74px;
    }
    

    This is the final result that I got on my local installation
    Hope this helps

    Hi!

    Thank you for your reply.

    Where can I find that partials/header/nav.php template though?

    Plugin Author YITHEMES

    (@yithemes)

    Hi again

    it should be a file inside your theme folder (wp-content/themes/oceanwp/partials/header/nav.php)

    Hey, unfortunately, that’s the result I get https://imgur.com/a/Tms4wQ6, it’s just the short code appearing in the header.

    Am I doing something wrong or is there another way to deal with that?

    Do you guys have integration with OceanWP theme like TI Wishlist? Wishlists are a significant part of store type websites and OceanWP is a big market for that.

    Thank you.

    Plugin Author YITHEMES

    (@yithemes)

    Hi there

    Could you please make sure that you correctly added the code that defines the shortcode in functions.php file of your theme or child?
    I’ll paste the code here, copying it from the topic that I referenced in one of my previous answers

    if ( function_exists( 'YITH_WCWL' ) ) {
    	if ( ! function_exists( 'yith_wcwl_add_counter_shortcode' )  ) {
    		function yith_wcwl_add_counter_shortcode() {
    			add_shortcode( 'yith_wcwl_items_count', 'yith_wcwl_print_counter_shortcode' );
    		}
    	}
    
    	if ( ! function_exists( 'yith_wcwl_print_counter_shortcode' )  ) {
    		function yith_wcwl_print_counter_shortcode() {
    			?>
    			<div class="yith-wcwl-counter">
    				<i class="yith-wcwl-icon fa fa-heart"></i>
    				<span class="count"><?php echo esc_html( yith_wcwl_count_all_products() ); ?></span>
    			</div>
    			<?php
    		}
    	}
    	add_action( 'init', 'yith_wcwl_add_counter_shortcode' );
    }
    

    Regarding OceanWP, we curently don’t have a proper integration with that theme.
    Usually the theme offers integration with our plugin, instead of going the other way around, but we appreciate your feedback, and we’ll do our best to improve compatibility, and offer better experince to our users

    Hi!

    Thank you. I’ll try this code and hopefully there will be some compatibility introduced.

    Regards,
    Max

    Plugin Author YITHEMES

    (@yithemes)

    Hi Max

    Let me know if the code works as intended and if you need additional help

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.