Question

在可变产品的单个产品页面上，WooCommerce在选择一个变体之前不会生成“添加到购物车”按钮。如果需要两个变体但只选择了一个，WC仍会生成按钮，但单击它会触发一条错误消息，要求选择所有变体。

除了我不理解这个逻辑（为什么使用第二个变体的后提交错误消息和另一个解决方案 - 第一个没有提交按钮 - ？）之外，是否有如果不是所有变体都被选中，那么在任何时候都会显示添加到购物车按钮的方式，并提供提交后的错误消息？

Answer 1

这应该做的工作：

add_action( 'woocommerce_before_add_to_cart_button', function(){
    // start output buffering
    ob_start();
} );

add_action( 'woocommerce_before_single_variation', function(){
    // end output buffering
    ob_end_clean();
    // output custom div
    echo '<div class="single_variation_wrap_custom">';
} );

实际上，我已经（在模板文件single-product/add-to-cart/variable.php内）拦截了受用户选择影响的HTML代码<div class="single_variation_wrap" style="display:none;">，并替换为<div class="single_variation_wrap_custom">不是。

Answer 2

如果添加到购物车按钮始终可见，我还认为会有更高的转化率。我的挑战：总是显示一个按钮。如果未选择任何变体，请在点击时显示错误消息（“请选择变体”）。这就是我解决它的方式。您只需编辑functions.php：我使用了第二个“假”按钮。所以首先我们插入那个按钮：

function wc_custom_addtocart_button(){
    global $product;
    ?>
    <a href="#" class="btn btn-primary btn-block placeholder_button"><?php echo $product->single_add_to_cart_text(); ?></a>
    <?php
}
add_action("woocommerce_before_add_to_cart_button","wc_custom_addtocart_button");

接下来，我们使用自定义js代码切换它的可见性：

function run_js_code(){
    if (get_post_type() == "product"):
    ?>
    <script>   
    jQuery(document).ready(function($) {
        // use woocommerce events:
        $(document).on( 'found_variation', function() {
            $(".single_add_to_cart_button").show();
            $(".placeholder_button").hide();
        });
        $(".variations_form").on( 'click', '.reset_variations', function() {
            $(".single_add_to_cart_button").hide();
            $(".placeholder_button").show();
        });
        // display alert when no variation is chosen:
        $(".placeholder_button").click(function(e){
            e.preventDefault();
            alert("Please choose a product variation!");
        });
    });
    </script>
    <?php
    endif;
}
add_action( 'wp_footer', 'run_js_code' );

然后我在代码行上添加了我的css：

.single_add_to_cart_button { display: none; }

通过这种方式，整个woocommerce代码保持不变并且更新安全。

WooCommerce：即使在选择变体之前，也始终显示“添加到购物车”按钮

2 个答案: