WoodMart Icon Customization Wishlist/Compare Page

[batifix]

Hello guys, first of all I would like to say how good I think WoodMart is, the implementation worked great and the Design is great! We have changed the wishlist to “notepad” and the Compare icon. For this reason we would also like to adjust the rest. The individual pages of the former Wishlist and Compare contain the old icons. This link is to be created with the Shortcodes and so I would like to know how can I change that?

There are some examples, which sites/icons i mean. Hopefully you can help me to fix the last little things. 🙂

• This topic was modified 1 month, 1 week ago by batifix.

Attachments:

You must be logged in to view attached files.

Hello,

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

body .wd-action-btn.wd-wishlist-btn>a:before, .wd-empty-wishlist:before {
 content: "\f11a" !important;
}
body .wd-action-btn.wd-compare-btn>a:before, .wd-empty-compare:before {
 content: "\f114" !important;
}

Then, Navigate to Typography > Icons fonts > Check the icons and change the content code as per your requirements.

Best Regards,

Thank you very much, that worked great!
Would it also be possible to select our own/individual ones?
Do they have to be uploaded as an icon under Elementor or can they also be .svg for media?

Hello,

There are two main ways to achieve this:

1- Using Custom Font Icons (Like FontAwesome)

If you want to use a different icon from FontAwesome or another font-based icon set, you can replace the content: “\f11a”with the Unicode of your desired icon.

02- You can upload an SVG file to the WordPress media library and use CSS to replace the existing icon with an SVG background.

body .wd-action-btn.wd-compare-btn>a:before {
 content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('https://supporttestsites.theblackpearlspro.com/woodmartsupport/wp-content/uploads/2025/02/corporate-mobile-icon-1-3.svg');
    background-size: contain;
}

Replace the actual URL of your uploaded SVG.

Best Regards,

The first option worked. For the second one it shows the standard icons again, possibly because the icons are uploaded to the media or could it be due to their resolution or something similar?
I use these icons (media uploaded) also for the header.

Hello,

You may need to add !important in your CSS rules to ensure they take effect. Try clearing your website and browser cache to see if the new icons load properly.

If the issue remains, share the wp logins details so I will further check on your site and give you a possible solution.

Best Regards,

At least i’m working with the first solution Theme Settings > Custom CSS > Global

Now i see, in the my account, there is still the “old one”, i need to change something else?

Attachments:

You must be logged in to view attached files.

Hello,

For the icon on my account page, Please add this code to the Theme Settings > Custom CSS > Global:

.wd-my-account-links .wishlist-link a:before {
     content: "\f114" !important;
}

Best Regards,

[Author]

Posts