I have inherited a website that has custom code in the functions.php file to create a custom Tab in Woocommerce products. This will eventually become obsolete as I update the site but for now I need to insert a font awesome Icon before the Tab Title Text Shows Tabs in Woocommerce

Below is the code that appears in the functions.php, how do I add a Font Awesome Icon to appear before the Title 'TECHNICAL DOCUMENTS'. The font awesome class is "fas fa-book"

    add_filter( 'woocommerce_product_tabs', 'add_product_specs_tab' );
function add_product_specs_tab( $tabs ) {
    $tabs['product_specs'] = [
        'title'     => __( 'TECHNICAL DOCUMENTS', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'add_product_specs_tab_content'

    return $tabs;

function add_product_specs_tab_content() {
    global $post;
    $pdf = get_field( 'pdf', $post->ID );
    if ( ! $pdf ) {
        echo "<h3>Sorry!! No Spec for This Product</h3>";
    } else {
        echo '<div id="product-download-specs-btn">';
        echo '<h3>Download the Product Spec below</h3>';
        echo sprintf( '<a href="%s">Download</a>', $pdf );
        echo '</div>';
        if ( ! is_user_logged_in() ) {
            echo '<div id="product-download-specs-form" data-pdf="'.$pdf.'">';
            echo apply_shortcodes('[contact-form-7 id="33372396" title="Product Spec"]');
            echo '</div>';

The desired outcome would be as follows: Desired out come

  • Does it work to simply add the FontAwesome code to the 'title' in the add_product_specs_tab() function? eg 'title' => '<span class="fas fas-book"></span> ' . __( 'TECHNICAL DOCUMENTS', 'woocommerce' ) ?
    – Pat J
    Jan 15 at 2:50

1 Answer 1


There's no need to add another class. The code you're using already creates separate classes and ID. You could do this with just css:

Inspect your site with console, but your div label should be technical_documents so your code would be:

#tab-title-technical_documents a::before {
  content: "\f02d";
  font-family: 'Font Awesome 6';
  font-weight: 900;

You didn't mention which version of font-awesome you're using, so you may have to change the font-family to match your version. (Again, you could check your console and see which version the other two tabs are using.)

  • You are brilliant - that has worked!!!!! My final code is as follows: #tab-title-product_specs a::before { content: "\f02d"; font-family: 'Font Awesome 5 Free'; font-weight: 900; } Jan 16 at 23:35
  • Glad to hear! Would you mind marking my answer as checked?
    – rudtek
    Jan 17 at 4:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.