Customize the selected product variation prices in WooCommerce

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

The specific Price I am refering 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 }}}

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

1 answer

  • answered 2018-01-11 22:17 LoicTheAztec

    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