WooCommerce可变产品变体批量购买数量短代码报错求助

问题描述 #

我正在使用Woocommerce Min/Max Quantities插件，为大量产品变体设置了最小购买数量和批量购买（Group of）数量。需要在前端展示这些信息，让客户选择变体时可见，例如1000g蓝色款需按20的批量购买，250g蓝色款需按25的批量购买。我编写了以下代码创建短代码用于在页面中显示该数据，但运行时一直触发严重错误。此前我有一段仅显示全局批量购买数量的代码，运行效果良好。请问如何修改代码以解决该问题？

原代码：

function variation_group_of_quantity_shortcode($atts) {
    // Retrieve the current product's ID
    $product_id = get_the_ID();

    // Get the value of the "variation_group_of_quantity" field for the current product
    $variation_group_of_quantity = get_post_meta($product_id, 'variation_group_of_quantity', true);

    // Return the value as output
    return $variation_group_of_quantity;
}
add_shortcode('variation_group_quantity', 'variation_group_of_quantity_shortcode');

问题分析 #

原代码的核心错误有两点：

1. 直接读取父产品的meta字段，但变体的批量购买数据存储在每个变体自身的meta中，而非父产品
2. 纯PHP短代码无法实时响应前端的变体选择切换，必须结合JavaScript实现动态更新

修复方案 #

1. 替换后的PHP短代码 #

该代码会收集所有变体的批量购买数据，输出隐藏的数据容器和初始提示：

function variation_group_of_quantity_shortcode($atts) {
    global $product;
    // 非可变产品直接返回提示
    if ( ! $product || ! $product->is_type('variable') ) {
        return '<p>此产品无变体批量购买设置</p>';
    }

    // 收集所有变体的批量购买数据
    $variation_data = array();
    foreach ( $product->get_available_variations() as $variation ) {
        $variation_obj = wc_get_product( $variation['variation_id'] );
        // Woocommerce Min/Max Quantities插件默认批量购买字段键为 _wc_min_max_group_of
        $group_of = get_post_meta( $variation_obj->get_id(), '_wc_min_max_group_of', true );
        if ( ! empty( $group_of ) ) {
            $variation_data[ $variation['variation_id'] ] = array(
                'group_of' => $group_of
            );
        }
    }

    if ( empty( $variation_data ) ) {
        return '<p>无变体设置批量购买要求</p>';
    }

    ob_start();
    ?>
    <div class="variation-group-of-info">
        <p>请选择产品变体查看批量购买要求</p>
        <div class="group-of-details" style="display:none;"></div>
        <input type="hidden" id="variation-group-data" value='<?php echo wp_json_encode( $variation_data ); ?>'>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('variation_group_quantity', 'variation_group_of_quantity_shortcode');

2. 动态更新的JavaScript代码 #

首先在主题的functions.php中添加脚本注册：

function enqueue_variation_group_script() {
    global $post;
    if ( is_product() && wc_get_product( $post->ID )->is_type('variable') ) {
        wp_enqueue_script(
            'variation-group-script',
            get_stylesheet_directory_uri() . '/js/variation-group.js', // 替换为你的脚本存放路径
            array('jquery'),
            '1.0',
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_variation_group_script');

然后创建js/variation-group.js文件，写入以下内容：

jQuery(document).ready(function($) {
    const variationData = JSON.parse( $('#variation-group-data').val() );
    const infoContainer = $('.variation-group-of-info');
    const detailsEl = infoContainer.find('.group-of-details');

    // 监听变体选择事件
    $('form.variations_form').on('show_variation', function(event, variation) {
        if ( variationData[variation.variation_id] ) {
            const groupOf = variationData[variation.variation_id].group_of;
            detailsEl.html(`<p>此变体需按 <strong>${groupOf}</strong> 的批量购买</p>`).show();
            infoContainer.find('p:first').hide();
        } else {
            detailsEl.hide();
            infoContainer.find('p:first').text('此变体无批量购买要求').show();
        }
    });

    // 重置选择时恢复初始提示
    $('form.variations_form').on('hide_variation', function() {
        detailsEl.hide();
        infoContainer.find('p:first').text('请选择产品变体查看批量购买要求').show();
    });
});

额外说明 #

• 字段键确认：如果你的插件版本不同，可以通过数据库查看变体post的meta字段，确认批量购买设置的实际键名
• 样式调整：可以自定义.variation-group-of-info类的CSS样式，让显示效果贴合你的主题
• 错误防护：代码中增加了产品类型判断，避免在非可变产品页面执行时触发报错

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