在Divi主题下，如何让WordPress页面中WooCommerce可变产品短码显示变体价格

嘿，我来帮你搞定这个问题！你现在的代码已经能调出可变产品的下拉选项了，但确实没显示变体价格——刚好我之前处理过类似的需求，结合Divi主题的情况，给你两个实用的解决方案：

方案一：直接在下拉选项中显示变体价格 #

这个方案会把每个变体的价格直接嵌入到下拉选项的文本里，用户一开始就能看到所有选项的价格，操作直观。你可以把原来的函数替换成下面这段代码，直接放到子主题的functions.php里（一定要用子主题哦，避免Divi主题更新时代码丢失）：

add_filter('woocommerce_loop_add_to_cart_link', 'fc_variation_dropdown_in_shop_loop_with_prices', 10, 2);
function fc_variation_dropdown_in_shop_loop_with_prices($button, $product) {
    if ($product->is_type('variable')) {
        ob_start();
        
        // 获取所有变体数据
        $available_variations = $product->get_available_variations();
        
        // 构建自定义下拉菜单
        echo '<select class="variation-select wc-product-variation-select">';
        echo '<option value="">' . esc_html__('选择一个选项', 'woocommerce') . '</option>';
        
        foreach ($available_variations as $variation) {
            $variation_product = wc_get_product($variation['variation_id']);
            $formatted_price = wc_price($variation_product->get_price());
            // 把变体的所有属性拼成语句
            $attribute_labels = [];
            foreach ($variation['attributes'] as $attr_key => $attr_value) {
                $attr_name = str_replace('attribute_', '', $attr_key);
                $attribute_labels[] = wc_attribute_label($attr_name) . ': ' . $attr_value;
            }
            $option_label = implode(', ', $attribute_labels) . ' - ' . $formatted_price;
            
            echo '<option value="' . esc_attr($variation['variation_id']) . '">' . esc_html($option_label) . '</option>';
        }
        
        echo '</select>';
        // 保留加入购物车按钮，和Divi样式兼容
        echo '<button type="submit" class="single_add_to_cart_button button alt">' . esc_html__('加入购物车', 'woocommerce') . '</button>';
        
        return ob_get_clean();
    }
    return $button;
}

这段代码没有直接调用WooCommerce的默认模板，而是自己构建了下拉选项，把每个变体的属性和价格直接拼在了选项文本里，而且用了WooCommerce的默认类名，和Divi主题的样式能完美兼容。

方案二：实时显示选中变体的价格（更友好的交互） #

如果觉得把价格塞到下拉选项里不够美观，这个方案会在下拉框上方加一个独立的价格显示区域，用户每选一个变体，价格就会实时更新，体验更好。同样替换你原来的函数：

add_filter('woocommerce_loop_add_to_cart_link', 'fc_variation_dropdown_with_live_price', 10, 2);
function fc_variation_dropdown_with_live_price($button, $product) {
    if ($product->is_type('variable')) {
        ob_start();
        
        $available_variations = $product->get_available_variations();
        $attributes = $product->get_variation_attributes();
        $selected_attributes = $product->get_default_attributes();
        
        // 先加一个价格显示容器，你可以调整样式匹配Divi
        echo '<div class="variation-price-display" style="margin: 10px 0; font-size: 1.2em; font-weight: 600;">' . wc_price($product->get_price()) . '</div>';
        
        // 保留WooCommerce默认的变体选择模板
        wc_get_template('single-product/add-to-cart/variable.php', [
            'available_variations' => $available_variations,
            'attributes' => $attributes,
            'selected_attributes' => $selected_attributes,
            'product' => $product
        ]);
        
        // 加一段JS实现实时价格更新
        ?>
        <script>
        jQuery(document).ready(function($) {
            // 监听变体选择变化
            $('.variations_form').on('change', 'select', function() {
                var form = $(this).closest('.variations_form');
                var selected_variation_id = form.find('.variation_id').val();
                
                if (selected_variation_id) {
                    // 从产品变体数据里匹配对应价格
                    var all_variations = form.data('product_variations');
                    for (let i = 0; i < all_variations.length; i++) {
                        if (all_variations[i].variation_id == selected_variation_id) {
                            $('.variation-price-display').html(all_variations[i].price_html);
                            break;
                        }
                    }
                } else {
                    // 没选的时候显示默认价格
                    $('.variation-price-display').html('<?php echo wc_price($product->get_price()); ?>');
                }
            });
        });
        </script>
        <?php
        
        return ob_get_clean();
    }
    return $button;
}

这个方案的好处是保留了WooCommerce原生的变体选择器样式，同时价格区域独立展示，你可以通过修改variation-price-display的CSS样式来匹配Divi主题的字体、颜色和间距。

最后提醒 #

因为你用的是Divi主题，一定要用子主题的functions.php来添加代码，不然主题更新后你的代码就没了。如果代码没生效，记得清除一下WooCommerce的产品缓存，还有Divi的静态页面缓存。

内容来源于stack exchange