Overriding properly WooCommerce function WC_Price() in a clean way

Question

What is the best way to properly override a pre-existing WooCommerce function? In this case I want to modify the wc_price() function. I don't need to do anything crazy with it, I literally just need to add an HTML <span> attribute around the price.

I know the code is as follows:

function wc_price( $price, $args = array() ) {
    extract( apply_filters( 'wc_price_args', wp_parse_args( $args, array(
      'ex_tax_label'       => false,
      'currency'           => '',
      'decimal_separator'  => wc_get_price_decimal_separator(),
      'thousand_separator' => wc_get_price_thousand_separator(),
      'decimals'           => wc_get_price_decimals(),
      'price_format'       => get_woocommerce_price_format(),
    ) ) ) );

    $negative        = $price < 0;
    $price           = apply_filters( 'raw_woocommerce_price', floatval( $negative ? $price * -1 : $price ) );
    $price           = apply_filters( 'formatted_woocommerce_price', number_format( $price, $decimals, $decimal_separator, $thousand_separator ), $price, $decimals, $decimal_separator, $thousand_separator );

    if ( apply_filters( 'woocommerce_price_trim_zeros', false ) && $decimals > 0 ) {
       $price = wc_trim_zeros( $price );
    }

    $formatted_price = ( $negative ? '-' : '' ) . sprintf( $price_format, '<span class="woocommerce-Price-currencySymbol">' . get_woocommerce_currency_symbol( $currency ) . '</span>', $price );
    $return          = '<span class="woocommerce-Price-amount amount">' . $formatted_price . '</span>';

    if ( $ex_tax_label && wc_tax_enabled() ) {
       $return .= ' <small class="woocommerce-Price-taxLabel tax_label">' . WC()->countries->ex_tax_or_vat() . '</small>';
    }

    return apply_filters( 'wc_price', $return, $price, $args );
}

All I want to do is to change it to:

function wc_price( $price, $args = array() ) {
    extract( apply_filters( 'wc_price_args', wp_parse_args( $args, array(
      'ex_tax_label'       => false,
      'currency'           => '',
      'decimal_separator'  => wc_get_price_decimal_separator(),
      'thousand_separator' => wc_get_price_thousand_separator(),
      'decimals'           => wc_get_price_decimals(),
      'price_format'       => get_woocommerce_price_format(),
    ) ) ) );

    $negative        = $price < 0;
    $price           = apply_filters( 'raw_woocommerce_price', floatval( $negative ? $price * -1 : $price ) );
    $price           = apply_filters( 'formatted_woocommerce_price', number_format( $price, $decimals, $decimal_separator, $thousand_separator ), $price, $decimals, $decimal_separator, $thousand_separator );

    if ( apply_filters( 'woocommerce_price_trim_zeros', false ) && $decimals > 0 ) {
       $price = wc_trim_zeros( $price );
    }

    $formatted_price = ( $negative ? '-' : '' ) . sprintf( $price_format, '<span class="woocommerce-Price-currencySymbol">' . get_woocommerce_currency_symbol( $currency ) . '</span>', <span class="custom-prc"> . $price . </span> );
    $return          = '<span class="woocommerce-Price-amount amount">' . $formatted_price . '</span>';

    if ( $ex_tax_label && wc_tax_enabled() ) {
       $return .= ' <small class="woocommerce-Price-taxLabel tax_label">' . WC()->countries->ex_tax_or_vat() . '</small>';
    }

    return apply_filters( 'wc_price', $return, $price, $args );
}

Any help at all would be greatly appreciated! Thanks!

Answer 1

To add your custom html tag <span class="custom-prc">0000</span> around the price, you will need to use a hooked function in formatted_woocommerce_price filter hook this way:

add_filter( 'formatted_woocommerce_price', 'span_custom_prc', 10, 5 );
function span_custom_prc( $number_format, $price, $decimals, $decimal_separator, $thousand_separator){
    return '<span class="custom-prc">'.$number_format.'</span>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

The code is tested and works with WooCommerce 3+

---

Then you will get this html output (for example with 42,00 euros):

<span class="price">
    <span class="woocommerce-Price-amount amount">
        <span class="custom-prc">42,03</span>
        "&nbsp;"
        <span class="woocommerce-Price-currencySymbol">€</span>
    </span>
</span>