WooCommerce 结账页多国家增值税信息提示定制教程-php教程-PHP中文网

WooCommerce 结账页多国家增值税信息提示定制教程

心靈之曲

发布： 2025-09-28 20:37:00

原创

203人浏览过

WooCommerce 结账页多国家增值税信息提示定制教程

本教程详细介绍了如何在 WooCommerce 结账页根据用户选择的国家/地区显示定制的非欧盟增值税（VAT）通知。文章通过修改现有代码片段，展示了如何将单一国家判断逻辑扩展为支持多个国家，利用 JavaScript 数组和 $.inArray() 方法实现更灵活的国家匹配，从而为不同非欧盟地区的用户提供准确的税务信息提示。

1. 概述与需求背景

在 woocommerce 商店运营中，针对非欧盟国家或地区（例如挪威、英国、瑞士等）的顾客，可能需要在结账页面显示特定的税务信息，例如“不收取增值税，但请注意您本国可能会征收增值税和关税”。最初的实现可能只针对单一国家进行判断。然而，随着业务范围的扩大，需要将此功能扩展到支持多个指定的非欧盟国家。本教程将指导您如何修改现有代码，以实现基于国家数组的灵活判断。

2. 初始代码结构分析

原始代码片段主要由两个 WordPress 动作钩子组成：

woocommerce_review_order_after_order_total：用于在订单总计下方插入一个初始隐藏的税务通知信息行。
woocommerce_checkout_after_order_review：用于在结账页面加载后及国家选择变化时，通过 JavaScript 控制上述通知信息的显示与隐藏。

以下是原始代码的关键部分：

// PHP 部分：插入通知信息的 HTML 结构
add_action( 'woocommerce_review_order_after_order_total', 'bbloomer_echo_notice_shipping' );

function bbloomer_echo_notice_shipping() {
   echo '<tr class="non-eu-tax-notice" style="display:none">
   <th>'. __( 'Notice', 'woocommerce' ) .'</th>
   <td data-title=" '. __( 'Notice', 'woocommerce' ) .' ">'. __( 'No VAT charged. Please be aware that VAT and customs can be declared in your home country. More info here', 'woocommerce' ) .'</td>
   </tr>';
}

// PHP 部分：通过 JavaScript 控制显示/隐藏逻辑
add_action( 'woocommerce_checkout_after_order_review', 'bbloomer_show_notice_shipping' );

function bbloomer_show_notice_shipping(){
   wc_enqueue_js( "
      // 设置显示消息的国家代码
      var countryCode = 'NO'; // 原始代码只支持单一国家

      // 从结账页面获取当前选定的国家代码
      selectedCountry = $('select#billing_country').val();

      // 切换消息显示/隐藏的函数
      function toggle_upsell( selectedCountry ) {   
         if( selectedCountry == countryCode ){ // 原始代码的单一国家判断
            $('.non-eu-tax-notice').show();
         }
         else {
            $('.non-eu-tax-notice').hide();
         }
      }

      // 首次加载时调用函数
      toggle_upsell( selectedCountry );
      // 当国家选择框变化时调用函数
      $('select#billing_country').change(function(){
         toggle_upsell( this.value );         
      });
   " );
}

登录后复制

在上述 JavaScript 代码中，var countryCode = 'NO'; 定义了一个单一的国家代码，并且 if( selectedCountry == countryCode ) 语句用于判断当前选定的国家是否与此单一国家匹配。

3. 扩展支持多国家判断

为了支持多个国家，我们需要对 JavaScript 部分进行两处关键修改：

将 countryCode 变量从单一字符串改为数组。
修改条件判断逻辑，使用 $.inArray() 方法检查选定国家是否存在于 countryCode 数组中。

$.inArray() 是 jQuery 提供的一个函数，类似于 PHP 的 in_array()，它会返回指定值在数组中的索引，如果不存在则返回 -1。

3.1 修改 JavaScript 变量定义

将：

var countryCode = 'NO';

登录后复制

改为：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

var countryCode = [ 'NO', 'GB', 'CH' ]; // 示例：挪威、英国、瑞士

登录后复制

您可以根据需要将任何 ISO 3166-1 alpha-2 国家代码添加到此数组中。

3.2 修改条件判断逻辑

将：

if( selectedCountry == countryCode ){

登录后复制

改为：

if ( $.inArray(selectedCountry, countryCode) !== -1 ){

登录后复制

这个条件判断语句现在会检查 selectedCountry 是否在 countryCode 数组中。如果存在，$.inArray() 将返回一个非 -1 的索引值，从而触发显示通知信息。

4. 完整更新后的代码

将以下代码片段添加到您主题的 functions.php 文件或通过代码片段插件（如 Code Snippets）添加。

<?php
/**
 * WooCommerce 结账页非欧盟增值税通知：支持多国家配置
 * 
 * 此代码片段在 WooCommerce 结账页显示一个税务通知，
 * 当用户选择的国家在预定义列表中时，提示不收取增值税，
 * 但可能在用户本国产生关税。
 */

// 1. 在订单总计下方插入通知信息的 HTML 结构
add_action( 'woocommerce_review_order_after_order_total', 'bbloomer_echo_notice_shipping' );

function bbloomer_echo_notice_shipping() {
   echo '<tr class="non-eu-tax-notice" style="display:none">
   <th>'. __( 'Notice', 'woocommerce' ) .'</th>
   <td data-title=" '. __( 'Notice', 'woocommerce' ) .' ">'. __( 'No VAT charged. Please be aware that VAT and customs can be declared in your home country. More info here', 'woocommerce' ) .'</td>
   </tr>';
}

// 2. 通过 JavaScript 控制通知信息的显示与隐藏
add_action( 'woocommerce_checkout_after_order_review', 'bbloomer_show_notice_shipping' );

function bbloomer_show_notice_shipping(){
   wc_enqueue_js( "
      // 定义一个包含所有需要显示通知的国家代码数组 (ISO 3166-1 alpha-2)
      var countryCode = [ 'NO', 'GB', 'CH' ]; // 示例：挪威、英国、瑞士

      // 获取当前选定的国家代码
      var selectedCountry = $('select#billing_country').val();

      // 切换消息显示/隐藏的函数
      function toggle_upsell( currentSelectedCountry ) {   
         // 使用 $.inArray() 检查当前选定国家是否在国家代码数组中
         if ( $.inArray(currentSelectedCountry, countryCode) !== -1 ){
            $('.non-eu-tax-notice').show();
         }
         else {
            $('.non-eu-tax-notice').hide();
         }
      }

      // 页面加载时立即调用函数，根据当前选定的国家显示/隐藏消息
      toggle_upsell( selectedCountry );

      // 监听国家选择框的变化事件，并在变化时更新消息显示
      $('select#billing_country').change(function(){
         toggle_upsell( this.value );         
      });

   " );
}

登录后复制

5. 注意事项

国家代码准确性： 确保您在 countryCode 数组中使用的国家代码是标准的 ISO 3166-1 alpha-2 格式，这与 WooCommerce 内部使用的国家代码一致。例如，英国是 GB，而不是 UK。
CSS 样式： non-eu-tax-notice 类最初被设置为 display:none。您可以根据需要通过自定义 CSS 来进一步美化这个通知行的样式。
缓存问题： 添加或修改代码后，请务必清除您的网站缓存（包括 WordPress 缓存、CDN 缓存和浏览器缓存），以确保新的 JavaScript 代码能够正确加载和执行。
代码位置： 建议将此类定制代码放入子主题的 functions.php 文件中，或者使用专门的代码片段插件。直接修改父主题文件会在主题更新时丢失您的更改。
测试： 在部署到生产环境之前，务必在开发或测试环境中彻底测试此功能，确保它在所有目标国家和非目标国家下都能正常工作。