返回

Woocommerce 购物车配送限制及错误消息显示解决方案

php

解决woocommerce购物车配送限制及错误消息显示

问题

在woocommerce中，当购物车中包含特定产品（不配送到国外）并且选定的国家/地区不是特定的国家/地区时，需要禁用下单按钮并显示错误消息。本文将介绍如何解决此问题。

解决方案

步骤 1：添加错误消息

在结账页面上添加以下错误消息：

<div class="shipping-notice woocommerce-error" role="alert" style="display:none">我们无法将此产品配送到您的国家/地区。请将其从购物车中移除以继续！</div>

步骤 2：使用 JavaScript 显示/隐藏错误消息

使用 JavaScript 在特定情况下显示错误消息并禁用下单按钮：

  • 选定的国家/地区不是特定的国家/地区
  • 购物车中包含特定的产品（不配送到国外）

步骤 3：添加产品 ID 到购物车项类

向购物车项类中添加产品 ID，以便在 JavaScript 中轻松识别特定的产品。

完整代码

add_action('woocommerce_checkout_before_customer_details', 'display_shipping_notice');
function display_shipping_notice() {
  echo '<div class="shipping-notice woocommerce-error" role="alert" style="display:none">我们无法将此产品配送到您的国家/地区。请将其从购物车中移除以继续！</div>';
}

add_action('woocommerce_after_checkout_form', 'show_shipping_notice_js');
function show_shipping_notice_js() {
  ?>
  <script>
    jQuery(function ($) {
      var countryCode = 'LV', // 设置国家/地区代码（将显示消息）
        countryField = 'select#billing_country'; // 要定位的字段选择器

      function showHideShippingNotice(countryCode, countryField) {
        if ($(countryField).val() !== countryCode && $('.shop_table tr').hasClass('id-27733')) {
          $('.shipping-notice').show();
          $('.woocommerce-checkout-payment').hide();
        } else {
          $('.shipping-notice').hide();
          $('.woocommerce-checkout-payment').show();
        }
      }

      // 在 DOM 加载后（准备好后）
      showHideShippingNotice(countryCode, countryField);

      // 在账单国家/地区更改时（实时事件）
      $('form.checkout').on('change', countryField, function () {
        showHideShippingNotice(countryCode, countryField);
      });
    });
  </script>
  <?php
}

function cart_item_class($class, $values, $values_key) {
  if (isset($values['product_id'])) {
    $class .= ' id-' . $values['product_id'];
  }
  return $class;
}
add_filter('woocommerce_cart_item_class', 'cart_item_class', 10, 3);

常见问题解答

  1. 如何更改要显示错误消息的国家/地区代码？
    在JavaScript代码中，将 countryCode 变量更改为所需的国家/地区代码。

  2. 如何更改要定位的账单国家/地区字段选择器？
    在JavaScript代码中，将 countryField 变量更改为指向账单国家/地区字段的正确选择器。

  3. 如何更改不配送到国外的产品 ID？
    在JavaScript代码中，将 27733 更改为要限制的产品 ID。

  4. 错误消息未显示。我该怎么办？
    检查代码是否正确放置在结账页面上，并确保已将国家/地区代码和字段选择器正确配置。

  5. 下单按钮在错误情况下未禁用。我该怎么办？
    检查JavaScript代码是否正确加载并执行，并且是否正确定位了下单按钮。