But now we are ready to create a custom tab! It is super-easy, guys. Well, it depends on what you are going to display inside your tab, but creating a tab, in general, is simple.
This is my tab, I use the StoreFront theme, so in your theme tabs could look another way.
And the code:
add_filter( 'woocommerce_product_tabs', 'misha_custom_tab' ); function misha_custom_tab( $tabs ) { $tabs['misha_custom_tab'] = array( 'title' => 'About Misha', 'callback' => 'misha_custom_tab_content', // the function name, which is on line 15 'priority' => 50, ); return $tabs; } function misha_custom_tab_content( $slug, $tab ) { echo '<h2>' . $tab['title'] . '</h2><p>Tab Content. You can display something in PHP here as well.</p>'; }
Read this tutorial to learn more about how to choose a priority
parameter.
A quick look on the arguments of the function:
$slug
– it ismisha_custom_tab
.$tab
– contains all the same parameters of an array on line 5.
What is the reason to put $slug
as a first argument of this function you may ask? Easy – it allows you to create multiple tabs and to use the same callback function for each of them. Just add a condition inside for each tab using $slug
argument.
Show the Tab for Certain Product Types or Specific Products Only
You can also use global $product
to create some conditions. For example you can display your tab only for certain products:
function misha_custom_tab( $tabs ) { global $product; if( $product->get_id() == 5 ) { $tabs['misha_custom_tab'] = array(
Or for specific product types only:
function misha_custom_tab( $tabs ) { global $product; if( $product->is_type( 'variable' ) ) { $tabs['misha_custom_tab'] = array(
Another post:
- Restrict file types to be uploaded WCFM Code snippet
- Make mandatory the first name and last name – WCFM registration
- Easy to add Vendor category on WCFM Dashboard – Show on the store page
- WCFM Snippet Send Vendor Bank Details to the Customer
- QUIT STEPS IN THE STORE WIZARD SETUP OF WCFM MARKETPLACE
- WooCommerce Subscription with Downloads also add shortcode to the pricing plan
- How to animate shape divider in elementor
- 5 Reasons Why You Should Not Use Nulled WordPress Themes and Plugins
- Debug WordPress, the right way
- Most common HTTP error codes explained and how do you troubleshoot them
- How to change logo color when scrolling in Elementor
- Create animated gradient background with elementor
- Introducing Elementor Blocks for Gutenberg
Check out our categories: Android Update, Elementor, flutter, Guide, Game, Plugin, Theme, webmaster, SEO, Woocommerce, WCFM