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

Question

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

除了我不理解这个逻辑（为什么使用 post-submit 错误消息作为第二个变体和不同的解决方案 - 无提交按钮的 - 第一个？），有没有办法始终显示添加到购物车按钮，如果不是所有变体都被 selected，则带有 post-提交错误消息？

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;"> ，它通过 javascript 受到用户选择的影响，并且替换为 <div class="single_variation_wrap_custom"> 那不是。

Answer 2

我还认为，如果添加到购物车按钮始终可见，转化率会高得多。我的挑战：始终显示 A 按钮。如果未选择变体，则在单击时显示错误消息 ("please choose a variation")。这就是我解决它的方式。您只需要编辑 functions.php：我为此使用了第二个 "fake" 按钮。所以首先我们插入那个按钮：

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：即使在选择变体之前也始终显示添加到购物车按钮

WooCommerce: always showing add-to-cart button even before variation is selected

woocommerce