Title: Adding classes to WooCommerce widgets
Last modified: March 14, 2018

---

# Adding classes to WooCommerce widgets

 *  Resolved [doubleedesign](https://wordpress.org/support/users/doubleedesign/)
 * (@doubleedesign)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/)
 * I am using several attribute filter widgets on my shop page. I would like to 
   programmatically add unique classes to each of these widgets.
 * 1. Is there a filter that I could use to do this?
 * 2. If not, how would I do it? I heave already overridden another function as 
   follows:
 *     ```
       class Doublee_WC_Widget_Layered_Nav extends WC_Widget_Layered_Nav {
   
       protected function layered_nav_list( $terms, $taxonomy, $query_type ) {
       // My custom layered_nav_list function, works as intended
       }
   
       } 
       ```
   
 * I can see the widget classes are located in the `WC_Widget_Layered_Nav` class’s
   constructor:
 *     ```
       public function __construct() {
       	$this->widget_cssclass    = 'woocommerce widget_layered_nav woocommerce-widget-layered-nav';
       	$this->widget_description = __( 'Display a list of attributes to filter products in your store.', 'woocommerce' );
       	$this->widget_id          = 'woocommerce_layered_nav';
       	$this->widget_name        = __( 'Filter Products by Attribute', 'woocommerce' );
       	parent::__construct();
       } 
       ```
   
 * I am new to object-oriented PHP and haven’t been able to work out how to override
   this. Simply duplicating the constructor in my custom class and changing the 
   value of `$this->widget_cssclass` doesn’t have any effect (I’ll worry about making
   them unique later…I just need my custom class names to apply first!)
 * Any advice much appreciated!
    -  This topic was modified 8 years, 3 months ago by [doubleedesign](https://wordpress.org/support/users/doubleedesign/).
    -  This topic was modified 8 years, 3 months ago by [doubleedesign](https://wordpress.org/support/users/doubleedesign/).
    -  This topic was modified 8 years, 3 months ago by [doubleedesign](https://wordpress.org/support/users/doubleedesign/).
    -  This topic was modified 8 years, 3 months ago by [doubleedesign](https://wordpress.org/support/users/doubleedesign/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Caleb Burks](https://wordpress.org/support/users/icaleb/)
 * (@icaleb)
 * Automattic Happiness Engineer
 * [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/#post-10071942)
 * Could I ask why you need to add classes? Each widget in WordPress already get’s
   a unique ID / class if you take a look at the markup.
 *  Thread Starter [doubleedesign](https://wordpress.org/support/users/doubleedesign/)
 * (@doubleedesign)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/#post-10071952)
 * Thanks for the quick reply!
 * The unique part is the incremented ID of `woocommerce_layered_nav-[number]`, 
   whereas I need to target a specific widget, not its position (e.g. Attribute 
   X filter widget, not the 6th filter widget). There is always a chance the client
   will reorder the widgets and the one I’m targeting with CSS is currently `#woocommerce_layere_nav-
   6` but there’s no guarantee it always will be.
    -  This reply was modified 8 years, 3 months ago by [doubleedesign](https://wordpress.org/support/users/doubleedesign/).
 *  [Caleb Burks](https://wordpress.org/support/users/icaleb/)
 * (@icaleb)
 * Automattic Happiness Engineer
 * [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/#post-10074263)
 * Maybe worth giving this a try: [https://wordpress.org/plugins/widget-css-classes/](https://wordpress.org/plugins/widget-css-classes/)
 * Otherwise, this hook should give you access to what you need: [https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/](https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/)
 *  Thread Starter [doubleedesign](https://wordpress.org/support/users/doubleedesign/)
 * (@doubleedesign)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/#post-10076623)
 * Thanks, that hook should do the trick! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Adding classes to WooCommerce widgets’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [widgets](https://wordpress.org/support/topic-tag/widgets/)

 * 4 replies
 * 2 participants
 * Last reply from: [doubleedesign](https://wordpress.org/support/users/doubleedesign/)
 * Last activity: [8 years, 3 months ago](https://wordpress.org/support/topic/adding-classes-to-woocommerce-widgets/#post-10076623)
 * Status: resolved