php - 将自定义日期范围字段添加到 WooCommerce Admin 单个产品

Question

如何在管理单品上添加自定义日期范围字段，就像现有的 Woocommerce 产品销售价格一样（见下面的截图）？

我尝试对其进行编码但没有成功，而且我找不到任何有用的教程或文档。

标签： phpjquerywordpresswoocommercedatepicker

Answer 1

要将日期范围自定义字段添加到管理单个产品常规设置，就像产品销售价格一样，请使用以下内容：

// 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)…&quot;, "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']) );
    }
}

代码位于活动子主题（或活动主题）的 functions.php 文件中。测试和工作。