Return to previous page

Change product filter button in Mobile Version

This topic has 13 replies, 4 voices, and was last updated 4 days, 3 hours ago ago by Luca Rossi

Crashraider

Participant

July 23, 2025 at 11:02

Good morning,

I’d like to change the filter button on the product page. Some of my clients tell me they can’t filter because they can’t see the button.

I’d like to change it so that instead there’s a button just above the products that says “FILTER PRODUCTS,” which will open the off-canvas filter panel.

I’ve attached an image of what I need.

Is that possible? Thank you.

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#450563 Copied

12 Answers

Alex Carter

Support staff

July 23, 2025 at 12:07

Hello,

Thank you for reaching out to us.

Xtore Builders > Archive products > edit template > https://prnt.sc/bk-vSn4qyxFa

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Warm Regards,
The 8Theme Team

#450566 Copied

Nancy

Participant

July 23, 2025 at 13:31

Are you maybe looking for something like this?
https://www.8theme.com/topic/replace-mobile-filter-icon-with-filter-text/

#450579 Copied

Alex Carter

Support staff

July 24, 2025 at 07:17

Hello, Crashraider,

Should you have any further inquiries or issues, we encourage you to contact us without hesitation.

Warm Regards,
The 8Theme Team

#450637 Copied

Crashraider

Participant

July 24, 2025 at 07:28

The problem I’m having is that I need to make the filter button more visible because my customers aren’t seeing it.

That’s why I’m asking about adding a filter button at the top of the product catalog or another alternative, but with the filter icon, customers don’t see it and don’t know how to filter.

#450641 Copied

Alex Carter

Support staff

July 24, 2025 at 09:12

Hello,

Regarding your concern, we understand the importance of making the filter option more visible for your customers. Adding a filter button at the top of the product catalog is a valid suggestion.

Have you had a chance to try the solutions mentioned above?

Warm Regards,
The 8Theme Team

#450652 Copied

Crashraider

Participant

July 24, 2025 at 10:51

The solution proposed by Nancy doesn’t work. I’ve applied the CSS code she posted, but the icon still appears instead of the word “FILTER” vertically.

#450670 Copied
Alex Carter

Support staff

July 24, 2025 at 13:32
Hello,

Please try this code:

.etheme-elementor-off-canvas__toggle .elementor-button-icon .et-filter:before { content: "\e95d Filter"; }

> https://prnt.sc/gsIRa_bT9E-w

Warm Regards,
The 8Theme Team
#450692 Copied
Crashraider

Participant

July 24, 2025 at 13:36

But it’s horizontal there. I want it to come out vertically like Nancy says.

#450694 Copied
Nancy

Participant

July 24, 2025 at 13:51
Maybe add:

.etheme-elementor-off-canvas__toggle .elementor-button-icon .et-filter:before { content: "\e95d Filter"; writing-mode: vertical-rl; /* or vertical-lr */ text-orientation: upright; /* optional, adjusts the orientation of the characters */ }

?
#450696 Copied
Luca Rossi

Support staff

July 25, 2025 at 06:03
Hi @Crashraider,

Please try with this custom CSS code instead:

.etheme-elementor-off-canvas__toggle .elementor-button { border-radius: 0 10px 10px 0 !important; } .etheme-elementor-off-canvas__toggle .elementor-button-icon .et-filter { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .etheme-elementor-off-canvas__toggle .elementor-button-icon .et-filter:before { content: "\e95d"; } .etheme-elementor-off-canvas__toggle .elementor-button-icon .et-filter:after { content: "Filter"; }

https://prnt.sc/NeKDl7U0CX4W

Hope it helps!
#450741 Copied
Nancy

Participant

July 25, 2025 at 08:39

I think he wants the direction of the text vertically (look at his post at July 24, 2025 at 13:36)

#450758 Copied

Luca Rossi

Support staff

July 25, 2025 at 09:28

Dear @Nancy,

Thank you for your assistance.

We look forward to seeing the results once @Crashraider implements the custom CSS code.

Best regards,
The 8Theme Team

#450768 Copied
Viewing 13 results - 1 through 13 (of 13 total)