Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce purchase page add-to-cart with quantity and AJAX, by customising the add-to-cart template in the WooCommerce loop. See blog post for details: http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
<?php
/**
* Loop Add to Cart -- with quantity and AJAX
* requires associated JavaScript file qty-add-to-cart.js
*
* @link http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
* @link https://gist.github.com/mikejolley/2793710/
*/
// add this file to folder "woocommerce/loop" inside theme
global $product;
if( $product->get_price() === '' && $product->product_type != 'external' ) return;
// script for add-to-cart with qty
wp_enqueue_script('qty-add-to-cart', get_stylesheet_directory_uri() . '/js/qty-add-to-cart.js', array('jquery'), '1.0.1', true);
?>
<?php if ( ! $product->is_in_stock() ) : ?>
<a href="<?php echo get_permalink($product->id); ?>" class="button"><?php echo apply_filters('out_of_stock_add_to_cart_text', __('Read More', 'woocommerce')); ?></a>
<?php else : ?>
<?php
switch ( $product->product_type ) {
case "variable" :
$link = get_permalink($product->id);
$label = apply_filters('variable_add_to_cart_text', __('Select options', 'woocommerce'));
break;
case "grouped" :
$link = get_permalink($product->id);
$label = apply_filters('grouped_add_to_cart_text', __('View options', 'woocommerce'));
break;
case "external" :
$link = get_permalink($product->id);
$label = apply_filters('external_add_to_cart_text', __('Read More', 'woocommerce'));
break;
default :
$link = esc_url( $product->add_to_cart_url() );
$label = apply_filters('add_to_cart_text', __('Add to cart', 'woocommerce'));
break;
}
//printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label);
if ( $product->product_type == 'simple' ) {
?>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
<?php
} else {
printf('<a href="%s" rel="nofollow" data-product_id="%s" class="button add_to_cart_button product_type_%s">%s</a>', $link, $product->id, $product->product_type, $label);
}
?>
<?php endif; ?>
/*!
script for WooCommerce add to cart with quantity, via AJAX
Author: support@webaware.com.au
Author URI: http://snippets.webaware.com.au/
License: GPLv2 or later
Version: 1.0.1
*/
// @link http://snippets.webaware.com.au/snippets/woocommerce-add-to-cart-with-quantity-and-ajax/
// @link https://gist.github.com/mikejolley/2793710/
// add this file to folder "js" inside theme
jQuery(function ($) {
/* when product quantity changes, update quantity attribute on add-to-cart button */
$("form.cart").on("change", "input.qty", function() {
if (this.value === "0")
this.value = "1";
$(this.form).find("button[data-quantity]").data("quantity", this.value);
});
/* remove old "view cart" text, only need latest one thanks! */
$(document.body).on("adding_to_cart", function() {
$("a.added_to_cart").remove();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment