functions - How to change menu icon which is overriden (i.e. by WooCommerce)

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

How can I change the menu icon (coming from external plugins, like WooCommerce) in wp-admin area with custom icon? (The menu-item is actually post-type, so there should be some register_post_type command i think).

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

How can I change the menu icon (coming from external plugins, like WooCommerce) in wp-admin area with custom icon? (The menu-item is actually post-type, so there should be some register_post_type command i think).

• functions
• wp-admin
• templates

Share Improve this question edited Dec 27, 2018 at 23:20 T.Todua 5,89099 gold badges5252 silver badges8181 bronze badges asked Jul 16, 2018 at 4:47 William JeromeWilliam Jerome 18366 silver badges1313 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

WooCommerce styles the icon via this CSS file: woocommerce/assets/css/menu.css, and here's the corresponding code (pretty-printed or actually, I copied it from woocommerce/assets/css/menu.scss):

#adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {
    font-family: 'WooCommerce' !important;
    content: '\e03d';
}

So you can change the font-family and the content (and other) properties to suit your custom icon.

---

Below is an example of customizing the icon by changing it to use a background-image:

// We hook to the `admin_enqueue_scripts` action with a priority of `11`, where
// at this point, the default CSS file should have been loaded. But you can or
// should add the CSS rule to your custom CSS file; just make sure it's loaded
// *after* the default CSS file.
add_action( 'admin_enqueue_scripts', function(){
    $css = <<<EOT
#adminmenu #toplevel_page_woocommerce .menu-icon-generic div.wp-menu-image::before {
    content: ' ';
    background: url('https://png.icons8/dusk/2x/e-commerce.png') no-repeat center;
    background-size: contain;
}
EOT;

    wp_add_inline_style( 'woocommerce_admin_menu_styles', $css );
}, 11 );

Note: The menu.css file is registered and queued in WC_Admin_Assets::admin_styles() with the handle/name of woocommerce_admin_menu_styles.

to add a custom image, you can use this code. the original image is set with CSS then you have to add custom CSS to remove that.

add_action("admin_menu", function () {

    foreach ($GLOBALS["menu"] as $position => $tab) {

        if ("woocommerce" === $tab["2"]) {
            $GLOBALS["menu"][$position][6] = "http://server/image.png";
            break;
        }

    }


});