How To Change The Html of Products filtration sidebar in Woocommerce?

by

I have Used the function dynamic_sidebar('sidebarId') in the sidebar.php file.

and all the functionality of the sidebar is Working succsessfully

My Question is How To Change the Html of the sidebar widgets and add some classes in widget items To fit My Design ?

enter image description here
Thank You in advance

2 Answers
2

All the widgets of the filtered-nav already have their own class and ids, the categories widget has “widget_product_categories”.
So you can modify css of the widget using

<style>
.widget_product_categories h3 span {color:red}
.widget_product_categories li{color:blue}
</style>

the following widgets ( filter by attributes ) don’t have a unique identifier class but they have a unique id easily find it by right-click-> inspect element I.E:

<style>
.#woocommerce_layered_nav-3 h3 {color:green}
.#woocommerce_layered_nav-3 li {color:gold}
</style>

About changing html it’s more complicated, what we usually do is to create a new widget that conforms to specific needs

Leave a Comment