Return to previous page

Replace mobile ‘filter-icon’ with ‘filter-text’

This topic has 5 replies, 2 voices, and was last updated 10 months ago ago by Nancy

Nancy

Participant

February 19, 2024 at 09:49

I want to replace the mobile filter-icon with the text ‘filter’ but vertical. See attachments for an example (but please ignore that fi and lt are on the same line haha). How can I achieve this? A lot of our customers are not so icon-savvy.
I want it to look like
F
I
L
T
E
R

Can you help me?

Kind regards and thanks in advance,
Nancy

Files is visible for topic creator and
support staff only.

#383802 Copied Theme version: 9.2.6

4 Answers
Tony Rodriguez

Support staff

February 19, 2024 at 11:56
Hello, @Nancy,

Thank you for choosing XStore as your WooCommerce WordPress theme.

To address the concern you’ve raised, we kindly ask that you implement the following solution: please navigate to the XStore section, then proceed to Theme Options, followed by Theme Custom CSS, and finally, insert the provided CSS code into the Global CSS area.
```
@media (max-width: 767px) {
.et-toggle-mob-sidebars-inner.et-content-left .et-toggle span.et_b-icon::after {
    content: 'Filter' !important;
     writing-mode: vertical-rl; /* or vertical-lr */
  text-orientation: upright; /* optional, adjusts the orientation of the characters */
}

.et-toggle-mob-sidebars-inner svg {
    display: none !important;
}
}
```
We are optimistic that this will effectively resolve your issue. Should you require any further assistance, please do not hesitate to reach out to us.

Best regards,
The 8Theme Team
#383822 Copied
Nancy

Participant

February 19, 2024 at 13:45

Thank you for pointing me in the right direction! This is what I did:
@media (max-width: 767px) {
.et-toggle-mob-sidebars-inner.et-content-left .et-toggle span.et_b-icon::after {
content: ‘FILTERS’ !important;
padding: 0.75rem 0.2rem;
writing-mode: vertical-rl; /* or vertical-lr */
text-orientation: upright; /* optional, adjusts the orientation of the characters */
}
.et-toggle-mob-sidebars-inner .et-toggle {
width:auto;
height:auto;
}
.et-toggle-mob-sidebars-inner svg {
display: none !important;
}

.et-toggle-mob-sidebars-inner.et-content-left .et-toggle {
border-radius: 2% !important;
background-color: #004676;
opacity: 0.9;
color: white;
}
.et-toggle-mob-sidebars-inner {
top: 35%;
}
}

#383842 Copied

Tony Rodriguez

Support staff

February 19, 2024 at 13:55

Hello, @Nancy,

Thank you for your response.

Have you sorted it out? 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.

Kind regards,
The 8Theme Team

#383847 Copied

Nancy

Participant

February 19, 2024 at 15:13

Yes it works, thank you for your amazing support as always, and have a nice day

#383861 Copied
Tagged: enhanced woocommerce filter functionality, improve woocommerce mobile experience, mobile filter-icon replacement, update mobile filter in woocommerce, woocommerce template customization, wordpress template filter modification, wordpress woocommerce filter-text
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘replace mobile ‘filter-icon’ with ‘filter-text’’' has been successfully resolved, and the topic is now closed for further responses

Replace mobile ‘filter-icon’ with ‘filter-text’

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection