How to add/change (woocommerce) product tab icon

It seems that these icons are just added with a CSS ::before selector.

So if you have something like that to set up your custom tab:

function woocommerce_product_write_panel_tabs(){ ?>

    <li class="custom_tab">
        <a href="#custom_tab_data_mytab">
            <?php _e('My Custom Tab', 'textdomain'); ?>
        </a>
    </li>

<?php }

Than you should be able to style the a::before with something like this :

#woocommerce-coupon-data ul.wc-tabs li.custom_tab a::before,
#woocommerce-product-data ul.wc-tabs li.custom_tab a::before,
.woocommerce ul.wc-tabs li.custom_tab a::before {
    font-family: Dashicons;
    content: "\f111";
}

You can see that we are targeting the a inside our new list element. We can target the a because we added a unique class to our list item, <li class="custom_tab">.

Here you can change the font-family and also the content, so you can add your own icon font. Just check the styling with the developer tools in your browser.

So for example you could add the new styles directly into the function where you create your list item: (tested)

function woocommerce_product_write_panel_tabs(){ ?>
    <style>
        #woocommerce-coupon-data ul.wc-tabs li.custom_tab a::before,
        #woocommerce-product-data ul.wc-tabs li.custom_tab a::before,
        .woocommerce ul.wc-tabs li.custom_tab a::before {
            font-family: Dashicons;
            content: "gg";
        }
    </style>

    <li class="custom_tab">
        <a href="#custom_tab_data_mytab">
            <?php _e('My Custom Tab', 'textdomain'); ?>
        </a>
    </li>
<?php }

Now you will see not the default icon, instead you will see “gg”.

Related Posts: