如何在WooCommerce中实现可变商品促销徽章的条件显示？

Absolutely, this is totally doable! You'll just need to combine a small CSS adjustment with some JavaScript to listen for variation selections and toggle the badge based on the selected variant's sale status. Here's a step-by-step solution:

1. Update Your CSS #

First, modify your existing CSS to use a toggleable class instead of permanently hiding the badge. This gives us more control and allows for smooth layout transitions:

/* Default state: hide the badge */
.product-type-variable .onsale {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Active state: show the badge when the variant is on sale */
.product-type-variable .onsale.active {
    opacity: 1;
    visibility: visible;
}

We use opacity and visibility instead of display: none to preserve the badge's layout space (preventing sudden page shifts) and add a subtle smooth transition effect.

2. Add JavaScript to Handle Variation Selections #

WooCommerce triggers specific JavaScript events when users interact with variable products. We'll hook into these events to check the selected variant's sale status and update the badge accordingly.

Add this script to your theme's functions.php file (using wp_enqueue_script) or directly into your child theme's custom JS file:

jQuery(document).ready(function($) {
    // Target the variable product container and the onsale badge
    const $variableProduct = $('.product-type-variable');
    const $onsaleBadge = $variableProduct.find('.onsale');

    // Helper function to update badge visibility
    const updateBadgeVisibility = (variation) => {
        // Check if the variant has a sale price that differs from the regular price
        const isOnSale = variation && variation.sale_price && variation.sale_price !== variation.price;
        $onsaleBadge.toggleClass('active', isOnSale);
    };

    // Trigger when a valid variation is selected
    $variableProduct.on('found_variation', (event, variation) => {
        updateBadgeVisibility(variation);
    });

    // Trigger when variations are reset (user clears selections)
    $variableProduct.on('reset_variation', () => {
        $onsaleBadge.removeClass('active');
    });

    // Check for default selected variation on page load
    const productVariations = $variableProduct.find('.variations_form').data('product_variations');
    if (productVariations) {
        const defaultVariation = productVariations.find(variation => variation.is_default);
        if (defaultVariation) {
            updateBadgeVisibility(defaultVariation);
        }
    }
});

How This Works: #

• found_variation Event: Fires when the user selects all required attributes and WooCommerce loads the matching variant data. We check if the variant has a distinct sale price to show the badge.
• reset_variation Event: Fires when the user resets their variation selections. We hide the badge in this case.
• Initial Load Check: If your product has a default pre-selected variant, we check its sale status on page load and show the badge if needed.

3. Testing #

Make sure to test these scenarios to confirm everything works as expected:

• Select an on-sale variant → Badge should appear
• Select a non-sale variant → Badge should disappear
• Reset your selections → Badge should hide
• Load a product with a default on-sale variant → Badge should show immediately

This solution integrates seamlessly with WooCommerce's native functionality and won't interfere with other parts of your store.

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