CSS problem

Hello,

I need the wishlist heart icon on my Single Product page to be red (#d62128), but because I previously added a style somewhere to make action icons white (#fff !important) for other areas of my site, it is now invisible on the white product page background.

As you can see in my inspector screenshot, an inline style (inline:211) is forcing .wd-action-btn .wd-action-icon::after to stay white, and normal custom CSS overrides are not working.

Could you please tell me how I can safely target and override just the single product wishlist icon to make it red, or how WoodMart generates this specific inline style block so I can locate and adjust it?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the products page URL so I can further check on your site and give you a possible solution?

Best Regards

Please check extra info

Attachments:

You must be logged in to view attached files.

Please check this too

Problem is caused when there is color and size

Ooops sorry I just saw that I replied you to the icon problem about the swatch issue I have. Please ignore my irrelevant replies. I will create a new topic for those.

Hello,

This issue is happening because of this CSS you added in Theme Settings:

.wd-action-btn .wd-action-icon::before {
    color: #fff !important;
}

This forces the wishlist icon to stay white everywhere, so on the single product page (white background), it becomes invisible.

You should remove this global rule and instead apply a more specific style only where needed, or override it for the single product page, for example:

.single-product .wd-wishlist-btn.wd-action-btn .wd-action-icon::before {
    color: #d62128 !important;
}

Best Regards,

[Author]

Posts