Made in Chicago Company Directory

(@freddyee)

Hi
I used this code to show the saved value in each product page with an older theme I used, but now that I’m using Kadence, it doesn’t work , What can I do ?

function ts_you_save() {

global $product;

if( $product->is_type('simple') || $product->is_type('external') || $product->is_type('grouped') ) {

$regular_price = get_post_meta( $product->get_id(), '_regular_price', true );
$sale_price = get_post_meta( $product->get_id(), '_sale_price', true );

if( !empty($sale_price) ) {

$amount_saved = $regular_price - $sale_price;
$currency_symbol = get_woocommerce_currency_symbol();

$percentage = round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
?>
<p style="font-size:16px;color:black;"><b>You save: <?php echo $currency_symbol .''. number_format($amount_saved,2, '.', '')." (". number_format($percentage,0, '', '')."%)"; ?></b></p>
<?php
}
}
}

This topic was modified 3 years, 6 months ago by freddyee.

The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

Francisco
(@fmarconi)

3 years, 6 months ago
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 ;

			?>
				
					You save: <?php echo wc_price($amount_saved)." (". round($percentage)."%)"; ?>
				
			<?php
		}
	}
}
```
(I did some tweaks to take advantage of woocommerce functions)
Thread Starter freddyee
(@freddyee)

3 years, 6 months ago
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'] .= ''. __("You save") .' : ' . wc_price($saved_amount) . ' ('.$percentage.'%)'; 
 }
 return $data;
}
```
- This reply was modified 3 years, 6 months ago by freddyee.
- This reply was modified 3 years, 6 months ago by freddyee.
Thread Starter freddyee
(@freddyee)

3 years, 6 months ago

Hello ?

Theme Author Ben Ritner – Kadence WP
(@britner)

3 years, 6 months ago

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

Thread Starter freddyee
(@freddyee)

3 years, 6 months ago

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
hannah
(@hannahritner)

3 years, 6 months ago
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
Thread Starter freddyee
(@freddyee)

3 years, 6 months ago
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, 6 months ago by freddyee.
hannah
(@hannahritner)

3 years, 6 months ago
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
Thread Starter freddyee
(@freddyee)

3 years, 6 months ago

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 ?

hannah
(@hannahritner)

3 years, 6 months ago

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

Thread Starter freddyee
(@freddyee)

3 years, 6 months ago

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

hannah
(@hannahritner)

3 years, 5 months ago

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

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Save amount product page’ is closed to new replies.