How to Add Custom Screen Option in WooCommerce?

WooCommerce is a popular e-commerce platform that allows you to create and manage online stores with ease.

While WooCommerce offers a range of customization options out of the box, there may be times when you need to extend its functionality further.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

One such customization is adding a screen option to the WooCommerce admin pages, which gives users more control over their experience. In this tutorial, we will guide you through the process of adding a screen option to WooCommerce using code.

Step 1: Create a Custom Function

To begin, we’ll create a custom function that adds the desired screen option to the WooCommerce admin pages. Open your theme’s functions.php file or create a custom plugin file to keep the modifications separate. Add the following code to the file:

function wk_add_custom_screen_option() {
    $args = array(
        'label' => 'Custom Option',
        'default' => 10,
        'option' => 'custom_option'
    );

    add_screen_option('per_page', $args);
}
add_action('admin_head', 'wk_add_custom_screen_option');

In the code above, we define a function called wk_add_custom_screen_option. Within this function, we create an array of arguments to configure the screen option. The 'label' key determines the text displayed for the option in the Screen Options menu.

The 'default' key sets the initial value of the option, and the 'option' key specifies the name of the option to be saved.

The add_screen_option function is then used to add the screen option to the per_page section.

Step 2: Modify the WooCommerce Admin Page

Now that we have our custom function in place, we can modify the WooCommerce admin page where we want to add the screen option. For example, let’s say we want to add the screen option to the product listing page.

Log in to your WordPress admin dashboard.
Navigate to the “Products” menu and click on “All Products”.
On the product listing page, locate the “Screen Options” tab in the top right corner.
Click on the “Screen Options” tab to reveal the options panel.
You should now see a checkbox labeled “Custom Option” (or the label you defined in the code).
Check the checkbox to enable the screen option.

Once the screen option is enabled, you’ll notice a new input field where you can specify a value. This value will be saved and used within the WooCommerce admin page.

Step 3: Save the Screen Option Value

To ensure that the screen option value is saved and can be utilized in your code, we need to add a filter hook. Add the following code to your functions.php file or custom plugin file:

function wk_save_custom_screen_option($status, $option, $value) {
    if ($option === 'custom_option') {
        update_option('custom_option_value', $value);
    }
    return $status;
}
add_filter('set-screen-option', 'wk_save_custom_screen_option', 10, 3);

In the code snippet above, we define a function named wk_save_custom_screen_option as the filter callback. This function checks if the option name matches ‘custom_option’ (the same as defined in the previous step) and saves the value to the WordPress options table using the update_option function.

You can modify this logic to suit your specific needs.

Now we’ll see how the screen options will look on the page we created. Please check below –