By default, WooCommerce only supports basic tabs like description, extra info, reviews.
So if you have a need to create a new tab, how to do it? In this article I will guide you to do that.
Create a new tab for the product page
Please add the code below to the file functions.php of the theme or child theme.
add_filter( 'woocommerce_product_tabs', 'hk_custom_tab' );
function hk_custom_tab( $tabs ) {
$tabs['hk_custom_tab'] = array(
'title' => 'Học WordPress',
'callback' => 'hk_custom_tab_content',
'priority' => 50,
);
return $tabs;
}
function hk_custom_tab_content() {
echo 'Bạn có thể hiển thị thông tin ở đây';
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span>
</div>
Where title is the title of the tab. And the content of the tab will be customized in the function hk_custom_tab_content .
The priority value is the priority, if you want this new tab to be displayed first, change 50 to 5 .
Here is the result you will get:
Create new tab for specific product
You can add conditions to show tabs for certain products.
add_filter( 'woocommerce_product_tabs', 'hk_custom_tab' );
function hk_custom_tab( $tabs ) {
global $product;
if ( $product->get_id() == 68 ) {
$tabs['hk_custom_tab'] = array(
'title' => 'Học WordPress',
'callback' => 'hk_custom_tab_content',
'priority' => 50,
);
}
return $tabs;
}
function hk_custom_tab_content() {
echo 'Bạn có thể hiển thị thông tin ở đây...';
}
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span>
</div>
You can also use the global variable $product to get the product ID. From there, use the if function to check the condition, if your condition is satisfied, the new custom tab will be displayed.
Please replace your product ID of 68 with the product ID suitable for your website.
Epilogue
I hope the above article will help you to add a new tab in the WooCommerce product page.
If this article was helpful and saved your time, please help me share it. Also if you are interested in similar topics, read other WooCommerce Tutorials articles and follow Fanpage so you don’t miss new posts from me.
