Home › Forums › WoodMart support forum › Show a Red Dot on the Filter Icon when Filters are preset on Mobile

Show a Red Dot on the Filter Icon when Filters are preset on Mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 12, 2024 at 6:44 am #538907

    familyecomm-7680
    Participant

    In Desktop mode all the filters are always visible, so it’s easy to see which filters are selected for the visible products. However, in mobile mode we see a filter icon and a side tray opens when we click on the filter icon. Is there a way to show some kind of indicator, like a red dot, that shows that the current view is filtered. Some sites show a number that corresponds to the number of filters that are currently applied.

    February 12, 2024 at 5:29 pm #539148

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Can you please share the page URL I will check and give you a possible solution.

    Best Regards.

    February 13, 2024 at 12:53 am #539306

    familyecomm-7680
    Participant

    https://scentedmeadow.com/shop

    February 13, 2024 at 1:30 pm #539465

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    When you apply filters on mobile devices. The checkbox show this filter is applied:
    Like this:
    https://ibb.co/6JbwRxH

    Best Regards.

    February 14, 2024 at 10:22 pm #540159

    familyecomm-7680
    Participant

    Yes, that is true. But when the customer is looking at the filtered result, it would be nice to change the filter icon to indicate that the list the customer is looking at is a filtered view and not a complete list. Just like when someone adds an item to the cart, the cart shows an indicator that there is item(s) in the cart.

    February 15, 2024 at 1:37 pm #540376

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global. This code change the active filter color and background color

    .wd-filter-list .wc-layered-nav-term.wd-active a {
    color: white !important;
    background-color: red;
}

    Hope this helps!

    Best Regards.

  • Author
    Posts

Tagged: 

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