INSOMNIA INC

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

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.

Support the support: If you’d be inclined to support my efforts, you can caffeinate me. This helps me actively assist others like yourself within the Reddit WordPress, WooCommerce, and Divi communities by providing unique solutions to non-standard requests and free alternatives to expensive subscription plugins.

HOW TO ADD CODE SNIPPETS

To use the code snippet below, you’ll need to add it to your WordPress site. You can do this in one of two ways:

  1. Child theme functions.php: If you have a child theme set up, you can add the code to the functions.php file. Do not add to your themes functions.php as updating the theme will wipe the code.
  2. Code Snippets Plugin: If you’re not comfortable with coding or don’t have a child theme, you can use a plugin like Code Snippets to add the code. This plugin allows you to add code snippets to your site without modifying your theme files and provides a failsafe if anything goes wrong.