“Add All to Cart” Button @ WooCommerce Category Page

Improving the customer experience is a constant pursuit for any WooCommerce store owner. One area ripe for optimization is the process of adding multiple products to the cart, especially when customers are purchasing kits, bundles, or simply a large number of items from the same category.

The standard WooCommerce functionality, requiring individual “Add to Cart” clicks for each product, can be cumbersome and time-consuming, potentially leading to frustration and abandoned carts.

A recent Business Bloomer Club discussion among developers highlighted a practical solution to this problem: a custom “Add All to Cart” button. This feature allows customers to quickly add all products within a specific category or tag to their cart with a single click, significantly simplifying the bulk purchasing process.

This post will explore this useful approach, offering a PHP snippet for implementation and discussing key considerations for maximizing its effectiveness.

This type of enhancement can make a real difference in how customers interact with your online store, making their shopping experience more convenient and encouraging larger purchases. It’s a small change that can have a big impact on customer satisfaction and ultimately, your bottom line.

The Challenge of Bulk Purchases

The traditional method of adding multiple products to a WooCommerce cart involves individual clicks for each item. This can be inconvenient for customers, particularly when buying kits or bundles containing many products. The “Add All to Cart” button directly addresses this issue, providing a more efficient way to purchase multiple items simultaneously.

Implementing the “Add All to Cart” Functionality

One developer shared their implementation of this feature, which uses AJAX for a smooth and user-friendly experience. The button can be set up to work with either product categories or tags, giving flexibility for different store structures. The developer also pointed out the potential of using tags to create curated product bundles, offering a more organized way to present related items.

PHP Snippet for Adding Products to Cart by Tag

Here’s a PHP snippet demonstrating how to add all products associated with a specific tag to the cart:

add_action( 'woocommerce_after_shop_loop', 'add_all_to_cart_by_tag' );

function add_all_to_cart_by_tag() {
  if ( is_product_category() ) {
    $term_id = get_queried_object_id();
    echo '<button class="add-all-to-cart" data-term-id="' . $term_id . '">Add All to Cart</button>';
    wc_enqueue_js( "
      $('.add-all-to-cart').click(function() {
        var tag_id = $(this).data('term-id');
        $.ajax({
          type: 'POST',
          url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
          data: {
            action: 'add_all_to_cart_by_tag',
            tag_id: term_id
          },
          success: function(response) {
            $(document.body).trigger('wc_fragment_refresh'); // Update cart fragments
          }
        });
      });
    " );
}

add_action( 'wp_ajax_add_all_to_cart_by_tag', 'add_all_to_cart_by_tag_callback' );
add_action( 'wp_ajax_nopriv_add_all_to_cart_by_tag', 'add_all_to_cart_by_tag_callback' );

function add_all_to_cart_by_tag_callback() {
  $tag_id = $_POST['term_id'];
  $args = array(
    'post_type' => 'product',
    'tag_id' => $term_id,
    'posts_per_page' => -1
  );
  $query = new WP_Query( $args );

  if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
      $query->the_post();
      $product_id = get_the_ID();
      WC()->cart->add_to_cart( $product_id );
    }
  }

  wp_reset_postdata();
  wp_send_json_success();
}

Considerations and Best Practices

While this snippet provides a starting point for implementing the “Add All to Cart” feature, several factors should be considered:

• Performance: For stores with many products, code optimization is vital to avoid performance bottlenecks.
• User Experience: Give clear feedback to the user as products are added to the cart.
• Customization: Adapt the code to match your store’s specific design and needs.
• Error Handling: Implement error handling to manage potential issues gracefully.

By considering these factors and adapting the code, WooCommerce store owners can use this functionality to improve the customer experience and facilitate bulk purchases.