WooCommerce如何隐藏特定产品变体的Add to Cart按钮

Got it, let's tackle this exact scenario you're dealing with—where some variants (like your 1/2/3 color print tees) need to redirect to a quote request instead of letting users add to cart, while others (like the plain XL green tee) stay functional. I’ve worked through similar setups before, so here’s a step-by-step solution that plays nice with your existing quote plugin:

Step 1: Target Your Specific Variants #

First, we need to identify which variants to modify. The most flexible way is to use your product’s attribute (e.g., "Print Colors") instead of hardcoding variant IDs (since IDs can change if you add/remove variants).

• Go to Products > Attributes to get your attribute’s slug (it’ll look like pa_print-colors for an attribute named "Print Colors").
• Note the slugs for your target attribute values (e.g., 1-color, 2-colors, 3-colors for "1 Color", "2 Colors", "3 Colors").

Step 2: Replace Add-to-Cart Button with Quote Button #

Add this code to your child theme’s functions.php file (or a custom plugin—never edit the parent theme directly!):

// Swap add-to-cart button for quote button on target variants
add_filter('woocommerce_variation_add_to_cart_button', 'swap_variation_cart_button_for_quote', 10, 2);
function swap_variation_cart_button_for_quote($button_html, $variation) {
    // Get the variation's print color attribute adjust slug to match yours
    $print_color_attr = $variation->get_attribute('pa_print-colors');
    
    // Define which attribute values trigger the quote button adjust values to match yours
    $quote_trigger_values = ['1-color', '2-colors', '3-colors'];
    
    if (in_array($print_color_attr, $quote_trigger_values)) {
        // Replace with your quote plugin's button/shortcode
        // Example 1: If your plugin uses a shortcode with product ID
        $button_html = do_shortcode('[request_quote_btn product_id="' . $variation->get_id() . '"]');
        
        // Example 2: If you need a custom button that triggers your plugin's modal
        // $button_html = '<button class="request-quote-btn button alt" data-variant-id="' . $variation->get_id() . '">Request an Offer</button>';
    }
    
    return $button_html;
}

Step 3: Handle Dynamic Variant Switches (Frontend) #

WooCommerce dynamically updates the product page when users select a different variant, so we need some JS to show/hide elements like the quantity input based on the selected variant:

// Add frontend JS to adjust elements when switching variants
add_action('woocommerce_before_single_variation', 'dynamic_variant_quote_toggle', 10);
function dynamic_variant_quote_toggle() {
    global $product;
    if (!$product->is_type('variable')) return;
    ?>
    <script>
        jQuery(document).ready(function($) {
            // Listen for variant selection changes
            $('.variations_form').on('show_variation', function(event, variation) {
                // Check if selected variant is a quote trigger adjust slug/values to match yours
                const selectedPrintColor = variation.attributes['attribute_pa_print-colors'];
                const quoteTriggers = ['1-color', '2-colors', '3-colors'];
                
                if (quoteTriggers.includes(selectedPrintColor)) {
                    // Hide quantity input and default cart button container
                    $('.quantity').hide();
                    $('.woocommerce-variation-add-to-cart').hide();
                } else {
                    // Restore elements for normal variants
                    $('.quantity').show();
                    $('.woocommerce-variation-add-to-cart').show();
                }
            });
        });
    </script>
    <?php
}

Key Notes to Adjust for Your Setup #

• Attribute Slug/Values: Double-check that pa_print-colors and the values in quote_trigger_values match your actual attribute setup. You can find these in WooCommerce’s attribute editor.
• Quote Plugin Integration: Replace the example shortcode/button HTML with whatever your quote plugin provides. Most quote plugins offer shortcodes or template tags to generate their button—check your plugin’s docs for the exact code.
• Testing: Clear your WooCommerce and browser cache after adding the code, then test selecting different variants to make sure the button and elements toggle correctly.

Why This Works Where Other Solutions Might Have Failed #

Many generic solutions only modify the static product page, but miss the dynamic variant switch behavior. This code covers both the backend button replacement (for each variant’s rendered HTML) and the frontend JS (to handle real-time user selections), ensuring a seamless experience.

内容的提问来源于stack exchange，提问作者timmeah