WooCommerce结账页多国家增值税信息动态显示教程

在woocommerce电商平台运营中，针对不同国家或地区的税务政策，特别是非欧盟国家的增值税处理，往往需要在结账页面向用户提供明确的提示。例如，对于挪威、英国、瑞士等非欧盟国家，可能需要告知客户商品未收取增值税，且相关税费和关税可能在其本国申报。最初的实现方式可能仅支持单个国家代码的判断，但随着业务拓展到更多非欧盟地区，这种单一判断的模式便显得力不从心。本教程将指导您如何修改现有代码，使其能够灵活地支持多个国家。

核心问题与解决方案

原有的代码片段通过JavaScript变量countryCode = 'NO';来指定一个国家，并通过selectedCountry == countryCode进行比较，从而决定是否显示增值税通知。当需要支持多个国家时，例如挪威（NO）、英国（GB）和瑞士（CH），就需要将countryCode从单一字符串改为一个数组，并且将比较逻辑从简单的等值判断改为检查选定的国家是否存在于这个数组中。

解决方案的关键点在于：

1. 将JavaScript变量countryCode定义为一个包含所有目标国家代码的数组。
2. 使用jQuery的$.inArray()方法来判断当前选定的国家是否包含在countryCode数组中。

实现步骤与代码示例

整个功能分为两部分：一是定义要显示的增值税通知消息的HTML结构，二是编写JavaScript逻辑来控制该消息的显示与隐藏。

1. 定义增值税通知消息

首先，我们需要一个HTML结构来承载非欧盟增值税的通知消息。这个消息将通过一个特定的CSS类（例如non-eu-tax-notice）进行标识，以便JavaScript能够对其进行操作。

   '. __( 'Notice', 'woocommerce' ) .'
   '. __( 'No VAT charged. Please be aware that VAT and customs can be declared in your home country. More info here', 'woocommerce' ) .'
   ';
}
?>

这段PHP代码通过woocommerce_review_order_after_order_total钩子，在订单总金额下方插入一行表格（

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

下载

2. 控制消息的显示与隐藏

接下来是核心的JavaScript逻辑，它将监听用户选择的账单国家，并根据国家代码数组来动态显示或隐藏通知消息。

代码解析：

• var countryCode = [ 'NO', 'GB', 'CH' ];：这是最关键的改动，将countryCode定义为一个JavaScript数组，其中包含了所有需要显示非欧盟增值税通知的国家代码。请确保使用正确的ISO 2字母国家代码。
• selectedCountry = $('select#billing_country').val();：获取用户在结账页面“账单国家”下拉框中当前选定的国家代码。
• if ( $.inArray(selectedCountry, countryCode) !== -1 )：这是判断逻辑的核心。$.inArray(value, array)是jQuery提供的一个函数，用于查找value在array中的索引。如果value在array中不存在，它将返回-1。因此，!== -1表示selectedCountry存在于countryCode数组中。
• $('.non-eu-tax-notice').show(); 和 $('.non-eu-tax-notice').hide();：根据判断结果，显示或隐藏带有non-eu-tax-notice类的HTML元素。
• toggle_upsell( selectedCountry );：页面加载时立即执行一次检查，确保初始状态正确。
• $('select#billing_country').change(function(){ ... });：监听国家选择框的change事件。每当用户更改国家时，都会重新调用toggle_upsell函数，实现实时更新。

完整代码

将上述两个PHP函数合并，通常放置在您的WordPress主题的functions.php文件或一个自定义插件中。

   '. __( 'Notice', 'woocommerce' ) .'
   '. __( 'No VAT charged. Please be aware that VAT and customs can be declared in your home country. More info here', 'woocommerce' ) .'
   ';
}

// 2. 根据账单国家显示或隐藏消息
add_action( 'woocommerce_checkout_after_order_review', 'bbloomer_show_notice_shipping' );

function bbloomer_show_notice_shipping(){

   wc_enqueue_js( "
      // 定义需要显示消息的国家代码数组
      // 请使用 ISO 2 字母国家代码，例如 'GB' 代表英国，'CH' 代表瑞士
      var countryCode = [ 'NO', 'GB', 'CH' ];

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

      // 定义一个函数来切换消息的显示状态
      function toggle_upsell( selectedCountry ) {   
         // 使用 $.inArray() 检查 selectedCountry 是否存在于 countryCode 数组中
         if ( $.inArray(selectedCountry, 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 );         
      });

   " );

}
?>

注意事项

• 国家代码准确性： 务必使用正确的ISO 2字母国家代码。例如，英国应使用GB而不是UK。
• 代码放置位置： 建议将此代码添加到您的子主题的functions.php文件，或者使用一个代码片段管理插件（如Code Snippets），以避免在主题更新时丢失更改。不建议直接修改父主题的functions.php。
• 消息内容定制： 您可以根据实际需求修改bbloomer_echo_notice_shipping函数中的提示文本。
• 样式调整： 默认情况下，通知消息会以普通文本形式显示。您可以通过为.non-eu-tax-notice类添加CSS样式来美化其外观，例如改变字体颜色、背景色、边框等，以使其更醒目。
• 测试： 在将代码部署到生产环境之前，务必在开发或 staging 环境中进行充分测试，确保功能正常，并且没有引入其他问题。
• 缓存： 如果您的网站使用了缓存插件，在添加或修改代码后，请务必清除所有缓存，以确保新的JavaScript代码能够被正确加载。

通过上述修改，您的WooCommerce结账页将能够更智能、更灵活地根据用户选择的多个非欧盟国家显示特定的增值税通知，从而提升用户体验并确保信息传达的准确性。