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

wcvsosp.php

/*
 * @snippet       Display Variation Selectors & Add To Cart Button For Variable Products On Woocommerce Shop Pages
 * @author        u/acephaliax
 * @source        https://insomniainc.com/resources/uncategorized/variation-selectors-add-to-cart-button-for-variable-products-on-woocommerce-shop-pages/
 * @compatibility Last tested on WooCommerce 9.0.1
 * @community     r/wordpress, r/woocommerce
 * @caffeinate    https://buymeacoffee.com/acephaliax
 */

// Enqueue necessary scripts for shop and archive pages
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');

// 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');

// Add variation selector and custom "Add to Cart" button in product loops
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);

// Function to display variation selector and add-to-cart button
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,
        ));
    }
}

For reddit thread: https://www.reddit.com/r/woocommerce/comments/1drn607/how_to_allow_customers_to_add_product_variations
Support the support: https://buymeacoffee.com/acephaliax