首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >当Woocommerce中的可变产品缺货时,隐藏添加到购物车块

当Woocommerce中的可变产品缺货时,隐藏添加到购物车块
EN

Stack Overflow用户
提问于 2018-08-22 13:05:30
回答 2查看 5K关注 0票数 1

在Woocommerce中,我使用的是木商侍应生插件,当产品缺货时,它会显示一个“加入等待列表”按钮,靠近“添加到购物车”按钮。在我的变量订阅中,当产品缺货时,我尝试隐藏"Add“按钮块,但没有成功。

如果可以的话,我们正在使用Vantage主题和Woocommerce订阅

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-23 01:47:29

更新的-要检测“脱销”选择的变体和隐藏添加到购物车按钮块,方法是使用jQuery:

代码语言:javascript
运行
复制
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方式(不方便)

<div>容器获得一个标记类woocommerce-variation-add-to-cart-disabled,将add to cart按钮灰色化时,您可以使用CSS规则隐藏整个块、按钮和quantity字段:

代码语言:javascript
运行
复制
.woocommerce-variation-add-to-cart-disabled { display:none !important; }

但是当没有选择任何变体时,它也会隐藏到cart,中,所以它不方便.

票数 5
EN

Stack Overflow用户

发布于 2018-08-22 13:11:33

注意:我不知道你的等待列表插件在哪里添加它的按钮,所以如果它将它们添加到购物车表单中,那么它们也会被隐藏起来,所以这是行不通的。

两点:

1:设置允许备份命令?对每种产品都不允许。这将阻止Woocommerce显示add to cart按钮。您必须对每个单独的产品执行此操作,但可以使用Bulk进行操作。

2:使用CSS隐藏add to cart表单。像这样的产品将针对所有没有库存的产品:

代码语言:javascript
运行
复制
.type-product:not(.instock) form.cart {
    display: none;
} 

希望能对你有所帮助

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51967596

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档