Return to previous page

Edit modify on Sidebar filter - by Sam - on WordPress WooCommerce support

This topic has 6 replies, 3 voices, and was last updated 4 months ago ago by Andrew Mitchell

Sam

Participant

July 18, 2024 at 11:33

Dear Team!

How can do below:

1. Reduce the font size in the submenu.
2. Change the color of the arrow.
3. Appear the vertical line left to the submenu when it is opened.

See the attachment for mor clarifications.

Files is visible for topic creator and
support staff only.

#405581 Copied Theme version: 9.3.15

5 Answers
Luca Rossi

Support staff

July 19, 2024 at 05:06
Hi @Sam,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.etheme-elementor-sidebar .sidebar-widget.widget_product_categories ul .open-this {
    color: #fff  !important;
    justify-content: center !important;
    width: 20px  !important;
}
.widget_product_categories.sidebar-widget ul li>ul.children li>a {
    font-size: 12px !important;
    padding-left: 0 !important;
}
```
Hope it helps!

Files is visible for topic creator and
support staff only.
#405719 Copied
Sam

Participant

July 19, 2024 at 08:14

Thanks a lot!

The request has already been implemented in the desktop view.

But the filter in the mobile view appeared in white, so the filter cannot be shown on both screens (mobile and desktop) together.

Please advice!

I attached 2 screenshot.

Files is visible for topic creator and
support staff only.

#405779 Copied

Sam

Participant

July 19, 2024 at 08:37

3. Appear the vertical line left to the submenu when it is opened.

I mean that the submenu be next to a vertical line.
Please see the attached file.

Thanks in Advance

Files is visible for topic creator and
support staff only.

#405790 Copied
Luca Rossi

Support staff

July 19, 2024 at 11:09
Hi @Sam,

Please remove the previous CSS codes and add this custom CSS code instead:
```
.etheme-elementor-sidebar .sidebar-widget.widget_product_categories ul .open-this {
    color: #fff  !important;
    justify-content: center !important;
    width: 20px  !important;
}
.widget_product_categories.sidebar-widget ul li>ul.children {
    border-left: 1px solid #fff;
    padding-left: 10px;
}
.widget_product_categories.sidebar-widget ul li>ul.children li>a {
    font-size: 12px !important;
    padding-left: 0 !important;
}

.woocommerce .etheme-elementor-off-canvas__main {
    background-color: #00577d;
}
```
Hope it helps!
#405848 Copied
Andrew Mitchell

Support staff

July 19, 2024 at 14:23

Dear Sam,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#405873 Copied
Tagged: customize woocommerce filter, modify wordpress sidebar, sidebar filter editing, woocommerce sidebar filter, woocommerce themes, wordpress themes customization
Viewing 6 results - 1 through 6 (of 6 total)