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

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 ?

Thank You in advance

Topic woocommerce-offtopic php filters hooks Wordpress

Category Web


Every widget in WordPress get’s a unique ID/class if you look at the markup in inspect element you can see the classes or IDs.

There is also a quick fix solution to add classes to the widget using this plugin - https://wordpress.org/plugins/widget-css-classes/

You can also wrap the dynamic sidebar call with HTML tags something like :

<ul id="sidebar-left">
    <?php dynamic_sidebar( 'left-sidebar' ); ?>
</ul>

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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.