Home Forums WoodMart support forum Whishlist Icon custom

Whishlist Icon custom

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #547432

    izabeladaiana766
    Participant

    Hi,
    I’d love to have the wishlist icon always visible on the product archive (currently visible only on hover).

    Additionally, I’m interested in using a different icon for before and after adding an item to the wishlist. Is it possible to upload my own images or choose from a selection of new icons, such as a white heart or a red heart?

    Thank you <3

    Attachments:
    You must be logged in to view attached files.
    #547599

    Hung Pham
    Keymaster

    Hi izabeladaiana766,

    Thanks for reaching to us.

    Please add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

    
    /* Keep Wishlist always visible */
    .wd-quick-shop .wd-buttons[class*="wd-pos-r"] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    /* Change Wishlist icon */
    .wd-quick-shop .wd-action-btn>a.added:before {
        content: "\f134";
    }

    In order to see full list of WoodMart icons, go to Theme Settings > Typography > Icon fonts. Then, you can replace with your like icons. https://prnt.sc/TBJ6FcbKvhhX

    Regards,

    #547786

    izabeladaiana766
    Participant

    Hi,
    I would like a filled heart or a red heart onto ‘added to wishlist’ action. There is no such icon in fonts.

    Thankiess <3

    #547832

    Hung Pham
    Keymaster

    Hi izabeladaiana766,

    There are no solid icons with WoodMart icons. You can try below methods:

    – Navigate to Elementor > Settings > Advanced tab and enable Load Font Awesome 4 Support option https://prnt.sc/kSegrN7ToMiT

    – Remove previous CSS code and use below one:

    /* Keep Wishlist always visible */
    .wd-quick-shop .wd-buttons[class*="wd-pos-r"] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    
    /* Change Wishlist icon to Solid by using FontAwesome icons */
    .wd-quick-shop .wd-wishlist-icon>a:before,
    .wd-quick-shop .wd-action-btn.wd-wishlist-icon>a.added:before{
    	font-family: 'Font Awesome 5 Free';
    	font-weight: 900;
      content: "\f004";
    }
    
    /* Change added Wishlist icon color */
    .wd-quick-shop .wd-action-btn.wd-wishlist-icon>a.added:before{
    	color: #FF0000;
    }

    https://prnt.sc/ahgiQ6D48cn9

    Regards,

    • This reply was modified 7 months, 4 weeks ago by Hung Pham.
    #549171

    izabeladaiana766
    Participant

    Thank you very much,
    I am amazed that every solution provided was working properly. Thank you for doing such great job <333

    #549203

    Hung Pham
    Keymaster

    Hi izabeladaiana766,

    Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

    If you have a quick minute we always appreciate a 5-star rating on our theme!

    https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

    Your feedback is the motivation to improve our work and services.

    Regards,

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Whishlist Icon custom’ is closed to new replies.