隐藏/显示取决于变量的按钮

时间:2020-11-05 07:25:24

标签: javascript css wordpress

你好,我有一个小问题,我希望你们中的某人可以帮助我,我使用wordpress,并且我有一个购买按钮,仅当金额大于267 $时,我才想激活它! 我该怎么办?

有人可以告诉我是否可以简单地使用javaScript甚至CSS来做到这一点?

我附上一些图片并解释更多:

enter image description here

我尝试了一些带有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' 
            );

        }
    }
}

1 个答案:

答案 0 :(得分:1)

好吧,在WooCommerce中,可以在主题的文件或mu-plugin文件中覆盖显示按钮的功能。

如果您想在订单不符合要求时消失按钮,只需在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 );
}

我个人希望创建一个.disabled之类的CSS类,并在条件为true时将其添加到按钮中。

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 ) {
            echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="button checkout wc-forward disabled">' . esc_html__( 'Checkout', 'woocommerce' ) . '</a>';
        } else {
            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.
}

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

干杯!