{"id":93222,"date":"2017-08-18T15:38:01","date_gmt":"2017-08-18T15:38:01","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=93222"},"modified":"2024-04-15T06:00:44","modified_gmt":"2024-04-15T06:00:44","slug":"woocommerce-add-custom-settings-tab","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/","title":{"rendered":"WooCommerce Add Custom Settings Tab"},"content":{"rendered":"

WooCommerce Add Custom Settings Tab – In this blog we see how we can add custom tabs to WooCommerce settings page. When we work with WooCommerce Plugins<\/a>, sometime we need to add some custom settings.<\/p>\n

So, it will be good as well as conceptual that we put those settings with default WooCommerce Settings.<\/p>\n

We can use the hook ‘woocommerce_settings_tabs’\u00a0which is provided by WooCommerce and perform action on this hook.<\/p>\n

add_action( 'woocommerce_settings_tabs', 'wk_add_custom_setting_tab' );<\/pre>\n
Now, in the callback function of above action, we add the link for our custom tab –<\/p>\n
function wk_add_custom_setting_tab() {\n   \/\/link to custom tab\n   $current_tab = ( $_GET['tab'] == 'custom' ) ? 'nav-tab-active' : '';\n   echo '<a href=\"admin.php?page=wc-settings&amp;tab=custom\" class\"nav-tab '.$current_tab.'\">'.__( \"Custom\", \"domain\" ).'<\/a>';\n}<\/pre>\n
In above function, $current_tab variable used to display tab as active when selected. Here, we use name ‘custom’ for tab, it’s just an example, we can use any name here according to need.<\/p>\n
Now, we see how we can add content to this custom settings page. For this we used hook ‘woocommerce_settings_{tab_name}’ –<\/p>\n
add_action( 'woocommerce_settings_custom', 'wk_custom_tab_content' );<\/pre>\n
\n
Note – In woocommerce_settings_{tab_name} hook, must contain the tab name in place of {tab_name} using which we create our custom tab in first function.<\/div>\n<\/div>\n
Now, we add content to the page using callback function of above action –<\/p>\n
function wk_custom_tab_content() {\n   \/\/ content\n}<\/pre>\n
So, in this way we can add custom tabs to WooCommerc Settings page.<\/p>\n
\n
\n
Support<\/h2>\n
For any technical assistance,\u00a0please raise<\/a>\u00a0a ticket or\u00a0reach\u00a0us by email at\u00a0support@webkul.com<\/a>. Thanks for Your Time! Have a Good Day!<\/p>\n
Also, discover various solutions to add more features and enhance your online store by visiting the\u00a0WooCommerce plugins page. Additionally, if you require expert assistance or want to develop custom unique functionality,\u00a0Hire WooCommerce Developers<\/a>\u00a0for your project.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
WooCommerce Add Custom Settings Tab – In this blog we see how we can add custom tabs to WooCommerce settings page. When we work with WooCommerce Plugins, sometime we need to add some custom settings. So, it will be good as well as conceptual that we put those settings with default WooCommerce Settings. We can […]<\/a><\/p>\n","protected":false},"author":109,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7966,1260],"tags":[1468,1258],"class_list":["post-93222","post","type-post","status-publish","format-standard","hentry","category-wordpress-woocommerce","category-wordpress","tag-woocommerce","tag-wordpress"],"yoast_head":"\nWordPress WooCommerce Add Custom Settings Tab<\/title>\n<meta name=\"description\" content=\"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.\" \/>\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-add-custom-settings-tab\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress WooCommerce Add Custom Settings Tab\" \/>\n<meta property=\"og:description\" content=\"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\" \/>\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-08-18T15:38:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T06:00:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\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-add-custom-settings-tab\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\"},\"author\":{\"name\":\"Varun Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d\"},\"headline\":\"WooCommerce Add Custom Settings Tab\",\"datePublished\":\"2017-08-18T15:38:01+00:00\",\"dateModified\":\"2024-04-15T06:00:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\"},\"wordCount\":271,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"WooCommerce\",\"wordpress\"],\"articleSection\":[\"WooCommerce\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\",\"url\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\",\"name\":\"WordPress WooCommerce Add Custom Settings Tab\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2017-08-18T15:38:01+00:00\",\"dateModified\":\"2024-04-15T06:00:44+00:00\",\"description\":\"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce Add Custom Settings Tab\"}]},{\"@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":"WordPress WooCommerce Add Custom Settings Tab","description":"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.","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-add-custom-settings-tab\/","og_locale":"en_US","og_type":"article","og_title":"WordPress WooCommerce Add Custom Settings Tab","og_description":"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.","og_url":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-08-18T15:38:01+00:00","article_modified_time":"2024-04-15T06:00:44+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.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-add-custom-settings-tab\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/"},"author":{"name":"Varun Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5f80f80fad3753d9bdfb065a31cc537d"},"headline":"WooCommerce Add Custom Settings Tab","datePublished":"2017-08-18T15:38:01+00:00","dateModified":"2024-04-15T06:00:44+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/"},"wordCount":271,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["WooCommerce","wordpress"],"articleSection":["WooCommerce","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/","url":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/","name":"WordPress WooCommerce Add Custom Settings Tab","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2017-08-18T15:38:01+00:00","dateModified":"2024-04-15T06:00:44+00:00","description":"Add custom tabs to WooCommerce Settings page along with default tabs to provide configuration fields for the custom work we want to do in WooCommerce.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/woocommerce-add-custom-settings-tab\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WooCommerce Add Custom Settings Tab"}]},{"@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\/93222","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=93222"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/93222\/revisions"}],"predecessor-version":[{"id":433197,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/93222\/revisions\/433197"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=93222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=93222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=93222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}