Save amount product page

Hi, which hook are you using?
I have no problem with

add_action('woocommerce_single_product_summary', 'ts_you_save', 10);
function ts_you_save()
{
	global $product;
	if( $product->is_type(array('simple', 'external', 'grouped') ) )
	{
		$regular_price = $product->get_regular_price();
		$sale_price = $product->get_sale_price();

		if( !empty($sale_price) )
		{
			$amount_saved = $regular_price - $sale_price;
			$percentage = ($amount_saved * 100) / $regular_price ;

			?>
				<p style="font-size:16px;color:black;">
					<b>You save: <?php echo wc_price($amount_saved)." (". round($percentage)."%)"; ?></b>
				</p>
			<?php
		}
	}
}

(I did some tweaks to take advantage of woocommerce functions)

I forgot a line of code, that was the problem.

This code is for variable products for the “You save” text, How to change the style to be just like in the other code (font-size:16px;color:black) and also thickness ??
TEXT CIRCLED IN RED
https://snipboard.io/bNoEMK.jpg

add_filter( 'woocommerce_available_variation', 'variable_product_saving_amount', 10, 3 );
function variable_product_saving_amount( $data, $product, $variation ) {

    if( $variation->is_on_sale() ) {
        $saved_amount  = $data['display_regular_price'] - $data['display_price'];
        $percentage    = round( $saved_amount / $data['display_regular_price'] * 100 );

        $data['price_html'] .= '<p id="saving_total_price"><span style="font-size:16px !important;color:black !important;">'. __("You save") .' : ' . wc_price($saved_amount) . ' ('.$percentage.'%)</span></p>';     
    }
    return $data;
}

• This reply was modified 3 years, 9 months ago by freddyee.
• This reply was modified 3 years, 9 months ago by freddyee.

Hello ?

Hi @freddyee
If you want some help with custom css please link to the page so we can see it and then we can see if we can help with your custom code.

Ben

Hi
The need of custom CSS is for variable products, this is the link of one of those products: https://www.runayaq.com/producto/polo-valle-del-mantaro-peru/

Right now looks like this and in this position:
https://snipboard.io/2rWBFx.jpg

I want it to look like this and in this position:
https://snipboard.io/i2BsCD.jpg

Hey
Try adding this to your custom css:

p#saving_total_price {
    position: absolute;
    top: 110px;
}
p.price {
    padding-bottom: 20px;
}

Hope that helps!

Kindly,
Hannah

Thank you very much !

That worked, but only on PC version , on mobile version the text appears in the middle of the product image.

How can that be solved ?

• This reply was modified 3 years, 8 months ago by freddyee.

Oh sorry, you can wrap it in a media query like this:

@media (min-width: 992px) {
p#saving_total_price {
    position: absolute;
    top: 110px;
}
p.price {
    padding-bottom: 20px;
}
}

Best,
Hannah

yes, that solve the problem of having the text in the picture, but is there any possibility of having it in the same position as in the pc version ?

Hey,
Unfortunately, I’m not sure of how to best display this as you’re wanting on mobile. It’s tricky with css because the screen size changes so much, moving the text up and down. You can use a plugin such as this one: https://www.kadencewp.com/product/kadence-woocommerce-elementor/
That will give you a bit more control over the product page layout, but even still I’m not sure if it will allow you to display things exactly as you’re wanting on mobile.

Kindly,
Hannah

Can I use that plugin with the already created product pages ? if so, how ?

Yes! When the plugin is active you can assign products to specific templates. Let me know if you need further guidance with this!

Best,
Hannah