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

helgatheviking helgatheviking · Accepted Answer · 2016-01-30T18:28:42

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.

woocommerce add price to cart button with ajax class

2 Answers