How can I disable a “view cart” btn until after a product is added to the cart?

  • Resolved Greg Robertson

    (@517design)


    6 years, 9 months ago

    I have added a function that adds a “view cart” button next to the “add to cart” button. I would like the button to be disabled (either not showing or greyed out) until someone adds the product to the cart.

    Here is my function:

    function action_woocommerce_after_add_to_cart_button() {

echo '<div class="woocommerce-message krank-mesg" role="alert"><a href="./cart/" class="button wc-forward">VIEW CART</a> <p class"woo-fx-added"><span>The New Formula X Driver</span> has been added to your cart.</p></div>';

add_action( 'woocommerce_after_add_to_cart_button', 'action_woocommerce_after_add_to_cart_button', 10, 0 );

    thanks in advance for any help,
    Greg

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support RK a11n

    (@riaanknoetze)

    This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

    I can also recommend the following places for more development-oriented questions:
    * WooCommerce Slack Community: https://woocommerce.com/community-slack/
    * Advanced WooCommerce group on Facebook: https://www.facebook.com/groups/advanced.woocommerce/

    Thread Starter Greg Robertson

    (@517design)

    Thanks

    Thomas Shellberg

    (@shellbeezy)

    Automattic Happiness Engineer

    @517design – it seems like you’ve done most of the work already, you would probably just need a bit of JavaScript that listens for the Add to Cart button’s onClick function and then call .show() to show the View Cart button. You would use .hide() to initially hide it or just have it hidden by default with CSS.

    BTW this is done by default on Shop pages, so perhaps you could take a look at how that’s done. ??

    Thread Starter Greg Robertson

    (@517design)

    @shellbeezy – Thanks! Yes I tried writing some js like you suggested but was having trouble getting it to work. I’m sure I was simply doing it wrong, my JavaScript skills need some work. ??

    I was able to do it with this function in my functions.php file in my child theme.

    `function action_woocommerce_after_add_to_cart_button() {

    if ( ! WC()->cart->is_empty() ) {
    echo ‘<div class=”woocommerce-message krank-mesg” role=”alert”><a href=”./cart/” class=”button wc-forward”>VIEW CART</a> <p class”woo-fx-added”><span>The New Formula X Driver</span> has been added to your cart.</p></div>’;
    } else {
    }
    };
    add_action( ‘woocommerce_after_add_to_cart_button’,
    ‘action_woocommerce_after_add_to_cart_button’, 10, 0 );`

    Thomas Shellberg

    (@shellbeezy)

    Automattic Happiness Engineer

    Maybe something as simple as this:

    <script>
    jQuery(function($) {

        // if our custom button is clicked
        $(".single_add_to_cart_button").on("click", function() {

            $(".your-custom-button").show();

        });
    });
    </script>
    Thread Starter Greg Robertson

    (@517design)

    Thats a bit lighter.. Thanks! I’ll try it.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How can I disable a “view cart” btn until after a product is added to the cart?’ is closed to new replies.