WooCommerce动态配送日期小工具：自定义字段适配问题求助

问题原因 #

你之前的JS代码错误使用了woocommerce_admin_meta_boxes.get_meta_value——这个对象和方法仅在WooCommerce后台商品编辑页面可用，前端商品详情页根本不存在该变量，导致无法获取自定义字段值，parseInt()会得到NaN，日期计算失效，最终显示为空。

解决方案 #

需要在PHP的delivery_status_widget函数中先获取当前商品的自定义字段值，再传递给前端JS，同时处理字段为空的默认值情况。

修改后的完整delivery_status_widget代码

add_action( 'woocommerce_after_add_to_cart_form', 'delivery_status_widget', 40 );
function delivery_status_widget() {
    global $product;
    
    // 获取当前商品自定义字段值，为空则设置默认天数
    $shipping_days = get_post_meta( $product->get_id(), '_shipping_days', true );
    $shipping_days = empty($shipping_days) ? 2 : intval($shipping_days);
    
    $delivery_days = get_post_meta( $product->get_id(), '_delivery_days', true );
    $delivery_days = empty($delivery_days) ? 6 : intval($delivery_days);
?>
<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();
        // 接收PHP传递的天数
        var shippingDays = <?php echo $shipping_days; ?>;
        var deliveryDays = <?php echo $delivery_days; ?>;

        // 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() + shippingDays);
        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() + deliveryDays);
        deliveryDate = deliveryDate.toLocaleDateString("en-US", { month: 'short', day: 'numeric' });
        document.getElementById("delivery-date").innerHTML = deliveryDate;
    });
</script>
<?php
}

可选优化：自定义字段保存代码升级 #

原代码使用的woocommerce_process_product_meta钩子已被弃用，建议替换为最新的woocommerce_admin_process_product_object钩子，修改后的保存代码：

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

    $product->update_meta_data( '_shipping_days', $shipping_days );
    $product->update_meta_data( '_delivery_days', $delivery_days );
}
add_action( 'woocommerce_admin_process_product_object', 'save_custom_fields' );

内容的提问来源于stack exchange，提问作者chirag