What is the process for incorporating a CSS class into a preexisting Woocommerce/Wordpress widget?

Looking for a way to add additional classes to the Woocommerce Product Categories Widget without tampering with the original source code or creating a replacement widget? The widget_display_callback seems like the way to go, but the available documentation is quite scarce.

The following code snippet attempts to achieve this, but it's not functioning as expected. Any insights or suggestions would be highly 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;
}

This excerpt from the

class-wc-widget-product-categories.php
file might hold relevant information:

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->woo_widget_cssclass = 'woocommerce widget_product_categories';
    $this->woo_widget_description = __( 'A list or dropdown of product categories.', 'woocommerce' );
    $this->woo_widget_idbase = 'woocommerce_product_categories';
    $this->woo_widget_name = __( 'WooCommerce Product Categories', 'woocommerce' );

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

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

Answer â„–1

Give this a shot:

function alterClassName() {
    WC_Widget_Product_Categories->woo_widget_cssclass= 'new-class';
}

add_action('init', 'alterClassName');

If the above code doesn't work, you might need to do some more digging. Where exactly is this code hooked into? Since it's a class, you'll likely use something like add_action('init', array($this, 'functionname'); (likely in a WP_WIDGET function).

Check out potential hooks here: http://codex.wordpress.org/Plugin_API/Action_Reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Header width does not fully occupy the available space

I'm working on a table that includes a div element for adding a header to it. <div class="table-responsive"> <table class="table"gt; <thead> <div class="topPic"><span><i class="fa fa-tree fa-2x"></i>< ...

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

resetting the page's scroll position using a hamburger icon

After adding a hamburger icon to my web project, I noticed that whenever I click on the icon, it scrolls back to the top of the page. I tried adjusting the margin and padding properties, but it still behaves the same way. Even after removing the animation ...

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

Display the table once the radio button has been selected

Before we proceed, please take a look at the following two images: image 1 image 2 I have over 20 fields similar to 'Image 1'. If "Yes" is selected, then a table like in 'Image 2' should be displayed. This means I have 20 Yes/No fields ...

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

Border extends across two separate rows

Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan: <table border="1" style="width:300px"> <tr> <td rowspan="2">Family</td> <td id="jill">Jill</td> <td>Smi ...

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...

What's the best way to arrange a series of images in a horizontal line using html and css?

Looking for a way to display a list of images in a straight line with just the right amount of spacing between them? Check out my fiddle and see the challenge I'm facing. I've been experimenting with HTML code to achieve this look. Here& ...

What can be done to prevent the aspect ratio from being altered?

I am working on creating a parallax effect using a background image that is set to a width of 100% and a height of 700px. I have set the image to have a fixed attachment, but the problem arises when I change the size of the browser window - the picture los ...

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

Utilizing jQuery to dynamically load CSS files on a webpage

For my website, I have implemented 4 different .css files to handle various screen resolutions. Here is the innovative jquery code I've developed to dynamically load these files based on the width of the screen. <link id="size-stylesheet" rel="st ...

Displaying the "Ad Blocker Detected" image next to the advertisement

I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...

Utilize a unique CSS selector and content property to insert a space character between two inline-block elements

I have a group of connected span elements with the class tag from bootstrap v4. Because they are generated from a react.js array of JSX elements, they sit adjacent to each other without any spacing between them: <span class="tag tag-primary">text< ...

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

Ensure that the horizontal navigation items are equally spaced apart

I've managed to align my longer navigation bar items horizontally instead of vertically, but I'm struggling to evenly space them alongside the shorter items within the container. Despite trying various solutions found through research, I have not ...

Automatically create CSS properties for left and top using absolute positioning

When looking at these websites as models: On each of them, I noticed that there is a well-organized column of boxes for every post. I attempted to recreate this using various methods, but couldn't achieve the exact layout on my own website. It seems ...

Can you please tell me the font size specified as 20px/26px?

Recently stumbled upon the 20px/26px value in a codebase I'm currently working on. Wondering if anyone has encountered this before and knows what its purpose is. Interestingly, it renders with the latter pixel value (26px) in Chrome. #action { font: ...