Search code examples
phpwordpresswoocommerceproduct-variations

Customize the selected product variation prices in WooCommerce

Essentially I am trying to figure out where variation data is calculated and displayed in the HTML when a user makes her selection. This is my shop link.

The specific Price I am referring to:

Specific Price I am refering to

Basically, I want to find out where this data is plugged in and where I can modify it.

That the data is imported by some JS in the template single-product/add-to-cart/variation.php:

<div class="woocommerce-variation-price">
    {{{ data.variation.price_html }}}
</div>

My end goal is to simply modify how the sale & price are displayed, maybe prefix them with something like Price: and Sale:.

WP Version: 4.9.1
WC Version: 3.2.6
Theme: Flatsome3 v3.3.9

Solution

  • Using the following hooked function, you will ne able to prefix each price when product is on sale for all product types:

    // Prefix the selected variation prices When discounted for variable products (on sale)
add_filter( 'woocommerce_format_sale_price', 'prefix_variations_selected_prices', 10, 3 );
function prefix_variations_selected_prices( $price, $regular_price, $sale_price ) {
    global $product;

    // Just for variable products on single product pages
    if( $product->is_type('variable') && is_product() ) {

        // Custom texts
        $price_txt =  __( 'Price', 'woocommerce' ) . ': ';
        $sale_txt = __(' Sale', 'woocommerce' ).': ';

        return '<del>' . $price_txt . wc_price( $regular_price ) . '</del> <ins>' . $sale_txt . wc_price( $sale_price ) . '</ins>';
    }
    return $price;
}

    Code goes in function.php file of the active child theme (or active theme).

    Tested and works.

    You will get something like:

    enter image description here

    Based on this similar answer:
    Display discount percentage after the selected variation sale price in WooCommerce