Add custom date range fields to WooCommerce Admin single products

Question

How to add custom date range fields on Admin single products just like the existing one for Woocommerce product sale price (see screenshot below)?

I tried to code that without success, and I haven't be able to find any useful tutorial or documentation for it.

Answer 1

To add date range custom fields to Admin single product general settings just like for product sale price, use the following:

// Display Custom Admin Product Fields
add_action( 'woocommerce_product_options_general_product_data', 'add_admin_product_custom_general_fields' );
function add_admin_product_custom_general_fields() {
    global $product_object;

    echo '<div class="options_group custom_dates_fields">
        <p class="form-field custom_date_from_field" style="display:block;">
            <label for="_custom_date_from">' . esc_html__( 'Custom date range', 'woocommerce' ) . '</label>
            ' . wc_help_tip( __("This is a description for that date range fields (in a help tip)…", "woocommerce") ) . '
            <input type="text" class="short" name="_custom_date_from" id="_custom_date_from" value="' . esc_attr( $product_object->get_meta('_custom_date_from') ) . '" placeholder="' . esc_html( _x( 'From&hellip;', 'placeholder', 'woocommerce' ) ) . ' YYYY-MM-DD" maxlength="10" pattern="' . esc_attr( apply_filters( 'woocommerce_date_input_html_pattern', '[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])' ) ) . '" />
        </p>
        <p class="form-field custom_date_to_field" style="display:block;">
            <input type="text" class="short" name="_custom_date_to" id="_custom_date_to" value="' . esc_attr( $product_object->get_meta('_custom_date_to') ) . '" placeholder="' . esc_html( _x( 'To&hellip;', 'placeholder', 'woocommerce' ) ) . '  YYYY-MM-DD" maxlength="10" pattern="' . esc_attr( apply_filters( 'woocommerce_date_input_html_pattern', '[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])' ) ) . '" />
    </div>';

    ?>
    <script>
    jQuery( function($){
        $( '.custom_dates_fields' ).each( function() {
            $( this ).find( 'input' ).datepicker({
                defaultDate: '',
                dateFormat: 'yy-mm-dd',
                numberOfMonths: 1,
                showButtonPanel: true,
                onSelect: function() {
                    var datepicker = $( this );
                        option         = $( datepicker ).next().is( '.hasDatepicker' ) ? 'minDate' : 'maxDate',
                        otherDateField = 'minDate' === option ? $( datepicker ).next() : $( datepicker ).prev(),
                        date           = $( datepicker ).datepicker( 'getDate' );

                    $( otherDateField ).datepicker( 'option', option, date );
                    $( datepicker ).change();
                }
            });
            $( this ).find( 'input' ).each( function() { date_picker_select( $( this ) ); } );
        });
    })
    </script>
    <?php
}

// Save Custom Admin Product Fields values
add_action( 'woocommerce_admin_process_product_object', 'save_admin_product_custom_general_fields_values' );
function save_admin_product_custom_general_fields_values( $product ){
    if( isset($_POST['_custom_date_from']) && isset($_POST['_custom_date_to']) ) {
        $product->update_meta_data( '_custom_date_from', esc_attr($_POST['_custom_date_from']) );
        $product->update_meta_data( '_custom_date_to', esc_attr($_POST['_custom_date_to']) );
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.