Create Custom Menu in WordPress Dashboard
Complete tutorial on create custom menu in wordpress dashboard. Discover practical examples, implementation tips, and expert advice for WordPress and WooCo
Read More โCreate custom product tabs using woocommerce_product_tabs filter modifying tabs array with title, callback function, and priority parameters. Default tabs include Description priority 10, Additional Information priority 20, and Reviews priority 30, position custom tabs between or after using priority numbers. Define callback function rendering tab content with slug and tab parameters, display custom HTML, product specifications, size guides, or warranty information, conditionally show tabs for specific product IDs using get_id method, display tabs only for certain product types like variable products with is_type check, change default tab positions with priority modifications, and organize product information with multiple custom tabs enhancing product pages.
This post is regarding how we can add custom tabs on a product page on the front-end. These tabs are additional to the default ‘Description’, ‘Reviews’ and ‘Additional information’ tabs that are available by default. The default tabs in WooCommerce have the following priorities:
For adjusting your product in between them we need to give priorities in between.
function ChangeTabPosition( $tabs ) {
if ( isset( $tabs['description'] ) ) {
$tabs['description']['priority'] = 29;
}
if ( isset( $tabs['additional_information'] ) ) {
$tabs['additional_information']['priority'] = 10;
}
return $tabs;
}
add_filter('woocommerce_product_tabs','ChangeTabPosition' );
For Adding Product Tab on Product Page we have to define tab and it's callback in woocommerce hook 'woocommerce_product_tabs'. The ‘woocommerce_product_tabs’ filter provided by WooCommerce should be used for adding a custom tab to a single product page in WooCommerce. The code should be added to the functions.php file of your theme.
Example :
Before
function AddNewTab( $tabs ) {
$tabs['my_new_tab'] = array(
'title' => 'New Tab',
'callback' => 'new_custom_tab_content',
'priority' => 51,
);
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab' );
function new_custom_tab_content($slug,$tab) {
echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}
After We can also do this For a Specific Product Or For Specific Product Type.
Example : For Specific Product
function AddNewTab( $tabs ) {
global $product;
if( $product->get_id() == 786 ) {
$tabs['my_new_tab'] = array(
'title' => 'New Tab',
'callback' => 'new_custom_tab_content',
'priority' => 51,
);
}
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab');
function new_custom_tab_content($slug,$tab) {
echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}
Example : For Specific Product Type
function AddNewTab( $tabs ) {
global $product;
if( $product->is_type( 'variable' ) ) {
$tabs['my_new_tab'] = array(
'title' => 'New Tab',
'callback' => 'new_custom_tab_content',
'priority' => 51,
);
}
return $tabs;
}
add_filter('woocommerce_product_tabs','AddNewTab');
function new_custom_tab_content($slug,$tab) {
echo '<h3>' . $tab['title'] . '</h3><p>Add Your Content.</p>';
}
Search our archives or reach out to our team for solutions and expert advice.