如何用CSS将WooCommerce价格后缀置于价格金额下方？

方法一：通过PHP钩子修改HTML结构（彻底解决） #

WooCommerce的价格输出逻辑可通过woocommerce_get_price_html钩子调整，我们可以移除原有位置的前缀，再将其追加到价格下方：

将以下代码添加到主题的functions.php文件、子主题的functions.php，或者使用代码片段插件（如Code Snippets）添加：

add_filter('woocommerce_get_price_html', 'move_tax_prefix_below_price', 10, 2);
function move_tax_prefix_below_price($price_html, $product) {
    // 获取后台设置的税费前缀
    $tax_prefix = get_option('woocommerce_tax_price_prefix');
    
    // 前缀为空时直接返回原价格
    if(empty($tax_prefix)) return $price_html;
    
    // 移除原价格字符串中的前缀内容
    $price_html = str_replace($tax_prefix, '', $price_html);
    
    // 将前缀用<p>标签包裹，追加到价格下方（可自定义标签样式）
    $price_html .= '<p class="tax-prefix">' . esc_html($tax_prefix) . '</p>';
    
    return $price_html;
}

注意：修改主题文件前请做好备份，使用子主题或代码片段插件可避免主题更新导致代码丢失。

方法二：通过CSS快速调整（无需修改PHP） #

如果仅需视觉上让前缀换行到价格下方，可通过CSS将前缀设置为块级元素：

1. 用浏览器开发者工具（F12）定位到税费前缀的HTML元素，获取它的类名（例如.woocommerce-tax-price-prefix）
2. 将以下CSS添加到「外观 → 自定义 → 额外CSS」中：

/* 替换为实际的前缀元素类名 */
.woocommerce-tax-price-prefix {
    display: block;
    margin-top: 4px;
    font-size: 0.85em; /* 可选：调整前缀字号与价格区分开 */
}

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