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

admin管理员组

文章数量:1122832

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

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

• php
• woocommerce-offtopic
• filters
• hooks

Share Improve this question asked Jul 16, 2018 at 12:26 Ali BeshirAli Beshir 12144 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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

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>

本文标签： phpHow To Change The Html of Products filtration sidebar in Woocommerce