Posted on

WooCommerce – How to show savings in an onsale product instead of “sale”?

If you have your product on sale, sometimes you’d like to show the savings from that sale instead of just the sale badge. The following code snippet would allow you to do just that.

Please note that in variable product, it tries to show the maximum savings possible. So it is advised to add “upto” in the sale badge.

Default WooCommerce just shows the sale badge like above.
Now you can show the savings instead of just the sale badge.

The custom code is given below. Please paste the code below in your child theme’s functions.php, please make sure to copy from line 2 only.

Custom code to show savings instead of sale. You can pass ‘amount’ or ‘percentage’ on line 86. Please copy from line 2 only.
Posted on

WooCommerce – Remove h2 tag from product title

In product loop pages like shop and category pages, the product title is displayed within h2 tags. You can use this code snippet to change the h2 tag to a span tag. You can also modify the code to use any other tag instead of the span tag.

Since WooCommerce does not have a filter for the function that displays the WooCommerce loop product title, we’ll be overriding the core function itself. woocommerce_template_loop_product_title is the WooCommerce’s core function and we are overriding it like below:

Please paste the above code in your theme’s functions.php to remove the h2 tag from product title. Copy from line 2 only.
Posted on

Disable product gallery zoom in WooCommerce 3.0+

Product Gallery in Electro WooCommerce Theme

WooCommerce 3.0 was a major release and it included a complete overhaul of Product Image gallery. The new gallery had advanced features like image zoom, mobile features and gallery view. Product zoom is a necessary feature for products that are more detailed in nature. For other type of products, its unnecessary and many users would like to disable it.

To disable the product gallery zoom please add the code snippet given below into your child theme’s functions.php :

Posted on

WooCommerce – Change currency sign/symbol of UAE Dirham

The Problem

When you set the currency in WooCommerce Settings to United Arab Emirates Dirham it looks like this :

While it is correct to use د.إ which stands for Emirati Dirham as the currency sign, it is not commonly used in websites that are in English where AED is used instead. So we need to change the currency sign from د.إ to AED.

The Solution

Luckily WooCommerce has filters that allows us to override the default values for currency symbol. Pasting this code in your theme’s functions.php ( It is recommended to use a child theme always for customisations ) will change the currency symbol of UAE Dirham to AED :