This article will teach us how to add custom product tabs to WooCommerce shop pages. The process is quite easy and anyone can do it.
Before jumping into the main process, let’s learn more about the WooCommerce product tab.
What is a Product Tab in WooCommerce?
WooCommerce Product Tabs are fields of information sorted by individual name or category. For example, three tabs default with the WooCommerce plugin: Description, Additional Information, and Reviews. The Description tab contains product details such as product name, category, specification, etc. Similarly, Additional Information and Reviews tabs contain other relevant information.
How to add custom product tabs to WooCommerce without a plugin?
To add custom product tabs in WooCommerce without a plugin, you need to use a custom code snippet. So, we have created a ready-to-go code snippet to add two extra tabs to the product page.
// Add custom Meta box to admin products pages
add_action( 'add_meta_boxes', 'create_product_technical_specs_meta_box' );
function create_product_technical_specs_meta_box() {
add_meta_box(
'custom_product_meta_box',
__( 'Technical specs', 'cmb' ),
'add_custom_content_meta_box',
'product',
'normal',
'default'
);
}
// Custom metabox content in admin product pages
function add_custom_content_meta_box( $post ){
$product = wc_get_product($post->ID);
$content = $product->get_meta( '_technical_specs' );
echo '<div class="product_technical_specs">';
wp_editor( $content, '_technical_specs', ['textarea_rows' => 10]);
echo '</div>';
}
// Save WYSIWYG field value from product admin pages
add_action( 'woocommerce_admin_process_product_object', 'save_product_custom_wysiwyg_field', 10, 1 );
function save_product_custom_wysiwyg_field( $product ) {
if ( isset( $_POST['_technical_specs'] ) )
$product->update_meta_data( '_technical_specs', wp_kses_post( $_POST['_technical_specs'] ) );
}
// Add "technical specs" product tab
add_filter( 'woocommerce_product_tabs', 'add_technical_specs_product_tab', 10, 1 );
function add_technical_specs_product_tab( $tabs ) {
$tabs['test_tab'] = array(
'title' => __( 'More Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'display_technical_specs_product_tab_content'
);
return $tabs;
}
// Display "technical specs" content tab
function display_technical_specs_product_tab_content() {
global $product;
echo '<div class="wrapper-technical_specs">' . $product->get_meta( '_technical_specs' ) . '</div>';
}Copy the code, go to WordPress Dashboard > Appearance > Theme File Editor, and paste it to the bottom of the function.php. Hit the Update File button and you are done.
However, you can change the tab title as you need.
