Add custom ID to WooCommerce product tab

Question

I've created a custom product tab in my functions.php - it looks like this:

add_filter( 'woocommerce_product_tabs', 'custom_description_tab' );
function custom_description_tab( $tabs ) {
    global $product;

    $tabs[] = array(
        'title'     => __( 'Reservedele', 'bridge-child' ),
        'priority'  => 50,
        'callback'  => 'custom_spareparts_tab_callback'
    );

    return $tabs;
}

When I look at the documentation for the filter (https://woocommerce.com/document/editing-product-data-tabs/) - I can't find anything on it. I've seen plugins do it - so it must be possible - maybe I'm just getting blind looking for it.

Answer 1

Looking at tabs.php in WooCommerce, the id attribute is prefixed with tab-title- and uses the key from the array of tabs. This means if you do $tabs['wptricksdk'] = array( ... ), the value of the tab's id attribute would be tab-title-wptricksdk. Mixing numerical keys and string keys in arrays can get messy, but I think this should be okay.

If that's not what you want, then you'll need to use JavaScript to manipulate the document. This is probably not recommended, but ultimately up to you. Would be something like this after the tab's markup has printed (untested):

document.querySelector( '#tab-title-wptricksdk' ).setAttribute( 'id', 'wptricksdk' );

Note that this may break WooCommerce's JavaScript functionality.