WooCommerce has 3 standard product tabs:
1. Description Tab including your long product description
2. Additional information showing your product attributes
3. Reviews displaying customers reviews to your product
Add a custom tab
If you know the PHP and WordPress you can develop your solution to add custom tabs to your products. Simply set up a child theme if you do not have one, then go into your functions.php file and start the job. The WooCommerce offers a custom filter hook to add its tabs with the name woocommerce_product_tabs.
For example, we are going to add a new tab called “Shipping & Delivery Times”. With this, we want to give the customer more information about the shipping process as when does my package arrives or what transport companies are used.
/** * Add a custom product data tab */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 echo '<h2>New Product Tab</h2>'; echo '<p>Here\'s your new product tab.</p>'; }
Note: Most important is the title, the priority, and the callback function. If you want to change the position of the tab, e.g. make it the first tab, change the priority to 1.
Now each product contains this tab. We can also remove tabs or rename existing ones.
Removing Tabs
Use the following snippet to remove specific tabs.
/** * Remove product data tabs */add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_remove_product_tabs( $tabs ) { unset( $tabs['description'] ); // Remove a description tab unset( $tabs['additional_information'] ); // Remove a additional information tab return $tabs; }
Renaming Tabs
Use the following snippet to rename tabs.
/** * Rename product data tabs */add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 ); function woo_rename_tabs( $tabs ) { $tabs['description']['title'] = __( 'More Information' ); // Rename a description tab $tabs['reviews']['title'] = __( 'Ratings' ); // Rename a reviews tab $tabs['additional_information']['title'] = __( 'Product Data' ); // Rename a additional information tab return $tabs; }
Re-ordering Tabs
Use the following snippet to change a tab order.
/** * Reorder product data tabs */add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 ); function woo_reorder_tabs( $tabs ) { $tabs['reviews']['priority'] = 5; // Reviews first $tabs['description']['priority'] = 10; // Description second $tabs['additional_information']['priority'] = 15; // Additional information third return $tabs; }
Customize a tab
The following snippet will replace a description tab with a custom function.
/** * Customize product data tabs */add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 ); function woo_custom_description_tab( $tabs ) { $tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Custom description callback return $tabs; } function woo_custom_description_tab_content() { echo '<h2>Custom Description</h2>'; echo '<p>Here\'s a custom description</p>'; }
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular