Javascript 隐藏/显示依赖于变量的按钮

你好，我有一个小问题，我希望你们中的一些人能帮助我，我使用wordpress，我有一个购买按钮，我想只有当金额大于267美元时才激活，例如！ 我该怎么做

有人可以告诉我，我是否可以简单地用javaScript甚至css来实现这一点

我附上一些图片并解释更多内容：

我尝试了一个woocommerce代码，但它阻止我在签出页面下订单，这是我使用的代码：

add_action( 'woocommerce_checkout_process', 'wc_minimum_order_amount' );
add_action( 'woocommerce_before_cart' , 'wc_minimum_order_amount' );
 
function wc_minimum_order_amount() {
    // Set this variable to specify a minimum order value
    $minimum = 267;

    if ( WC()->cart->total < $minimum ) {

        if( is_cart() ) {

            wc_print_notice( 
                sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda! ' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        } else {

            wc_add_notice( 
                sprintf( 'Totalul tau este %s — comanda ta trebuie sa fie de minim %s adica minim 3 m² pentru a putea plasa comanda!' , 
                    wc_price( WC()->cart->total ), 
                    wc_price( $minimum )
                ), 'error' 
            );

        }
    }
}

add_action（'woocommerce_checkout_process'、'wc_minimum_order_amount'）；
添加动作（“购物车前的woocommerce”、“wc最小订单金额”）；
函数wc\u最小订单金额（）{
//设置此变量以指定最小订单值
$minimum=267；
如果（WC（）->购物车->总计<最低金额）{
if（is_cart（））{
wc_打印通知（
sprintf（‘总面积为%s，最小面积为%s，最小面积为3 m²，最大面积为%s！’，
wc_价格（wc（）->购物车->总计），
wc_价格（最低）
)“错误”
);
}否则{
wc_添加_通知（
sprintf（‘总面积为%s，最小面积为%s，最小面积为3 m²，最大面积为%s！’，
wc_价格（wc（）->购物车->总计），
wc_价格（最低）
)“错误”
);
}
}
}

在WooCommerce中，显示按钮的功能可以在主题文件或mu插件文件中被覆盖

如果您希望在顺序不符合时按钮消失，只需将其添加到

functions.php

中即可

if ( ! function_exists( 'woocommerce_widget_shopping_cart_proceed_to_checkout' ) ) {
    function woocommerce_widget_shopping_cart_proceed_to_checkout() {
        $total = WC()->cart->subtotal;
        $minimum_amount = 267;

        if ( $total < $minimum_amount ) {
            return;
        }

        echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
    }

    add_action( 'woocommerce_widget_shopping_cart_buttons', 'woocommerce_widget_shopping_cart_proceed_to_checkout', 20 );
}

在这种情况下，您需要添加某种CSS，使其看起来像一个非活动按钮：

.button.checkout.disabled {
    opacity: 0.6; // or give it some sort of gray feeling.
    cursor: not-allowed; // so the user get's the notice that something is wrong.
    pointer-events: none; // so the user cannot click the button.
}

.button.checkout.disabled:before {
    content: "Add here a notice for the user about the minimum requirement."
    // the should feel like a tooltip and you will have to make your own placements here.
    // oh, and if you need this to be translatable you will have to print this in PHP.
}

无论如何，这只是“美学”，您应该保留阻止用户从结帐页面下订单的功能

干杯

.button.checkout.disabled {
    opacity: 0.6; // or give it some sort of gray feeling.
    cursor: not-allowed; // so the user get's the notice that something is wrong.
    pointer-events: none; // so the user cannot click the button.
}

.button.checkout.disabled:before {
    content: "Add here a notice for the user about the minimum requirement."
    // the should feel like a tooltip and you will have to make your own placements here.
    // oh, and if you need this to be translatable you will have to print this in PHP.
}