CODEWITHSUNDEEP
javascriptcsswordpress
rkmitza17
rkmitza17

Reputation: 29

Hide/show a button which depends on a variable

Hello I have a little problem, and I hope someone of you can help me, I use wordpress and I have a buy button that I want to be active only when the amount is bigger than 267 $ for example! How can I do that?

Someone can tell me if I can do that simply in javaScript or maybe even css?

I attach some pictures and explain more:

enter image description here

I have tried something with an woocommerce code but it just stop me to place the order in the check out page, this is the code I used:

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' 
            );

        }
    }
}

Upvotes: 0

Views: 361

Answers (1)

Andrei
Andrei

Reputation: 183

Well, in WooCommerce the function that displays the button can be overwritten in a theme's file or a mu-plugin file.

If you want the button to disappear when the order doesn't comply you can simply add this in 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 );
}

Personally I would rather create a CSS class like .disabled and add it to the button when our condition in 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 );
}

In this case you will need to add some sort of CSS to make it look like a inactive button:

.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.
}

Anyway, this is just "esthetics" You should keep the function that prevents the user to place the order from the checkout page.

Cheers!

Upvotes: 1

Related Questions