how to create a custom setting tab in WooCommerce?
Published: 2023-12-18 07:47:06

Creating a custom settings tab in WooCommerce involves a bit of PHP coding, as WooCommerce provides hooks and functions for extending its settings. Below is a basic outline of the steps you can follow to create a custom settings tab:

**Step 1: Set up your WordPress plugin**

1. **Create a new directory for your plugin:**
   In your WordPress plugins directory (usually wp-content/plugins/), create a new directory for your plugin.

2. **Create the main plugin file:**
   Inside your plugin directory, create a main PHP file (e.g., custom-woocommerce-tab.php).

3. **Add plugin header:**
   In your main plugin file, start with the plugin header, including the plugin name, description, and other details.

   ```php
   /*
   Plugin Name: Custom WooCommerce Tab
   Description: Add a custom settings tab in WooCommerce.
   Version: 1.0
   Author: Your Name
   */

   // Your code will go here
   ```

**Step 2: Creating a class**

```php
/**
 * Custom WooCommerce Tab Class
 */
class Wooprint_Wc_Settings {


}

// Instantiate the class
new Wooprint_Wc_Settings();
```

In this class-based example:

- The class is instantiated at the end, which automatically sets up the hooks and initializes the functionality.

This class encapsulates the functionality related to your custom WooCommerce tab, providing a more structured and organized way to handle your code.

**Step 3: Add the custom settings tab**

```php
/**
 * Custom WooCommerce Tab Class
 */
class Wooprint_Wc_Settings {
		/**
		 * string tab id;
		 */
		public $tab_id;

		/**
		 * Run all the actions and filter here.
		 */
		public function __construct() {
			$this->tab_id = 'wooprint_tab';
			add_filter( 'woocommerce_settings_tabs_array', array( $this, 'wooprint_add_new_tab' ), 50 );
		}

				/**
		 * Add a new tab to the WooCommerce settings tabs array
		 *
		 * @param array $tabs all tabs.
		 * @return array
		 */
		public function wooprint_add_new_tab( $tabs ) {
			$tabs[ $this->tab_id ] = __( 'Wooprint Tab', 'wooprint' );
			return $tabs;
		}

}

// Instantiate the class
new Wooprint_Wc_Settings();
```
**Step 4: Add the custom section inside the custom settings tab**

```php
/**
 * Custom WooCommerce Tab Class
 */
class Wooprint_Wc_Settings {
		/**
		 * string tab id;
		 */
		public $tab_id;

		/**
		 * Run all the actions and filter here.
		 */
		public function __construct() {
			$this->tab_id = 'wooprint_tab';
			add_filter( 'woocommerce_settings_tabs_array', array( $this, 'wooprint_add_new_tab' ), 50 );
			add_action( 'woocommerce_sections_' . $this->tab_id, array( $this, 'wooprint_add_new_section' ) );
		}

		/**
		 * Add a new tab to the WooCommerce settings tabs array
		 *
		 * @param array $tabs
		 * @return array
		 */
		public function add_wooprint_tab( $tabs ) {
			$tabs[ $this->tab_id ] = __( 'Wooprint Tab', 'wooprint' );
			return $tabs;
		}

		/**
		 * Add new section inside tab.
		 *
		 * @return void
		 */
		public function wooprint_add_new_section() {
			global $current_section;

			$sections      = array(
				''                 => __( 'General Settings', 'wooprint' ),
				'invoice_settings' => __( 'Invoice Settings', 'wooprint' ),
			);
			$sections_keys = array_keys( $sections );

			echo '<ul class="subsubsub">';

			foreach ( $sections as $id => $label ) {
				$url = add_query_arg(
					array(
						'page'    => 'wc-settings',
						'tab'     => $this->tab_id,
						'section' => $id,
					),
					admin_url( 'admin.php' )
				);

				$current = $current_section === $id ? 'current' : '';

				$separator = end( $sections_keys ) === $id ? '' : '|';

				echo '<li><a href="' . esc_url( $url ) . '" class="' . esc_html( $current ) . '">' . esc_attr( $label ) . '</a> ' . esc_attr( $separator ) . ' </li>';
			}

			echo '</ul><br class="clear" />';
		}

}

// Instantiate the class
new Wooprint_Wc_Settings();
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb6fuqwmhz3xleghxbho.png)


**Step final: Test your custom tab**

Go to WooCommerce > Settings, and you should see your custom tab. You can then configure and save your custom settings.

Note: This is a basic example, and you may need to enhance it based on your specific needs. You can refer to the [WooCommerce documentation](https://docs.woocommerce.com/) for more details on available hooks and functions.