Calculating Subtotal for Variant Products in WooCommerce: A Guide

How Can I Modify a WooCommerce Snippet to Calculate Subtotals for Variant Products?

When working with WooCommerce, handling prices dynamically for variant products (like those with different sizes or colors) can be a bit tricky compared to simple products. I recently came across a common situation where a snippet was needed to compute subtotals on the fly on the product page based on the quantity selected. The default snippet got it right for simple products but fell short when dealing with variant products. Let’s break down and fix this.

The initial code provided was designed exclusively for simple products. It attaches a text element right after the “Add to Cart” button and updates this text to show the total price when the quantity input changes. The JavaScript snippet provided does the math based on the product’s price, which works great for simple products:

add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_product_price_recalculate' );

function bbloomer_product_price_recalculate() {
   global $product;
   echo '<div id="subtot" style="display:inline-block;">Total: <span></span></div>';
   $price = $product->get_price();
   $currency = get_woocommerce_currency_symbol();
   wc_enqueue_js( "     
      $('[name=quantity]').on('input change', function() { 
         var qty = $(this).val();
         var price = '" . esc_js( $price ) . "';
         var price_string = (price*qty).toFixed(2);
         $('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
      }).change();
   " );
}

However, if the product is a variable product, this will not behave as intended since the price can vary depending on the selected variant. In WooCommerce, a variable product is comprised of several variations, and each variation can have its distinct price. Therefore, we need to adapt the code to handle these changes in price when a variant is selected.

Here’s how I improved the snippet to cover variable products effectively:

add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_product_price_recalculate' );

function bbloomer_product_price_recalculate() {
   global $product;

   // Assume a default price
   $price = $product->get_price();
   
   echo '<div id="subtot" style="display:inline-block;">Total: <span></span></div>';
   $currency = get_woocommerce_currency_symbol();
  
   wc_enqueue_js( "
      var basePrice = " . esc_js( $price ) . ";
      function calculateSubtotal() {
          var qty = $('[name=quantity]').val();
          var price = $('.woocommerce-variation-price .price .amount').text().replace(/[^0-9.,]/g, '') || basePrice;
          var subtotal = parseFloat(price) * parseInt(qty);
          $('#subtot > span').html('" . esc_js( $currency ) . "'+subtotal.toFixed(2));
      }
      $('[name=quantity], .variations_form').on('input change', calculateSubtotal);
      $(document).ready(calculateSubtotal);
   " );
}

Improvements and Key Changes:

1. Handling Variable Products: The original attempt to fetch prices for variable products used a method to get default attributes, which won’t handle the dynamic changes when a user selects different variations. I used front-end modification instead, detecting price changes directly from the price display, which gets updated whenever variations change. This approach ensures that even if new variations are added or prices are updated, the script will still function correctly.

1. JavaScript Modifications: Instead of just monitoring quantity changes, the script now also monitors changes in the form that manages variations (.variations_form). This is crucial because changing a variation needs to trigger a subtotal recalculation.

1. Fallback Price: basePrice is used as a fallback if the script can’t find a variation price. This is particularly useful for products that might briefly show a price of $0.00 when between variations selections.

By utilizing jQuery and WooCommerce’s hooks and existing structure smartly, this modified snippet tackles the variant product pricing challenge head-on, ensuring an accurate subtotal is displayed dynamically based on both the selected quantity and variation. Hence, with the help of this modified code, users on a product page would have a better understanding of the cost implications of their purchase choices instantaneously.