WooCommerce custom settings tab validation

OhMad
December 17, 2019
159 views
0 votes
2 Answers

When using a custom settings tab in WooCommerce, like:

add_filter('woocommerce_settings_tabs_array', 'add_my_custom_tab', 50);

function add_my_custom_tab($settings_tabs) {
    $settings_tabs['my_custom_tab'] = __('My Custom Tab', 'my-custom-tab');
    return $settings_tabs;
}

add_action('woocommerce_settings_tabs_my_custom_tab', 'my_custom_tab');

function my_custom_tab() {
    woocommerce_admin_fields(get_custom_settings());
}

add_action('woocommerce_update_options_my_custom_tab', 'update_my_custom_tab_settings');

function update_my_custom_tab_settings() {
    woocommerce_update_options(get_custom_settings());
}

function get_custom_settings() {
    $settings = array(
        'section_title' => array(
            'name' => __('Custom Options', 'woocommerce-my-custom-tab'),
            'type' => 'title',
            'desc' => '',
            'id' => 'wc_custom_tab'
        ),
        'example_input' => array(
            'name' => __('My Input', 'woocommerce-my-custom-tab'),
            'type' => 'text',
            'desc' => '',
            'id' => 'wc_my_input'
        ),
        'section_end' => array(
            'type' => 'sectionend',
            'id' => 'wc_section_end'
        )
    );
    return apply_filters('wc_my_custom_tab_settings', $settings);
}

How can I perform custom validation on the example_input field before allowing it to save to the database, and, if needed, throw an error to tell the user what’s wrong with the input?

Answers

You can make field required by just adding the html5 required attribute to the field.

'example_input' => array(
    'name' => __('My Input', 'woocommerce-my-custom-tab'),
    'type' => 'text',
    'desc' => '',
    'custom_attributes' => array( 'required' => 'required' )
    'id' => 'wc_my_input'
),

But in you case if you want to display error message on field update you can do something like this. add filter woocommerce_admin_settings_sanitize_option_<option_name>

// define the woocommerce_admin_settings_sanitize_option_<option_name> callback 
function filter_woocommerce_admin_settings_sanitize_option_wc_my_input( $value, $option, $raw_value ) { 
    add_action( 'admin_notices', function() use($value) {
        if($value == ""){
            echo '<div id="message" class="notice notice-error is-dismissible"><p>Option is required</p></div>';    
        }
    });
    return $value; 
}; 
// add the filter 
add_filter( "woocommerce_admin_settings_sanitize_option_wc_my_input", 'filter_woocommerce_admin_settings_sanitize_option_wc_my_input', 10, 3 );

Edit

You can loop through all options like this

$options = ['wc_my_input' => 'My Input', 'other_field' => 'Other Field']; // get all the options here
foreach($options as $option_name => $option_val){
    // define the woocommerce_admin_settings_sanitize_option_$option_name callback 
    add_filter( "woocommerce_admin_settings_sanitize_option_$option_name", function($value, $option, $raw_value) use($option_val) {
        add_action( 'admin_notices', function() use($value) {
            if($value == ""){
                echo "<div id="message" class="notice notice-error is-dismissible"><p>$option_val is required</p></div>";
            }
        });
        return $value;
    }, 10, 3 ); 
}

I have tried to meet your requirement with simple filter option available in woo-commerce.

I have added only one more filter and basic login on that filter. Filter name is woocommerce_admin_settings_sanitize_option

you need to apply your logic on this filter which will do everything as per your need.

you can prevent saving of the option if there is an error by setting empty value and then show notice for that field too.

I have aded one custom attributes to do validation and the name of the attribute is ‘custom_validate’
If there is an empty field then below attributes value prevent from storing data.

'custom_attributes' => array( 
    'required' => 'required' 
)

Put whole code snippet in your functions.php and start tracing the flow. Hope you will get it

// define the woocommerce_admin_settings_sanitize_option callback 
function filter_woocommerce_admin_settings_sanitize_option( $value, $option, $raw_value ) { 

/*Try to print data as given below to study and decide logic to implement*/    

/*
    echo "<pre style='margin-left:500px'>";
    echo "Value";
    print_r($value);
    echo "</pre>";

    echo "<pre style='margin-left:500px'>";
    echo "Option";
    print_r($option);
    echo "</pre>";

    echo "<pre style='margin-left:500px'>";
    echo "Raw";
    print_r($raw_value);
    echo "</pre>";
*/

$error = false;
$message = "";
$custom_validate    = $option['custom_validate'];
$required           = $option['custom_attributes']['required'];
$name               = $option['name'];

if($custom_validate == 'yes'){
    if($required == 'required' ){
        //Do your validation here and set error notice for the same
        $message =  "<div id="message" class="notice notice-error is-dismissible"><p>$name is required</p></div>";
        $error = true;
    }   
}

/*If there is an error then empty the value and show the notice for that input*/
add_action( 'admin_notices', function() use($message) {
    if(!empty($message))
        echo $message;
});

if($error)
    return "";

/*If no error then it will return the default value*/
return $value; 
 }; 

 // add the filter 
 add_filter( 'woocommerce_admin_settings_sanitize_option', 'filter_woocommerce_admin_settings_sanitize_option', 10, 3 );


  add_filter('woocommerce_settings_tabs_array', 'add_my_custom_tab', 50);

  function add_my_custom_tab($settings_tabs) {
$settings_tabs['my_custom_tab'] = __('My Custom Tab', 'my-custom-tab');
return $settings_tabs;
}

  add_action('woocommerce_settings_tabs_my_custom_tab', 'my_custom_tab');

  function my_custom_tab() {
   woocommerce_admin_fields(get_custom_settings());
  }

  add_action('woocommerce_update_options_my_custom_tab', 'update_my_custom_tab_settings');

  function update_my_custom_tab_settings() {
   woocommerce_update_options(get_custom_settings());
 }

 function get_custom_settings() {
$settings = array(

    'section_title' => array(
        'name' => __('Custom Options', 'woocommerce-my-custom-tab'),
        'type' => 'title',
        'desc' => '',
        'id' => 'wc_custom_tab'
    ),

    'example_input' => array(
        'name' => __('My Input', 'woocommerce-my-custom-tab'),
        'type' => 'text',
        'desc' => '',

        'id' => 'wc_my_input_1',
        'custom_attributes' => array( 
                            'required' => 'required' 
                        )
    ),

    /*You can pass any number of custom attributes and based on those attribures you can develop your logic for validation*/
    /*'custom_validate' is a custom attribute that is used to identify whether i need to do custom validation or not*/
    'example_input_2' => array(
        'name' => __('My Input 2', 'woocommerce-my-custom-tab'),
        'type' => 'text',
        'desc' => '',
        'custom_validate' => 'yes',
        'id' => 'wc_my_input_2',
        'custom_attributes' => array( 
                            'required' => 'required' 
                        )
    ),

    'section_end' => array(
        'type' => 'sectionend',
        'id' => 'wc_section_end'
    )
);
return apply_filters('wc_my_custom_tab_settings', $settings);

}

Please signup or login to give your own answer.

Click here to cancel reply.