How to override Woocommerce wc_format_sale_price function properly? - woocommerce

Question

I am struggling with this task and I could really use some help. First, before somebody marks this as an off-topic, I already did read all the questions and answers here and other sites as well. No luck.
I am trying to edit the HTML output of the wc_format_sale_price function located in wc-formatting-functions.php.
Original code is:
function wc_format_sale_price( $regular_price, $sale_price ) {
$price = '<del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del> <ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</ins>';
return apply_filters( 'woocommerce_format_sale_price', $price, $regular_price, $sale_price );
As you can see the prices are encapsulated in HTML elements <del> and <ins>.
I did tried to change the HTML directly and it works perfectly.
function wc_format_sale_price( $regular_price, $sale_price ) {
$price = '<div id="priceBefore" style="font-size: 16px;" class="old-price">' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</div> <div id="priceAfter" style="font-size: 24px;" class="price">' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</div>';
return apply_filters( 'woocommerce_format_sale_price', $price, $regular_price, $sale_price );
The thing is I don't want to change WC core files because it is a bad practice and the changes will be removed every time the shop owner updates the WC plugin.
After some research I am sure that this should be done using filters in my theme's functions.php file but all the tutorials and articles about this functionality are quite messy. I did tried to follow few of them and I ended up with blank page, duplicate prices and stuff like that.
I understand that filters and actions are alpha and omega of Wordpress/Woocommerce theme development but my attempts to make them work were all just failures.

Answer 1

I actually found out how to solve this issue.
I did some more research and I found out this answer on Stack Overflow: https://stackoverflow.com/a/45112008/6361752 where the user called LoicTheAztec pointed out that woocommerce_format_sale_price hook accepts three arguments. So i added $price as the third argument to my filter function and now it works.
Final solution which I put into my theme's functions.php file looks like this:
add_filter('woocommerce_format_sale_price', 'ss_format_sale_price', 100, 3);
function ss_format_sale_price( $price, $regular_price, $sale_price ) {
$output_ss_price = '<div id="priceBefore" style="font-size: 16px;" class="old-price">' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</div> <div id="priceAfter" style="font-size: 24px;" class="price">' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</div>';
return $output_ss_price;
}
I am posting this answer just to make sure no more time is wasted on such a simple thing.
There is only one more thing I would like to know. How is it possible that the original function uses just two arguments and works flawlessly when my filter function needs to accept three arguments to work properly? Any ideas?