{"id":700,"date":"2018-11-20T12:00:34","date_gmt":"2018-11-20T11:00:34","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?p=700"},"modified":"2020-06-20T12:28:39","modified_gmt":"2020-06-20T10:28:39","slug":"custom-woocommerce-product-tabs","status":"publish","type":"post","link":"https:\/\/www.welaunch.io\/en\/2018\/11\/custom-woocommerce-product-tabs\/","title":{"rendered":"How to Create Custom WooCommerce Product Tabs"},"content":{"rendered":"

Your online shop customers need information \u2013 the more the better. Thanks to current eCommerce solution WooCommerce for WordPress<\/a> you can already add additional information to your products. Beside the standard things like name, price, image or short description you can add up to 3 standard product tabs:<\/p>\n

    \n
  1. Description Tab including your long product description<\/li>\n
  2. Additional information showing your product attributes<\/li>\n
  3. Reviews displaying customers reviews to your product<\/li>\n<\/ol>\n

    But what if you need more custom WooCommerce product tabs?<\/strong> Then you have two options. Either you are able to program in PHP and develop some code, that you can place into your functions.php of your child theme. Or you get yourself a plugin for WooCommerce which lets create tabs as you want without custom programming. We show you how you can add custom product tabs in both ways.<\/p>\n

    Adding Custom tabs using PHP<\/h2>\n

    If you are familiar with PHP and WordPress you can develop your own solution to add custom tabs to your products. Simply setup a child theme if you do not have one, then go into your functions.php file and start the job. The WooCommerce core offers a custom filter hook<\/a> to add own tabs with the name\u00a0woocommerce_product_tabs. You can hook into this filter with ease.<\/p>\n

    As an 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 like when does my package arrive or what transport companies are used.<\/p>\n

    We start by hooking into the filter:<\/p>\n

    add_filter( 'woocommerce_product_tabs', 'my_shipping_tab' );\r\nfunction my_shipping_tab( $tabs ) {\r\n    \/\/ Adds the new tab\r\n    $tabs = array(\r\n        'title'     => __( 'Shipping & Delivery', 'child-theme' ),\r\n        'priority'  => 50,\r\n        'callback'  => 'my_shipping_tab_callback'\r\n    );\r\n    return $tabs;\r\n}<\/pre>\n
    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. The callback is the function we define now. This returns the content inside the tab:<\/p>\n
    function my_shipping_tab_callback() {\r\n\r\n\t\/\/ The new tab content\r\n\techo '<h2>Shipping & Delivery<\/h2>';\r\n\techo '<p>We ship for free within USA using UPS.<\/p>';\r\n\r\n}<\/pre>\n
    That’s it – now each product contains this tab. You can also remove tabs or rename existing ones<\/a>.<\/p>\n
    But what if you need product specific or category based WooCommerce tabs<\/strong>? For example you need to show a sizing guide but only for products within the category clothing. Then you should take a plugin!<\/p>\n
    Create WooCommerce Category Tabs<\/h2>\n
    Thanks to the WooCommerce Ultimate Custom Product Tabs Plugin<\/a> you can create tabs the way you want:<\/p>\n