【问题标题】:Hide Add to cart block when a variable product is out of stock in Woocommerce当 Woocommerce 中的可变产品缺货时隐藏添加到购物车块
【发布时间】:2019-01-28 18:12:27
【问题描述】:

在 Woocommerce 中,我正在使用 Woocommerce Waitlist 插件,当产品缺货时,该插件会在“添加到购物车”按钮附近显示“加入候补名单”按钮。在我的变量订阅中,我试图在产品缺货时隐藏“添加到购物车”按钮块,但没有成功。

如果有帮助,我们正在使用 Vantage 主题和Woocommerce subscriptions

当可变产品在 Woocommerce 中缺货时如何隐藏“添加到购物车”块?

【问题讨论】:

  • 可以把添加按钮的模板的代码贴出来吗?你用的是什么主题?
  • @OhSoConfused - 谢谢,但这是针对零成本的商品,而不是缺货商品。

标签: php jquery css wordpress woocommerce


【解决方案1】:

更新 - 要检测“缺货”所选变体并隐藏添加到购物车按钮块,方法是使用 jQuery:

add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' );
function single_add_to_cart_event_text_replacement() {
    global $product;

    // Only single variable products
    if( ! ( is_product() && $product->is_type('variable') ) )
        return;
    ?>
        <script type="text/javascript">
        jQuery(function($){
            var vs = 'table.variations select',         vi = 'input.variation_id',
            atc = 'woocommerce-variation-add-to-cart',  atcd = atc+'-disabled',
            atc = '.'+atc;

            // 1. On start (With a mandatory light delay)
            setTimeout(function(){
                if ( 0 < $(vi).val() && $(atc).hasClass(atcd) ) {
                    $(atc).hide();
                }
            }, 250);

            // 2. On variation change
            $('.variations_form').on( 'blur', vs, function(){
                if( 0 < $(vi).val() && $(atc).hasClass(atcd) ){
                    $(atc).hide();
                } else {
                    $(atc).show();
                }
            });
        })
        </script>
    <?php
}

代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。


CSS方式 (不方便)

由于&lt;div&gt; 容器有一个标记类woocommerce-variation-add-to-cart-disabled 使添加到购物车按钮变灰,您可以使用CSS 规则来隐藏整个块按钮和数量字段:

.woocommerce-variation-add-to-cart-disabled { display:none !important; }

但是当没有选择变体时,它也会隐藏添加到购物车,所以不方便。

【讨论】:

  • 如何添加自定义按钮或链接以防stok产品不足(将用户重定向到自定义表单)?
  • 如何为所有类型的产品修改此代码,不仅可变而且简单,分组@LoicTheAztec
【解决方案2】:

注意:我不知道您的候补名单插件将其按钮添加到何处,因此如果将它们添加到购物车表单中,它们也会被隐藏,因此这不起作用。

两点:

1:设置允许延期交货?对每个产品都不允许。这将阻止 Woocommerce 显示添加到购物车按钮。您必须为每个单独的产品执行此操作,但可以使用批量编辑来完成。

2:使用 CSS 隐藏添加到购物车表单。这样的事情将针对所有没有库存的产品:

.type-product:not(.instock) form.cart {
    display: none;
} 

希望对你有帮助

【讨论】:

    猜你喜欢
    • 2022-11-13
    • 1970-01-01
    • 1970-01-01
    • 2017-11-23
    • 2019-12-28
    • 1970-01-01
    • 2019-09-10
    • 1970-01-01
    • 2016-04-05
    相关资源
    最近更新 更多