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

【问题标题】：WooCommerce: always showing add-to-cart button even before variation is selectedWooCommerce：即使在选择变体之前也始终显示添加到购物车按钮
【发布时间】：2016-01-30 22:32:09
【问题描述】：

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

除了我不理解这个逻辑（为什么对第二个变体使用提交后错误消息和第一个变体使用不同的解决方案 - no-submit-button 一个？）之外，是否有始终显示“添加到购物车”按钮的方式，如果未选择所有变体，则会显示提交后错误消息？

【问题讨论】：

标签： woocommerce

【解决方案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"> 代替。

【讨论】：

完美的解决方案，虽然我不明白其中的 1% :) 不能给你赏金我很伤心，为什么有这么短的时间限制呢？ ?我不知道这个限制，如果有办法给你 50 分，请告诉我，我会马上做。
您好，感谢您的解决方案。对于我的新手，你能说清楚应该在哪里添加吗？我找不到“single-product/add-to-cart/variable.php”@drake035 非常感谢
@SophieLepinoy 代码应该添加到主题的functions.php 文件中，或者在插件中

【解决方案2】：

我还认为，如果添加到购物车按钮始终可见，那么转化率会更高。我的挑战：始终显示 A 按钮。如果未选择变体，则在单击时显示错误消息（“请选择变体”）。这就是我解决它的方法。您只需要编辑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 代码保持不变并安全更新。

【讨论】：