WooCommerce：结账选分期选项自动添加手续费需求

针对你提到的分期手续费计算需求，我整理了一套适配你现有HTML结构的前端实现方案，直接就能用在WooCommerce的Checkout页面里：

第一步：确认分期下拉框的HTML结构 #

你提供的代码片段可以整理为（补全了常见分期选项的占位说明）：

<p class="form-row woocommerce-validated">
    <label for="piraeusbank_gateway-card-doseis">Επιλογή Δόσεων <span class="required">*</span></label>
    <select id="piraeusbank_gateway-card-doseis" name="piraeusbank_gateway-card-doseis" class="input-select wc-credit-card-form-card-doseis">
        <option value="1">1 Δόση (χωρίς χρέωση)</option>
        <option value="3">3 Δόσεις</option>
        <option value="6">6 Δόσεις</option>
        <option value="12">12 Δόσεις</option>
        <!-- 可添加更多分期选项 -->
    </select>
</p>

第二步：编写JavaScript实现计算与更新逻辑 #

这段代码会监听分期选项的变化，自动计算手续费并实时更新Checkout页面的总额显示：

document.addEventListener('DOMContentLoaded', function() {
    // 获取关键DOM元素
    const installmentSelect = document.getElementById('piraeusbank_gateway-card-doseis');
    // 注意：以下选择器需根据你的WooCommerce主题实际结构调整
    const cartTotalElement = document.querySelector('.cart-subtotal .woocommerce-Price-amount bdi');
    const orderTotalElement = document.querySelector('.order-total .woocommerce-Price-amount bdi');

    // 提取纯数字金额的工具函数（处理带货币符号/千位分隔符的情况）
    function getNumericAmount(element) {
        const text = element.textContent.trim();
        // 移除非数字和小数点的字符，转为浮点数
        return parseFloat(text.replace(/[^0-9.]/g, ''));
    }

    // 计算手续费并更新总额的核心函数
    function updateTotalWithInstallment() {
        const installmentCount = parseInt(installmentSelect.value);
        const cartTotal = getNumericAmount(cartTotalElement);
        
        // 1期免手续费，其他期数按公式计算
        let fee = 0;
        if (installmentCount > 1) {
            fee = cartTotal * 0.12 * installmentCount / 12;
        }

        // 计算新总额并格式化显示
        const newTotal = cartTotal + fee;
        const currencySymbol = cartTotalElement.textContent.replace(/[0-9.]/g, '').trim();
        orderTotalElement.textContent = `${currencySymbol}${newTotal.toFixed(2)}`;
    }

    // 页面加载完成后，先执行一次计算（适配默认选中的分期选项）
    updateTotalWithInstallment();

    // 监听分期选择变化，实时更新总额
    installmentSelect.addEventListener('change', updateTotalWithInstallment);
});

关键注意事项 #

• 选择器适配：如果你的WooCommerce主题自定义了总额的HTML结构，需要修改cartTotalElement和orderTotalElement的选择器，确保能正确获取金额元素。
• 货币格式兼容：如果网站使用逗号作为小数点分隔符，需要调整getNumericAmount函数里的正则表达式逻辑。
• 后端验证：前端计算仅用于提升用户体验，一定要在后端（比如支付网关的回调逻辑中）重复执行手续费计算验证，避免前端篡改导致金额错误。

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