Custom Onsale Badge for Individual Variations
This code is used to enhance the functionality of a WooCommerce variable product by adding a "On Sale" badge to the variation options when they are selected. The code consists of several functions and actions. The first function, 'add_data_sale_to_variation_option', adds a 'data-sale' attribute to the variation options that are on sale. The second function, 'cwpai_add_sale_badge_script', adds a script to the footer that listens for the change event on select elements and dynamically adds or removes the "On Sale" badge based on the selected option. The third function, 'cwpai_hide_default_sale_badge', hides the default sale badge using CSS. The fourth function, 'cwpai_add_on_sale_badge_styles', adds custom CSS styles for the "On Sale" badge.
<?php add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'cwpai_add_data_sale_to_variation_option', 10, 2 ); function cwpai_add_data_sale_to_variation_option( $html, $args ) { // Ensure that the product is a variable product if ( isset( $args['product'] ) && $args['product']->is_type( 'variable' ) ) { $product = $args['product']; $attribute = $args['attribute']; $variations = $product->get_available_variations(); // Iterate over each variation foreach ( $variations as $variation ) { $variation_obj = wc_get_product( $variation['variation_id'] ); // Check if the variation is on sale if ( $variation_obj->is_on_sale() ) { foreach ( $variation['attributes'] as $attr_name => $attr_value ) { // Only add data-sale to the matching attribute options if ( 'attribute_' . sanitize_title( $attribute ) === $attr_name ) { // Use preg_replace to add data-sale="true" to the correct <option> element $html = preg_replace( '/<option value="' . preg_quote( esc_attr( $attr_value ), '/' ) . '"/', '<option value="' . esc_attr( $attr_value ) . '" data-sale="true"', $html ); } } } } } return $html; } add_action( 'wp_footer', 'cwpai_add_sale_badge_script' ); function cwpai_add_sale_badge_script() { ?> <script type="text/javascript"> jQuery(document).ready(function($) { $("select").change(function() { var optionSelected = $(this).find('option:selected'); setTimeout(function() { var priceElement = $(".price"); var badgeElement = $(".on-sale-badge"); if (optionSelected.data('sale')) { if (!badgeElement.length) { var newBadge = $('<span class="on-sale-badge">On Sale</span>'); newBadge.insertAfter(priceElement); newBadge.hide().fadeIn(200); } } else { badgeElement.fadeOut(200, function() { $(this).remove(); }); } }, 100); }); }); </script> <?php } add_action( 'woocommerce_after_single_product', 'cwpai_hide_default_sale_badge' ); function cwpai_hide_default_sale_badge() { global $product; if ( $product->is_type( 'variable' ) ) { $variations = $product->get_available_variations(); $on_sale = false; foreach ( $variations as $variation ) { if ( $variation['display_price'] < $variation['display_regular_price'] ) { $on_sale = true; break; } } if ( $on_sale ) { ?> <style type="text/css"> .onsale { display: none !important; } </style> <?php } } } add_action( 'wp_head', 'cwpai_add_on_sale_badge_styles' ); function cwpai_add_on_sale_badge_styles() { ?> <style type="text/css"> .on-sale-badge { background-color: #77a464; color: #fff; padding: 2px 4px; margin-left: 5px; border-radius: 2px; display: inline-block; font-size: 0.8em; } </style> <?php }
Frequently Asked Questions
The code customizes WooCommerce variable product variations by adding a sale badge to the options that are on sale.