{"id":95280,"date":"2017-09-07T15:07:38","date_gmt":"2017-09-07T15:07:38","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=95280"},"modified":"2024-07-08T10:35:27","modified_gmt":"2024-07-08T10:35:27","slug":"woocommerce-custom-tab-product-edit-page","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/","title":{"rendered":"WooCommerce Custom Tab Product Edit Page"},"content":{"rendered":"

WooCommerce Custom Tab Product Edit Page – In this post we see how we can add custom tab to WooCommerce product edit option tab on product edit page at admin-end.<\/p>\n

This can be very useful when we want additional data with the product. Simply, we can add custom tab according to need and perform the intended task.<\/p>\n

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers<\/a> for your project.<\/p>\n

WooCommerce provides various hooks for various tasks\/actions to hook our own content with existing content as WordPress do. So, for this also we gonna use hook ‘woocommerce_product_data_tabs’ and add filter to this hook.<\/p>\n

Let’s start with some code –<\/p>\n

<?php\n\nadd_filter( 'woocommerce_product_data_tabs', 'wk_custom_product_tab', 10, 1 );\n\n?><\/pre>\n
In above line of code, we add filter to ‘woocommerce_product_data_tabs’ hook. Second parameter is the callback function for this filter, third is the priority, fourth-one is the number of accepted arguments in callback.<\/p>\n
Now, \u00a0add custom tab information in the callback of above filter –<\/p>\n
function wk_custom_product_tab( $default_tabs ) {\n    $default_tabs['custom_tab'] = array(\n        'label'   =>  __( 'Custom Tab', 'domain' ),\n        'target'  =>  'wk_custom_tab_data',\n        'priority' => 60,\n        'class'   => array()\n    );\n    return $default_tabs;\n}<\/pre>\n
In above function, we add custom tab information to default tabs array with ‘custom_tab’ id.<\/p>\n
The arguments in the above array are required as label defines the name of tab, target defines using which content will add to this tab, priority defines the position of this tab in the list of default tabs, class contains the html class if want to add any.<\/p>\n
Using above code, custom tab will add to product edit page. Now, to add content to this tab we’ll use one other hook ‘woocommerce_product_data_panels’ and add action to this hook –<\/p>\n
<?php\n\nadd_action( 'woocommerce_product_data_panels', 'wk_custom_tab_data' );\n\nfunction wk_custom_tab_data() {\n   echo '<div id=\"wk_custom_tab_data\" class=\"panel woocommerce_options_panel\">\/\/ add content here<\/div>';\n}<\/pre>\n
In above code, id of div will be same as of target defined while creating tab.<\/p>\n
The custom tab on product edit page will look as shown in below screenshot –<\/p>\n
\"WooCommerce<\/a><\/p>\n
For any technical assistance kindly <\/span>raise a ticket<\/a>\u00a0or\u00a0reach\u00a0us by email at\u00a0support@webkul.com.<\/span><\/p>\n
\n
\n
Thanks for Your Time!\u00a0 Have a Good Day!<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
WooCommerce Custom Tab Product Edit Page – In this post we see how we can add custom tab to WooCommerce product edit option tab on product edit page at admin-end. This can be very useful when we want additional data with the product. Simply, we can add custom tab according to need and perform the […]<\/a><\/p>\n","protected":false},"author":109,"featured_media":95290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1773,1260],"tags":[1468,1258],"class_list":["post-95280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","category-wordpress","tag-woocommerce","tag-wordpress"],"yoast_head":"\nWooCommerce Custom Tab Product Edit Page Admin<\/title>\n<meta name=\"description\" content=\"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Custom Tab Product Edit Page Admin\" \/>\n<meta property=\"og:description\" content=\"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-07T15:07:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-08T10:35:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Varun Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/imVvashistha\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Varun Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\"},\"author\":{\"name\":\"Varun Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d\"},\"headline\":\"WooCommerce Custom Tab Product Edit Page\",\"datePublished\":\"2017-09-07T15:07:38+00:00\",\"dateModified\":\"2024-07-08T10:35:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\"},\"wordCount\":326,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png\",\"keywords\":[\"WooCommerce\",\"wordpress\"],\"articleSection\":[\"WooCommerce\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\",\"url\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\",\"name\":\"WooCommerce Custom Tab Product Edit Page Admin\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png\",\"datePublished\":\"2017-09-07T15:07:38+00:00\",\"dateModified\":\"2024-07-08T10:35:27+00:00\",\"description\":\"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png\",\"width\":825,\"height\":260,\"caption\":\"WooCommerce Custom Tab Product Edit Page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce Custom Tab Product Edit Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d\",\"name\":\"Varun Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Varun Kumar\"},\"description\":\"Inquisitive.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/imVvashistha\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/varun-kumar286\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WooCommerce Custom Tab Product Edit Page Admin","description":"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/","og_locale":"en_US","og_type":"article","og_title":"WooCommerce Custom Tab Product Edit Page Admin","og_description":"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.","og_url":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-09-07T15:07:38+00:00","article_modified_time":"2024-07-08T10:35:27+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png","type":"image\/png"}],"author":"Varun Kumar","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/imVvashistha","twitter_site":"@webkul","twitter_misc":{"Written by":"Varun Kumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/"},"author":{"name":"Varun Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d"},"headline":"WooCommerce Custom Tab Product Edit Page","datePublished":"2017-09-07T15:07:38+00:00","dateModified":"2024-07-08T10:35:27+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/"},"wordCount":326,"commentCount":5,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png","keywords":["WooCommerce","wordpress"],"articleSection":["WooCommerce","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/","url":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/","name":"WooCommerce Custom Tab Product Edit Page Admin","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png","datePublished":"2017-09-07T15:07:38+00:00","dateModified":"2024-07-08T10:35:27+00:00","description":"WooCommerce Custom Tab Product Edit Page. Add custom tab on woocommerce product edit page at admin end with default tabs of product edit options.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/09\/woocommerce-code-snippet.png","width":825,"height":260,"caption":"WooCommerce Custom Tab Product Edit Page"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/woocommerce-custom-tab-product-edit-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WooCommerce Custom Tab Product Edit Page"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d","name":"Varun Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bf364f755500f5f58d13d0fddbeb303ae75529a58e113c5638c7d20ff48b18d?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Varun Kumar"},"description":"Inquisitive.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/imVvashistha"],"url":"https:\/\/webkul.com\/blog\/author\/varun-kumar286\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/95280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/109"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=95280"}],"version-history":[{"count":13,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/95280\/revisions"}],"predecessor-version":[{"id":451865,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/95280\/revisions\/451865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/95290"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=95280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=95280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=95280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}