Return to previous page

Help me customize price info on product page

This topic has 4 replies, 2 voices, and was last updated 4 months, 4 weeks ago ago by Luca Rossi

jimie

Participant

June 11, 2024 at 07:10

Hello,

Can you please help me customize the price layout so it can look like in the attached print?

Thanks

Files is visible for topic creator and
support staff only.

#399170 Copied Theme version: 9.3

3 Answers
Luca Rossi

Support staff

June 11, 2024 at 09:58
Hi @jimie,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.single-product p.price ins {
    display: block;
    font-weight: bold;
    padding-left: 0
}
.single-product p.price ins bdi {
    color: red;
}
```
Best Regards,
8Theme’s Team
#399211 Copied
jimie

Participant

June 11, 2024 at 10:17

What about showing discount percent as I showed you in the image ? Css part I can handle ..

#399216 Copied
Luca Rossi

Support staff

June 11, 2024 at 11:09
Hi @jimie,

Please try adding the following code under functions.php file locates in your child theme:
```
add_filter( 'woocommerce_get_price_html', 'change_displayed_sale_price_html', 10, 2 );
function change_displayed_sale_price_html( $price, $product ) {
	// Only on sale products on frontend and excluding min/max price on variable products
	if( is_singular('product') && $product->is_on_sale() && ! is_admin() && ! $product->is_type('variable')){
		// Get product prices
		$regular_price = (float) $product->get_regular_price(); // Regular price
		$sale_price = (float) $product->get_price(); // Active price (the "Sale price" when on-sale)

		// "Saving Percentage" calculation and formatting
		$precision = 1; // Max number of decimals
		$saving_percentage = round( 100 - ( $sale_price / $regular_price * 100 ), 1 ) . '%';

		// Append to the formated html price
		$price .= sprintf( __('<p class="saved-sale">You save: %s</p>', 'woocommerce' ), $saving_percentage );
	}
	return $price;
}
```
For more information, please take a look at this article: https://stackoverflow.com/questions/48480480/display-the-discounted-price-and-percentage-on-woocommerce-products.

Please note that further cusomization codes will fall out of scope our support service.

If you require personal customization services, we invite you to submit a request through our customization panel at: https://www.8theme.com/account/#etheme_customization_panel , and continue conversations with the technicians team directly.
Please be advised that customization services will incur additional charges, the exact amount of which will be communicated following a detailed review of your request.

Best Regards,
[Luca Rossi]
8Theme’s Team.
#399221 Copied
Tagged: customize woocommerce product pricing, price info customization woocommerce, product page price adjustments, woocommerce custom pricing, woocommerce templates customization, wordpress product page customization, wordpress woocommerce pricing guide
Viewing 4 results - 1 through 4 (of 4 total)