Display price with vat below price without vat

Hi,
I managed to put the price inc. vat below the price ex vat by added code below in functions.php

add_filter( 'woocommerce_get_price_suffix', 'wc_add_price_suffix_price_inc_tax', 99, 4 );
   
function wc_add_price_suffix_price_inc_tax( $suffix, $product, $price, $qty ){
    $suffix = '<small><small> +vat</small></small></br>' . wc_price( wc_get_price_including_tax( $product ) ) . ' <small><small>inc.vat</small></small>';
    return $suffix;
}

Now I wish to reduce the fonts size of the price inc. vat for shop page and single product page.
I think that there is a css code to insert. Can you please help ?

Find below website address:
https://itbox.mu/beta/product-category/pc-desktops/

Thank you in advance.

• This reply was modified 1 year, 7 months ago by ridersjin.
• This reply was modified 1 year, 7 months ago by ridersjin.

Hi @ridersjin

I managed to put the price inc. vat below the price ex vat by added code below in functions.php

Now I wish to reduce the fonts size of the price inc. vat for shop page and single product page. I think that there is a css code to insert. Can you please help?

Great job on successfully adding the price inclusive of VAT below the price exclusive of VAT on your shop and single product pages! Now, you’re looking to tweak the font size of the price that includes VAT. You’re right, CSS is the way to go for this!

Here’s a simple step-by-step guide to help you:

1. Navigate to Appearance > Customize in your WordPress dashboard.
2. Click on Additional CSS.
3. In the text box, enter the following code:

.product .woocommerce-Price-amount {
  font-size: 15px; /* Change this to the size you want */
}

This CSS code specifically targets the WooCommerce price amount class, which is usually used to display the price on your shop and single product pages. Feel free to change the value of the font-size property to whatever size you’re comfortable with.

Image Link: https://s11.gifyu.com/images/ScBgR.gif

I hope this helps! If there’s anything else you need help with or if you have more questions, please don’t hesitate to ask.

Hi Tamrat,

Thank you for your reply.
When I add your css code, both prices (exc. vat and inc. vat) are reduced.
I wish to reduce the price inc. vat only.
Can you please help ?

Thanks in advance.

• This reply was modified 1 year, 7 months ago by ridersjin.

/* inc VAT price */
.product .woocommerce-Price-amount {
  font-size: 10px !important; 
}
/* +VAT price */
.product ins .woocommerce-Price-amount {
  font-size: 16px !important;
}

Hi Lorro,

Thank you for your email.
The code works well for the discounted prices but not the normal prices.
Find below picture for details
https://ibb.co/g6PJxyt
I think we need to add another css code.

Thanks in advance for your help.

/* ex VAT price */
.product .woocommerce-Price-amount:first-child {
  font-size: 16px !important; 
}
/* deleted price */
.product del .woocommerce-Price-amount:first-child {
  font-size: 12px !important; 
}

If it doesn’t work, please take out all the new styles affecting price so I can start from new.

Hi Lorro,

It works perfectly now. Thank you very much.

In single product page, I wish to reduce the suffix prices fonts size (ex. vat and inc. vat)
Can you help me please ?
https://ibb.co/6gbXhV5

The font size is too small for users with poor eyesight as it is. And the colour contrast, orange on white, is not great. But if you must:

.price small {
  font-size: 8px;
}

Hi Lorro,

The code works perfectly.
Thank you very much ??

Hi @ridersjin

The code works perfectly. Thank you very much ??

I’m thrilled to know that the code @lorro provided worked like a charm for you! It’s fantastic to see you’ve managed to adjust the font size of the price, inclusive of VAT, on your single product page successfully.

I’ll go ahead and mark this thread as resolved. However, if you ever have more questions or issues in the future, don’t hesitate to kick off a new topic.

And a huge shout-out to @lorro for stepping in with the needed help. We can’t thank you enough for your valuable contribution.

Hope you have a fantastic day!