woocommerce add price to cart button with ajax class

Question

After researching this issue I found code that will add the price to the "Add to cart" button like this:

[ $50 Add to cart ]

The code for some reason does not use the ajax class so when the button is clicked the page reloads. The normal default button will use an ajax class so when it's clicked it does not reload the page but will show a message that it's been added to the cart.

I am overriding the file add-to-cart.php by adding it to my theme at \\woocommerce\\loop\\add-to-cart.php

Here's the code that does not use ajax class:

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button product_type_simple add_to_cart_button ajax_add_to_cart">%s %s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        $product->is_purchasable() ? 'add_to_cart_button' : '',
        esc_attr( $product->product_type ),
        $product->get_price_html(),
        esc_attr( isset( $class ) ? $class : 'button' ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

How can I modify this to use the ajax class of the default add to cart button?

Thanks in advance

Answer 1

In my experience, the add to cart template is a very dangerous template to override. You didn't say which version of WooCommerce you are using, but I am going to assume 2.5? I assume that because I helped rewrite the WooCommerce ajax add to cart code to trigger on the .ajax_add_to_cart class because it resolved a complex issue I was having with the Name Your Price and Subscriptions extensions. But since you are overriding the template you aren't getting the 2.5 updates.

Here's the new add-to-cart.php template and the updated woocommerce_template_add_to_cart() function.

You can see the classes being passed to the template in the first and defined in the second via an implode() on an array. So to import that piece of code into yours you would get:

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button product_type_simple add_to_cart_button ajax_add_to_cart">%s %s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        implode( ' ', array_filter( array(
                        'button',
                        'product_type_' . $product->product_type,
                        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : ''
                ) ) ),
        esc_attr( $product->product_type ),
        $product->get_price_html(),
        esc_attr( isset( $class ) ? $class : 'button' ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

Though, I'd strongly advise you not override this template. From your code, I don't see any modification that makes it different/custom, which basically means you open yourself up to issues with upgrading and for no benefit.

Answer 2

Button already has ajax_add_to_cart class which bind the Ajax call. Just make sure you have enabled Ajax add to cart button

Go to Woocommerce > Settings > Products > Display and check Enable AJAX add to cart buttons on archives

Also it is only works when you are adding products from product archive page, it will not work from product single page.

Reference: Configuring Woocommerce Settings