Important WooCommerce Customizations For Special Discount Sales

DECEMBER 23, 2017  7 MINS READ

Vacations are started, even Google had dropped the December festival doodleOnline store owners are busy now with their discount sales and flash sale to rock the December sales. As a part of our WooCommerce customization series we thought of make this post useful for the discount sales.

woocommerce-discount-sale-customization

[the_ad id=’6609′]

[tables_content title=”Important WooCommerce Customizations For Discount Sales”][table_content link_type=”custom-link” title=”Display “FREE” Instead of $0.00 or Empty Price” link=”#free”][table_content link_type=”custom-link” title=”Change Sale Badge Text In WooCommerce” link=”#text”][table_content link_type=”custom-link” title=”Display Cart Item Subtotal With Coupon Discount” link=”#display”][table_content link_type=”custom-link” title=”Slashed Cart Subtotal” link=”#subtotal”][/tables_content]

We have also mentioned a list of (best WooCommerce plugin) you can use to customize the WooCommerce store at each stage of the shopping. If you like to make unique changes by yourself to the site, the continue reading this post.

Display “FREE” Instead of $0.00 or Empty Price

The FREE has more effect on the visitors than the just $0.00. You are directly claiming the product to be free to the user. If you have used any keyword analyzing tool you might be knowing the search volume of the word “Free” in your domain.

In order to show the product as free, all you have to do is to copy the following code and place it in the functions.php file. Do this after logging into your cPanel for a hassle-free experience.

[code language=”php”]
/**
* @snippet Display “FREE” if WooCommerce Product Price is Zero or Empty – WooCommerce
*/

add_filter( ‘woocommerce_get_price_html’, ‘wpteamsupport_price_free_zero_empty’, 100, 2 );

function wpteamsupport_price_free_zero_empty( $price, $product ){

if ( ” === $product->get_price() || 0 == $product->get_price() ) {
$price = ‘FREE’;
}

return $price;
}
[/code]

How it works: As you can see it is just an “if- condition” the above mention code checks whether the product price is $0, if it is true the word “FREE” will be shown in the price of the product. If the price is not zero, the actual price will be shown to the users. The output of the result will be like this

[the_ad id=’6614′]

Change Sale Badge Text In WooCommerce

Ok, now we have added the “FREE” word on the price feel. But don’t you want to highlight the special price or the Free pricing? By default, WooCommerce provides you the option to show the SALES page when you add the special price field.

sales-badge

You can change the text “Sales” to whatever word you interested in. To do so just copy the code and put it into the functions.php file.

[code language=”php”]

add_filter(‘woocommerce_sale_flash’, ‘woocommerce_custom_sale_text’, 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{
return ‘<span class=”onsale”>YOUR TEXT</span>’;
}
[/code]

How it works: This snippet calls the function custom sales text and changes the word “Sale” in it to the word you want. Instead of the word “Your Text” add the word you want and save the file. Again do the changes from the cPanel not from the WordPress admin panel. The result will be like the below image.

sales-badge-customized

If you are using premium e-commerce theme then by default you will be having a dynamic field to enter the text you want in the badge.

[experts_box experts_title=”Expert alert!”] The above-mentioned technique only changes the texts of the badge. To change the looks and color of the badge you have to customize the CSS of the theme.[/experts_box]

Display Cart Item Subtotal With Coupon Discount

Another important scenario in the discount sales is the coupon discount. If you are there in the market for a long time you might know that partnering with related companies and offering special prices not only helps you to get more customer but also a healthy business relationship. To let the people really know the coupon has worked is striking and showing the offer price in the cart. The following method helps you show the discounted price of each product in the cart.

[code language=”php”]/**
* @snippet Cart item subtotal slashed if coupon @ Cart
*/

add_filter( ‘woocommerce_cart_item_subtotal’, ‘wpteamsupport_if_coupon_slash_item_subtotal’, 99, 3 );

function wpteamsupport_if_coupon_slash_item_subtotal( $subtotal, $cart_item, $cart_item_key ){
global $woocommerce;

// Note: use your own coupon code here
$coupon_code = ‘wptsdemo’;

if ( $woocommerce->cart->has_discount( $coupon_code )) {

// Note: apply your own coupon discount multiplier here
// In this case, it’s a 60% discount, hence I multiply by 0.4
$newsubtotal = wc_price( $cart_item[‘data’]->get_price() * 0.4 );

$subtotal = sprintf( ‘<s>%s</s> %s’, $subtotal, $newsubtotal );
}

return $subtotal;
}
[/code]

How it works: This snippet check for the coupon entry and matches with the coupon you gave. After matching the coupon the corresponding discount value will be shown to the user. Here in this snippet, the coupon code we used is “wptsdemo” change this code to your code. The discount value for the code here is 60%, hence I have multiplied the price with 0.4, you change the value to the corresponding discount. The output of the above-mentioned snippet will be as shown below.

Slashed Cart Subtotal

It is the follow-on of the above snippet. In the above code, the slashed price for each product is shown. In order to show the people overall savings, you can show the slashed price in the total amount. Even if you don’t show the slashed price the discounted price WooCommerce will consider the final discounted price only. This customization is for the better user experience, use the following code snippet to show slashed cart subtotal along with the coupon.

[code language=”php”]/**
* @snippet Cart subtotal slashed if coupon applied @ WooCommerce Cart
*/

add_filter( ‘woocommerce_cart_subtotal’, ‘wpteamsupport_slash_cart_subtotal_if_discount’, 99, 3 );

function wpteamsupport_slash_cart_subtotal_if_discount( $cart_subtotal, $compound, $obj ){
global $woocommerce;
if ( $woocommerce->cart->get_cart_discount_total() <> 0 ) {
$new_cart_subtotal = wc_price( WC()->cart->subtotal – $woocommerce->cart->get_cart_discount_tax_total() – $woocommerce->cart->get_cart_discount_total() );
$cart_subtotal = sprintf( ‘<del>%s</del> <b>%s</b>’, $cart_subtotal , $new_cart_subtotal );
}
return $cart_subtotal;
}
[/code]

How it works: This snippet checks for the coupon code entry and slashes the subtotal in the cart to the discount value. Copy this snippet to the functions.php file. The result of the above snippet will be looking like in the below image.

cart-total-discount

More To Come!!

That’s it for the today’s WooCommerce customization post. If you need to get a specific WooCommerce customization solution please comment it below, we will consider adding it to our next post. There are a lot of WooCommerce customizations yet to come, so to stay updated subscribe to our newsletter if you haven’t. See you guys in the next post, until then cheers!!!

[the_ad id=’6616′]

Leave a Reply

Your email address will not be published. Required fields are marked *