Home › Forums › WoodMart support forum › Whishlist Icon custom
Whishlist Icon custom
- This topic has 5 replies, 2 voices, and was last updated 8 months, 1 week ago by Hung Pham.
-
AuthorPosts
-
March 8, 2024 at 3:39 pm #547432
izabeladaiana766ParticipantHi,
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.March 9, 2024 at 10:53 am #547599
Hung PhamKeymasterHi 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,
March 10, 2024 at 5:14 pm #547786
izabeladaiana766ParticipantHi,
I would like a filled heart or a red heart onto ‘added to wishlist’ action. There is no such icon in fonts.Thankiess <3
March 11, 2024 at 6:34 am #547832
Hung PhamKeymasterHi 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; }
Regards,
- This reply was modified 8 months, 2 weeks ago by Hung Pham.
March 14, 2024 at 7:32 pm #549171
izabeladaiana766ParticipantThank you very much,
I am amazed that every solution provided was working properly. Thank you for doing such great job <333March 15, 2024 at 6:25 am #549203
Hung PhamKeymasterHi 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,
-
AuthorPosts
The topic ‘Whishlist Icon custom’ is closed to new replies.
- You must be logged in to create new topics. Login / Register