Reposition prices and create saving amount notice

  • Hi, I’m still working on my WooCommerce but now and then sometimes I just stuck in few of the weirdest things I’ve ever seen. The thing is, WooCommerece prices (including list price and promoted price) display like this:

    list price on the left, and promoted price on the right with only small space in between

    Is there any way we can reposition these two into promoted price on the left and list price on the right? Or even more, promoted price on top and list price on the second line?

    Next, some websites have the ability to show viewers how much they save when choosing a product. So is there any mathematical code for this linking with both the above WooCommerce prices?

    My ultimate desired result

    I’d be forever grateful if anyone can help me with this styling. Thank you.

Viewing 1 replies (of 1 total)

  • Hi,

    You can do that using woocommerce filter hook, please check below code and put that in functions.php of your theme

    
function change_woocomm_price_html( $price,$regular_price, $sale_price ){
	if(is_product()){
		$price = '<ins class="block-ins">' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</ins><del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del>';
	}
	return $price;
}
add_filter( 'woocommerce_format_sale_price','change_woocomm_price_html',10,3 );

    Also, add this style in your css file

    
.block-ins{color: rgb(255,0,114) !important; font-size: 48px;}

    This will give you structure like what you have showed in image, but still its missing “You Save $”, that needs some research.

Viewing 1 replies (of 1 total)
  • The topic ‘Reposition prices and create saving amount notice’ is closed to new replies.