Help me customize price info on product page

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

  • Avatar: jimie
    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.
    3 Answers
    Avatar: Justin
    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

    Avatar: jimie
    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 ..

    Avatar: Justin
    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.

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.