Javascript WooCommerce产品中的动态预计交货日期小部件

我使用代码片段添加了一个估计交付日期小部件.我想要它显示不同产品的不同发货和交货日期.我可以在WooCommerce产品编辑器上添加自定义域，以便 Select 天数吗？

以下是代码:

add_action( 'woocommerce_after_add_to_cart_form', 
'delivery_status_widget', 40 );
function delivery_status_widget() {
?>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<style>
    .delivery-status-widget {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 13px; 
        margin-bottom: 10px;
        line-height: 15px;
        padding: 14px 10px;
        color: #121212;
        background-color: white;
        border: 1px dotted black;
        color: #121212;
        border-radius: 6px;
    }
    .delivery-status-widget .status {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
    }
    .delivery-status-widget .status-icon {
        font-size: 24px;
        margin-bottom: 5px;
        color: #121212!important;
    }
    .delivery-status-widget .status-text {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .delivery-status-widget .status-date {
        font-size: 12px;
        color: gray;
    }
   </style>

<div class="delivery-status-widget">
    <div class="status">
        <i class="fas fa-shopping-bag status-icon" style="color: 
   gray;"></i>
        <div class="status-text">Ordered</div>
        <div class="status-date" id="order-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-shipping-fast status-icon" style="color: 
grey;"></i>
        <div class="status-text">Shipped</div>
        <div class="status-date" id="ship-date"></div>
    </div>
    <div class="status">
        <i class="fas fa-angle-double-right"></i>
    </div>
    <div class="status">
        <i class="fas fa-box-open status-icon" style="color: 
grey;"></i>
        <div class="status-text">Delivered</div>
        <div class="status-date" id="delivery-date"></div>
    </div>
</div>

<script>
    jQuery(document).ready(function($) {
        var today = new Date();

        // Ordered
        var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("order-date").innerHTML = orderedDate;

        // Shipped
        var shipDate = new Date(today);
        shipDate.setDate(today.getDate() + 2);
        shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("ship-date").innerHTML = shipDate;

        // Delivered
        var deliveryDate = new Date(today);
        deliveryDate.setDate(today.getDate() + 6);
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("delivery-date").innerHTML = deliveryDate;
    });
</script>
<?php
}

我try 使用此代码添加自定义字段，它添加了以下字段:

function add_custom_fields() {
woocommerce_wp_text_input(
    array(
        'id'          => '_shipping_days',
        'label'       => 'Shipping Days',
        'desc_tip'    => true,
        'description' => 'Enter the number of days required for 
shipping',
        'wrapper_class' => 'form-row form-row-first',
    )
);

woocommerce_wp_text_input(
    array(
        'id'          => '_delivery_days',
        'label'       => 'Delivery Days',
        'desc_tip'    => true,
        'description' => 'Enter the number of days required for 
delivery',
        'wrapper_class' => 'form-row form-row-last',
    )
);
}
add_action( 'woocommerce_product_options_general_product_data', 
'add_custom_fields' );


function save_custom_fields( $post_id ) {
$shipping_days = isset( $_POST['_shipping_days'] ) ? 
sanitize_text_field( $_POST['_shipping_days'] ) : '';
$delivery_days = isset( $_POST['_delivery_days'] ) ? 
sanitize_text_field( $_POST['_delivery_days'] ) : '';

update_post_meta( $post_id, '_shipping_days', $shipping_days );
update_post_meta( $post_id, '_delivery_days', $delivery_days );
}
add_action( 'woocommerce_process_product_meta', 'save_custom_fields' );

我为上面的定制字段try 了这个脚本(但它根本没有显示发货和交付日期，它是空的):

jQuery(document).ready(function($) {
var today = new Date();

// Ordered
var orderedDate = today.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("order-date").innerHTML = orderedDate;

// Shipped
var shipDate = new Date(today);
shipDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value('_shipping_days')));
shipDate = shipDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("ship-date").innerHTML = shipDate;

// Delivered
var deliveryDate = new Date(today);
deliveryDate.setDate(today.getDate() + parseInt(woocommerce_admin_meta_boxes.get_meta_value('_delivery_days')));
deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
document.getElementById("delivery-date").innerHTML = deliveryDate;
});