Variation Selectors & Add To Cart Button For Variable Products On WooCommerce Shop Pages

The snippet below displays a variation selector & Add To Cart Button for variable products on WooCommerce shop pages, allowing customers to select product variations directly from the product loop. This tutorial provides a PHP code snippet to customize your WooCommerce shop page and improve the user experience.

Jump To Full Snippet

Step 1: Enqueue Necessary Scripts

function enqueue_woocommerce_scripts() {
    if (is_shop() || is_product_category() || is_product_tag() || is_product()) {
        // Enqueue the WooCommerce variation add-to-cart script
        wp_enqueue_script('wc-add-to-cart-variation', plugins_url('/woocommerce/assets/js/frontend/add-to-cart-variation.min.js'), array('jquery', 'wp-util'), false, true);
        
        // Custom JavaScript for handling variation forms
        wp_add_inline_script('wc-add-to-cart-variation', "
            jQuery(document).ready(function($) {
                $('.variations_form').each(function() {
                    $(this).wc_variation_form();
                    $(this).find('.variations select').change();
                });
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'enqueue_woocommerce_scripts');

• Conditionally Enqueue Scripts
  
  if (is_shop() || is_product_category() || is_product_tag() || is_product()) {
  
  This condition checks if the current page is a shop, product category, product tag, or product page.
  
• Enqueue WooCommerce Script
  
  wp_enqueue_script('wc-add-to-cart-variation', plugins_url('/woocommerce/assets/js/frontend/add-to-cart-variation.min.js'), array('jquery', 'wp-util'), false, true);
  
  This enqueues the add-to-cart-variation script, which is necessary for handling variable product add-to-cart functionality.
  
• Add Custom Inline Script
  
  wp_add_inline_script('wc-add-to-cart-variation', " jQuery(document).ready(function($) { $('.variations_form').each(function() { $(this).wc_variation_form(); $(this).find('.variations select').change(); }); }); ");
  
  This adds a custom inline script to initialize variation forms on the shop and archive pages.

Step 2: Remove Default Add to Cart Buttons

function remove_default_add_to_cart_buttons() {
    // Remove default add-to-cart button
    remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
}
add_action('woocommerce_init', 'remove_default_add_to_cart_buttons');

• Remove Default Button
  
  remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);
  
  This line removes the default add-to-cart button from the product loop on shop and archive pages.

Step 3: Add Custom Add to Cart Button

function add_variable_add_to_cart_button() {
    global $product;
    if ($product->is_type('variable')) {
        // Add custom variation add-to-cart button for variable products
        woocommerce_variable_add_to_cart();
    } else {
        // Add default add-to-cart button for simple products
        woocommerce_template_loop_add_to_cart();
    }
}
add_action('woocommerce_after_shop_loop_item', 'add_variable_add_to_cart_button', 10);

• Check Product Type
  
  if ($product->is_type('variable')) {
  
  This checks if the current product is a variable product.
  
• Add Custom Button for Variable Products:
  
  woocommerce_variable_add_to_cart();
  
  This calls the custom function to add the variation selector and add-to-cart button for variable products.
  
• Add Default Button for Simple Products
  
  woocommerce_template_loop_add_to_cart();
  
  This calls the default WooCommerce function to add the add-to-cart button for simple products.

Step 4: Define Custom Add to Cart Function

if (!function_exists('woocommerce_variable_add_to_cart')) {
    function woocommerce_variable_add_to_cart() {
        global $product;
        if (!$product->is_type('variable')) {
            return;
        }
        // Get product variation data
        $available_variations = $product->get_available_variations();
        $attributes = $product->get_variation_attributes();
        $selected_attributes = $product->get_default_attributes();
        // Load the variation add-to-cart template
        wc_get_template('single-product/add-to-cart/variable.php', array(
            'available_variations' => $available_variations,
            'attributes' => $attributes,
            'selected_attributes' => $selected_attributes,
        ));
    }
}

• Function Check
  
  if (!function_exists('woocommerce_variable_add_to_cart')) {
  
  This ensures the function is only defined once.
  
• Product Type Check
  
  if (!$product->is_type('variable')) { return; }
  
  This checks if the current product is a variable product and returns early if not.
  
• Get Variation Data
  
  $available_variations = $product->get_available_variations(); $attributes = $product->get_variation_attributes(); $selected_attributes = $product->get_default_attributes();
  
  These lines retrieve the available variations, variation attributes, and selected attributes for the product.
  
• Load Template
  
  wc_get_template('single-product/add-to-cart/variable.php', array( 'available_variations' => $available_variations, 'attributes' => $attributes, 'selected_attributes' => $selected_attributes, ));
  
  This loads the WooCommerce template for variable product add-to-cart functionality with the retrieved data.