如何将WooCommerce商品数量输入值从数字修改为秒数格式

核心逻辑不改动WooCommerce原生的价格计算规则，仅做前后端的展示映射，原有数量字段存储1、2、3等数值对应30s、60s、90s时长，价格按单单位20美元正常递增，无需修改计价逻辑。

实现步骤 #

1. 前置配置 #

先将对应视频制作类商品的常规售价设置为20美元，保持WooCommerce默认的「数量×单价」计价规则不变即可。

2. 修改商品详情页数量输入框展示 #

将以下代码添加到站点当前主题的functions.php文件，或者通过自定义代码片段插件插入：

// 修改数量输入框属性
add_filter( 'woocommerce_quantity_input_args', 'custom_quantity_input_args', 10, 2 );
function custom_quantity_input_args( $args, $product ) {
    // 仅对指定视频制作商品生效，需替换为你的商品ID；如需全店生效可删除下一行if判断
    $target_product_ids = array( 123, 456 ); 
    if ( in_array( $product->get_id(), $target_product_ids ) ) {
        $args['min_value'] = 1;
        $args['step'] = 1;
        // 给输入框加自定义类方便JS控制展示效果
        $args['classes'][] = 'video-duration-quantity';
    }
    return $args;
}

// 前端JS实现数字和秒数的转换
add_action( 'wp_footer', 'custom_quantity_display_js' );
function custom_quantity_display_js() {
    ?>
    <script>
    jQuery(document).ready(function($){
        // 输入框失焦时展示为秒数格式
        $('.video-duration-quantity').on('blur', function(){
            let num = parseInt($(this).val());
            if (num && num > 0) {
                $(this).attr('data-real-value', num);
                $(this).val(num * 30 + 's');
            }
        });
        // 输入框聚焦时恢复数字格式方便用户修改
        $('.video-duration-quantity').on('focus', function(){
            let realVal = $(this).attr('data-real-value') || 1;
            $(this).val(realVal);
        });
        // 加购表单提交前恢复真实数值，保证计价逻辑正常
        $('form.cart').on('submit', function(){
            let $qtyInput = $(this).find('.video-duration-quantity');
            if ($qtyInput.length) {
                let realVal = $qtyInput.attr('data-real-value') || parseInt($qtyInput.val());
                $qtyInput.val(realVal);
            }
        });
        // 页面加载时初始化输入框展示
        $('.video-duration-quantity').each(function(){
            let num = parseInt($(this).val());
            if (num && num > 0) {
                $(this).attr('data-real-value', num);
                $(this).val(num * 30 + 's');
            }
        });
    });
    </script>
    <?php
}

3. 全链路展示适配 #

继续添加以下代码到functions.php，将购物车、结账页、订单通知等全场景的数量数值转换为秒数展示，避免用户产生误解：

// 购物车、结账页数量展示替换
add_filter( 'woocommerce_cart_item_quantity', 'custom_cart_item_quantity_display', 10, 3 );
function custom_cart_item_quantity_display( $quantity_html, $cart_item_key, $cart_item ) {
    $target_product_ids = array( 123, 456 ); // 替换为你的视频制作商品ID
    if ( in_array( $cart_item['product_id'], $target_product_ids ) ) {
        $qty = $cart_item['quantity'];
        $duration = $qty * 30 . 's';
        $quantity_html = str_replace( 'value="' . $qty . '"', 'value="' . $qty . '" data-duration="' . $duration . '"', $quantity_html );
        $quantity_html .= '<style>.woocommerce-cart-form .cart_item .quantity input.video-duration-quantity { position: relative; } .woocommerce-cart-form .cart_item .quantity input.video-duration-quantity::after { content: attr(data-duration); position: absolute; left:0; top:0; width:100%; height:100%; background: #fff; text-align: center; line-height: inherit; }</style>';
    }
    return $quantity_html;
}

// 订单详情、邮件通知中的数量展示替换
add_filter( 'woocommerce_order_item_quantity_html', 'custom_order_item_quantity_display', 10, 2 );
function custom_order_item_quantity_display( $qty_html, $item ) {
    $target_product_ids = array( 123, 456 ); // 替换为你的视频制作商品ID
    if ( in_array( $item->get_product_id(), $target_product_ids ) ) {
        $qty = $item->get_quantity();
        $qty_html = $qty * 30 . 's';
    }
    return $qty_html;
}

效果参考 #

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