WordPress（Elementor）网站结账页多余货币名称隐藏求助

问题背景 #

我用Elementor搭建了WordPress网站ZINBLO，启用免费版GTranslate插件后，结账页的订单回顾模块里，订单总额同时显示了货币符号与货币名称。尝试过CSS、JS、HTML等多种方式，都无法隐藏多余的货币名称，仅保留金额与货币符号，寻求技术解决办法。

之前使用过的CSS修改示例：

/*TO HIDE CURRENT TEXT*/
button.woocommerce-button.button.woocommerce-form-login__submit.e-woocommerce-form-login-submit.elementor-animation-shrink {
    font-size: 0px;
}

/*TO APPLY MY EDITED OPTION*/
:lang(en) button.woocommerce-button.button.woocommerce-form-login__submit.e-woocommerce-form-login-submit.elementor-animation-shrink::before {
    content: 'Login 🔓 ' !important;
    font-size: 16px;
}

解决方案 #

方案1：精准CSS隐藏货币名称 #

GTranslate会给页面添加语言属性，先通过浏览器开发者工具（F12）定位订单总额的DOM结构，找到包含货币名称的部分，再用对应CSS隐藏：

针对英文页面

/* 隐藏英文页面的货币名称（假设名称在金额元素末尾） */
:lang(en) .woocommerce-order-review-table tfoot .order-total .amount::after {
    content: '' !important;
    display: none;
}

/* 如果货币名称是单独的span元素 */
:lang(en) .woocommerce-order-review-table tfoot .order-total .amount span.currency-name {
    display: none;
}

针对德语页面

/* 隐藏德语页面的货币名称 */
:lang(de) .woocommerce-order-review-table tfoot .order-total .amount::after {
    content: '' !important;
    display: none;
}

方案2：JavaScript动态移除货币名称 #

如果CSS无法精准定位，用JS根据语言匹配并移除多余名称：

document.addEventListener('DOMContentLoaded', function() {
    // 监听GTranslate语言切换事件
    document.addEventListener('gtranslate:languageChanged', removeCurrencyName);
    // 页面加载时执行一次
    removeCurrencyName();

    function removeCurrencyName() {
        const totalAmounts = document.querySelectorAll('.woocommerce-order-review-table tfoot .order-total .amount');
        const currentLang = document.documentElement.lang;
        let targetName = '';

        // 根据当前语言设置要移除的货币名称
        if (currentLang === 'en') {
            targetName = 'USD'; // 替换成实际显示的英文货币名称
        } else if (currentLang === 'de') {
            targetName = 'US-Dollar'; // 替换成实际显示的德文货币名称
        }

        totalAmounts.forEach(el => {
            el.textContent = el.textContent.replace(targetName, '').trim();
        });
    }
});

将代码添加到主题自定义JS区域，或通过Elementor的自定义HTML模块插入结账页。

方案3：WooCommerce PHP钩子修改显示格式 #

通过WooCommerce钩子直接修改货币显示规则，避免GTranslate重复添加：

// 自定义货币符号，仅保留符号
add_filter('woocommerce_currency_symbol', 'custom_currency_symbol', 10, 2);
function custom_currency_symbol($symbol, $currency) {
    switch($currency) {
        case 'USD':
            $symbol = '$';
            break;
        // 其他货币可按需添加
    }
    return $symbol;
}

// 移除订单总额中的货币名称
add_filter('woocommerce_get_order_item_totals', 'custom_order_total_display', 10, 3);
function custom_order_total_display($total_rows, $order, $tax_display) {
    if (isset($total_rows['order_total'])) {
        $total_rows['order_total']['value'] = preg_replace('/\s+[A-Za-z\s]+$/', '', $total_rows['order_total']['value']);
    }
    return $total_rows;
}

将代码添加到主题的functions.php文件中，修改前请备份文件。

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