Home › Forums › WoodMart support forum › CSS problem

CSS problem

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 3, 2026 at 10:11 am #720389

    dunies
    Participant

    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.
    June 3, 2026 at 1:04 pm #720419

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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

    June 3, 2026 at 6:16 pm #720459

    dunies
    Participant

    Please check extra info

    Attachments:
    You must be logged in to view attached files.
    June 3, 2026 at 6:20 pm #720462

    dunies
    Participant

    Please check this too

    June 3, 2026 at 6:24 pm #720463

    dunies
    Participant

    Problem is caused when there is color and size

    June 3, 2026 at 7:18 pm #720467

    dunies
    Participant

    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.

    June 4, 2026 at 10:48 am #720514

    Aizaz Imtiaz Awan
    Keymaster
    Xtemos team

    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
Viewing 7 posts - 1 through 7 (of 7 total)