Wishlist for WooCommerce - Icon

Wishlist for WooCommerce

  1. Home
  2. Docs
  3. Wishlist for WooCommerce
  4. How To
  5. How to Add Wishlist Icon to WooCommerce Navigation Menu

How to Add Wishlist Icon to WooCommerce Navigation Menu

Adding a Wishlist Icon to Your WooCommerce Navigation Menu

Introduction

Incorporating a wishlist icon into your WooCommerce navigation menu enhances user experience by providing a visual and interactive element that customers can easily recognize and use. This guide will walk you through the process of adding a wishlist icon to your site’s navigation menu.

 Step-by-Step Guide

 

image7 1

 

 Enabling the Wishlist Icon Feature

  • Access your WordPress dashboard.
  •  Navigate to Woo-Commerce > Settings.
  •  Click on the ‘Wishlist’ tab.
  • Scroll down to find the ‘Nav menu item’ section
  • Check the box that says ‘Enable a wish list icon with a counter on the menu’.
  • Make sure you have saved your changes.

 

 

image4 1

Adding the CSS Class for the Icon

      1. From the WordPress dashboard, go to Appearance > Menus.
      2. Ensure you’re editing the correct menu where you want the wish list icon to appear.
      3. Click on ‘Screen Options’ in the top right corner of the screen.
      4. Under ‘Show advanced menu properties’, check the ‘CSS Classes’ option.

image9

        5. Now, expand the menu item where you want to add the wish list icon.
        6. In the field labeled ‘CSS Classes (optional)’, enter `wish-list-icon`.
        7. Click ‘Save Menu’ to apply the changes.


image11

Visual Confirmation on the Front-End

After applying the settings, visit your website’s front-end to confirm that the wishlist icon now appears in the navigation menu. It should be visible alongside other menu items, and if enabled, it will show a counter indicating the number of items in the wishlist.

 Tips for Customization

  • You can use additional CSS to style the wishlist icon to better match your site’s design
  • The counter feature is an excellent visual prompt for users, indicating that they have items saved, potentially encouraging them to proceed to checkout.

 

Wishlist for WooCommerce

Tags