Main function for displaying prices is get_price_html()
in /woocommerce/includes/abstracts/abstract-wc-product.php
file, and there are some filters to allow users to customize the html for prices:
- woocommerce_sale_price_html
- woocommerce_price_html
- woocommerce_empty_price_html
- woocommerce_free_sale_price_html
- woocommerce_free_price_html
- woocommerce_get_price_html
This function performs a complete job for showing prices including taxes and on sale calculations, and since you are completely rewriting the html the example below uses last filter there woocommerce_get_price_html. It extracts the prices from the original HTML and insert them into a new HTML structure.
add_filter( 'woocommerce_get_price_html', function( $price, $product )
{
global $woocommerce_loop;
// check if we are in single product page, in main section, and if product has price and is on sale
if ( is_product() && !isset( $woocommerce_loop ) && $product->get_price() && $product->is_on_sale() ) {
// collect prices from $price html string
$prices = array_map( function( $item ) {
return array( $item, (float) preg_replace( "/[^0-9.]/", "", html_entity_decode( $item, ENT_QUOTES, 'UTF-8' ) ) );
}, explode( ' ', strip_tags( $price ) ) );
$price = isset( $prices[0][0] ) ? '<span class="orig-price">Original Price: ' . $prices[0][0] . '</span>' : '';
$price .= isset( $prices[1][0] ) ? '<span class="sale-price">Sale Price: ' . $prices[1][0] . '</span>' : '';
if ( $product->get_regular_price() ) {
// set saved amount with currency symbol placed as defined in options
$price .= '<span class="saved">You saved: ' . sprintf( get_woocommerce_price_format(), get_woocommerce_currency_symbol(), $prices[0][1] - $prices[1][1] ) . '</span>';
}
}
return $price;
}, 10, 2 );
I'm using span tags here instead of divs used in question because the output is still wrapped in a paragraph. For further customization override the price.php template by placing him inside /themes/yourtheme/woocommerce/single-product/
folder.