Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to modify CSS in a specific page of the WP admin dashboard (backend) – Woocommerce

I’m trying to remove both padding and the title of the dashboard page of the admin panel of WordPress. The dashboard was redesigned with the "Welcome Dashboard for elementor" + Elementor.

I tried this script:

var domainURL = window.location.origin;
var path = window.location.pathname;
if ((path == "/wp-admin/" || path == "/wp-admin" || path == "/wp-login.php") && domainURL+path)
{
    document.getElementsByClassName("h1").style.display = "none";
}

It is not working. Would you have fixes or ideas to achieve this, please?

Tags:

2

Answers


  1. 0

    You have to inject the css into the wordpress header to actually modify the wordpress css admin console. In your function.php file add the following:

    <?php function theme_admin_css() {
echo '
<style>
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>

    Now to easily find your the element you want to target and style you can do the following:

    In your browser: Right click on the element > Inspect.
    Find your element in the source code: Right Click > Copy > Copy selector

    Now you can paste your selector in-between the style tag and customize it.

    One more thing, you should use the !important statement (eg: background-color:red!important)

    Login or Signup to reply.
  2. 0

    In general, the <body> classes contain a unique class specific to that one page (e.g. page name), you could add this as the first selector to your CSS code.

    // Backend
function filter_admin_body_class( $classes ) {  
    // Current url
    $current_url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    
    // Get last part from url. Expl: index.php
    $last_part = basename( parse_url( $current_url, PHP_URL_PATH ) );
    
    if ( $last_part == 'index.php' ) {
        // String
        $classes .= 'my-custom-backend-class';
    }
    
    return $classes;
}
add_filter( 'admin_body_class', 'filter_admin_body_class', 10, 1 );

    Additional: For frontend pages you could use body_class

    • Note: The Conditional Tags of WooCommerce and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches.
    // Frontend
function filter_body_class( $classes ) {
    // Returns true on the cart page.
    if ( is_cart() ) {
        // Array
        $classes[] = 'my-custom-frontend-class';
    }
    
    return $classes;
}
add_filter( 'body_class', 'filter_body_class', 10, 1 );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search