本教程详细介绍了如何在 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 文件中，或者使用专门的代码片段插件。直接修改父主题文件会在主题更新时丢失您的更改。
- 测试： 在部署到生产环境之前，务必在开发或测试环境中彻底测试此功能，确保它在所有目标国家和非目标国家下都能正常工作。
6. 总结
通过将 JavaScript 中的国家判断逻辑从单一值比较升级为数组查找，我们成功地扩展了 WooCommerce 结账页的税务通知功能，使其能够灵活地支持多个非欧盟国家。这种方法提高了代码的可维护性和可扩展性，使得商店管理员可以轻松地调整需要显示此通知的国家列表，为国际顾客提供更准确的购物体验。
以上就是WooCommerce 结账页多国家增值税信息提示定制教程的详细内容，更多请关注css php javascript word java jquery html js wordpress 浏览器 php JavaScript jquery css if 字符串 var display WordPress