- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
WooCommerce. How to manage tabs on the product page
July 13, 2015
This tutorial will show you how to manage tabs on the product page in Woocommerce.
WooCommerce. How to manage tabs on the product pageOn the product page you can usually find tabs. In order to edit the existing tabs, you can click edit the product button:
Description tab displays product description that is set in the content section of the product;
Video tab is set with the help of Custom Field called video link – you can find it in the custom fields block;
Reviews tab displays reviews – you can easily find and manage them in the very bottom on the product page in your dashboard:
In order to add new tab, you should do the following:
Reach files on the server via FTP or hosting cPanel file manager;
Open custom-function.php file located in wp-content/themex/themeXXX/includes folder;
Add the following code to the bottom of the file right before the closing PHP tag:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' ); function woo_new_product_tab( $tabs ) { // Adds the new tab $tabs['test_tab'] = array( 'title' => __( 'New Product Tab', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_new_product_tab_content' ); return $tabs; } function woo_new_product_tab_content() { // The new tab content global $post; $custom = get_post_meta( $post->ID, 'custom_text', true ); echo $custom; }
Save changes in the file;
Make sure the modified file has been uploaded to the server.
New tab content should be added as a custom filed that was created with the php code we added into custom-function.php file:
// The new tab content global $post; $custom = get_post_meta( $post->ID, 'custom_text', true ); echo $custom; }
Where ‘custom_text’ is custom field title.
In order to add the text into new product tab, you should do the following:
Go to edit the product;
In Add New Custom Field block, please use Enter new button to add new custom filed:
Type the custom field title added in php code – in our case it is custom_text;
You can find it in the drop down:
Type your custom text:
Update the product to save changes:
Feel free to check the detailed video tutorial below:
WooCommerce. How to manage tabs on the product page