How can I add a css class to an existing Woocommerce/Wordpress widget


Staff member
I'd like to add a pair of classes to the Woocommerce Product Categories Widget. In order to ensure I don't break any updates, I'd like to do so without editing the original source code, or having to create a new replacement widget.

From what I've gathered,
should be able to do what I need, but the <a href="" rel="nofollow">documentation</a> is really sparse (actually non-existant). So I'm not really certain how to pull the setting that contains the css classnames that are applied to the widget.

My current code is below, which is obviously not working. Any suggestions would be really appreciated.

add_filter( 'widget_display_callback', 'add_classes', 10, 3 );

function add_classes($settings, $widget, $args) {
    if (get_class($widget) == 'WC_Widget_Product_Categories') {
        $widget_ops['classname'] .= " hidden-phone hidden-tablet";
    return $widget_ops;

Here's what I think is the relevant code snippet in the

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class WC_Widget_Product_Categories extends WP_Widget {

var $woo_widget_cssclass;
var $woo_widget_description;
var $woo_widget_idbase;
var $woo_widget_name;
var $cat_ancestors;
var $current_cat;

 * constructor
 * @access public
 * @return void
function WC_Widget_Product_Categories() {

    /* Widget variable settings. */
    $this-&gt;woo_widget_cssclass = 'woocommerce widget_product_categories';
    $this-&gt;woo_widget_description = __( 'A list or dropdown of product categories.', 'woocommerce' );
    $this-&gt;woo_widget_idbase = 'woocommerce_product_categories';
    $this-&gt;woo_widget_name = __( 'WooCommerce Product Categories', 'woocommerce' );

    /* Widget settings. */
    $widget_ops = array( 'classname' =&gt; $this-&gt;woo_widget_cssclass, 'description' =&gt; $this-&gt;woo_widget_description );

    /* Create the widget. */
    $this-&gt;WP_Widget('product_categories', $this-&gt;woo_widget_name, $widget_ops);