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

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

I am working with a Material-UI tab component and I would like to include a tooltip feature. The issue I am facing is that the tooltip does not disappear when I click on the tab. It should hide after clicking on the tab. Currently, the tooltip remains vi ...

Display the entire paragraph when hovering over it

Is there a way to make the entire paragraph appear on hover instead of just showing parts of it? I am building a website on Weebly for a school project and my knowledge is limited. I tried using the following code, but it only displays some of the content ...

What is the reason behind modern browsers continuing to add spaces between inline blocks when there is whitespace present?

Consider the following HTML markup: <div class="inlineblock">one</div> <div class="inlineblock">two</div> <div class="inlineblock">three</div> Accompanied by this CSS style: .inlineblock{ display: inline-block; } ...

Having difficulty aligning ListItem to the right within a List

I am working with an array that contains objects which I need to display in ListItems of a List. My goal is to show these ListItems from the array Objects in a layout where odd numbers are on the left and even numbers are on the right. However, I am facing ...

Compiling a list of products, but the user interface needs some adjustments

Currently, I have designed a product list menu that includes a hover dropdown feature. This means that when a user hovers over a specific menu item, the corresponding list will automatically appear. However, I am facing two issues with this setup. Firstly, ...

Is it possible to integrate a standard drop-down menu/style into a MUI Select component?

I am currently working on implementing the default drop-down menu style for my MUI Select Component. Here is the desired menu appearance: https://i.stack.imgur.com/GqfSM.png However, this is what my current Select Component looks like: https://i.stack. ...

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?

Visit my website here: foxweb.marist.edu/users/kf79g/contact.php I'm stuck on the final step needed to deploy my website and finish it. The issue I'm facing is with the social icons when viewed on medium and small screens. I want them to be cent ...

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...

Can you tell me the standard CSS easing curves?

When working with css, we have the option to incorporate easing for transitions, like this: transition: all .5s ease-in-out CSS provides predefined easings such as ease, ease-in, ease-out, and ease-in-out. We can also create a customized easing using a ...

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

Is there a way to use a Google Chrome command line switch to simulate the dimensions of a

Seeking information on the available Google Chrome command line switches for emulating device sizes. Specifically, I need to test a component that utilizes CSS @media queries for min-device-width/min-device-height. Previous attempts with --window-size an ...

Limit the size of images with CSS properties like max-height or max-width

What is the preferred method for restricting the size of an image and why? While max-width can be used to restrict the size of an element, this article recommends using it specifically for images within containers. If you have a web application with a ve ...

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

Emphasizing the content of the text file with the inclusion of span tags

I am relatively new to working with angular js and javascript. I have a document or text file that looks something like this: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dumm ...

CSS Flexbox: Achieving Perfect Alignment for a Responsive Hamburger Navbar

This is a specific inquiry that requires your attention To begin, kindly execute the code in fullscreen mode Inspect the code and adjust it to fit within a mobile width (there seems to be an issue with responsiveness) Next, open the hamburger menu As show ...

Is there a way to effectively rotate an image according to the position of my cursor, ensuring it functions correctly?

After an extensive search for similar questions, I have come across only one relevant resource which can be found here. While attempting to implement the code mentioned above, I encountered numerous failures in my individual efforts. I am pleased to prov ...

Overflow of text arranged horizontally within a span element situated inside a div container

I am currently working on developing a ticketing system that involves using nested div elements to organize content. Each ticket is represented by a main div containing various other nested divs and media such as images. While the functionality of the sys ...

Using Material UI v1 to customize the widths of table columns

I am looking to configure column widths on a Material UI table using CSS, rather than within React with "classes." However, I am struggling to understand how the column widths are actually controlled. Despite trying to set widths on the TH columns, it does ...

Dynamic loading of lists necessitates encapsulating nested lists

I'm currently working on a 3-level dropdown list that pulls content from a database for my project. I want the top level to resemble a tab menu, with a border surrounding the area underneath where the additional lists will appear. However, I am facing ...