What is the tutorial about?
Learning how to show ‘Free’ instead of ‘0.00’ as WooCommerce product price using Code Snippets is the focus of this tutorial by Web Squadron. Discover how to modify WooCommerce’s default behavior of displaying “£0.00” or “$0.00” for free products to show the word “Free” instead. This is useful when you want to highlight free products in your WooCommerce store.
Tutorial Steps
- Installing the Code Snippets Plugin:
Navigate to your WordPress dashboard and go to the Plugins section. Click on “Add New” and search for “Code Snippets”. Install and activate the plugin. - Creating a New Snippet:
Once the plugin is activated, go to the Snippets section in your WordPress dashboard and click on “Add New”. Give your new snippet a title. - Adding the Code:
Copy the provided code. Paste this code into your new snippet in WordPress./** * Snippet Name: WooCommerce Change "$0.00" to "Free" * Snippet Author: ecommercehints.com */ add_filter( 'woocommerce_get_price_html', 'ecommercehints_change_zero_price_display', 10, 2 ); function ecommercehints_change_zero_price_display( $price, $product ) { if (empty($product->get_price()) || $product->get_price() == 0) { // If price is not entered or set to 0 $price = __( 'Free', 'woocommerce' ); } return $price; }
Source: Code Snippets
- Saving and Activating the Snippet:
Click on “Save Changes and Activate”. This will activate the snippet and apply the changes to your WooCommerce store. - Checking the Result:
Go to your WooCommerce store and view a product that is free of charge. Instead of “£0.00” or “$0.00”, it should now display the word “Free”.
Applying the Change to Specific Products
While the tutorial shows you how to change the price display for all free products, there might be instances where you want to apply this change to specific products only. For example, you might want to display “Free” for promotional items but keep the default price display for other products. Here’s how you can modify the code snippet to target specific products:
- Identify the Product IDs:
First, you need to identify the IDs of the products you want to target. You can find the product ID by going to the Products section in your WooCommerce dashboard and hovering over the product name. The ID will be displayed in the URL. - Modify the Code Snippet:
In the code snippet, you need to add a condition that checks if the product ID matches one of the IDs you want to target. Here’s an example of how you can modify the code:/** Helwp.com **/ add_filter( 'woocommerce_get_price_html', 'change_free_price_notice', 10, 2 ); function change_free_price_notice( $price, $product ) { // List of product IDs you want to target $target_product_ids = array( 123, 456, 789 ); if ( in_array( $product->get_id(), $target_product_ids ) && '0' === $product->get_price() ) { $price = '<span class="woocommerce-Price-amount amount">Free</span>'; } return $price; }
In this code, “123”, “456”, and “789” should be replaced with the IDs of the products you want to target.
- Save and Activate the Snippet:
After modifying the code, save the changes and activate the snippet. The change will now be applied to the specific products you’ve targeted.
Benefits ‘Free’ instead of ‘0.00’ as WooCommerce product price
This tutorial provides a simple yet effective method for enhancing the display of free products in your WooCommerce store. Here are some of the key benefits:
Improved Customer Perception
By changing the price display from “£0.00” or “$0.00” to “Free”, you can significantly improve customer perception. The word “Free” is much more appealing and can immediately grab a customer’s attention. It gives a clear message that the customer will not have to pay anything for the product, which can be a strong incentive for them to add the product to their cart.
Increased Conversions
Highlighting free products can potentially increase conversions in your WooCommerce store. Customers are more likely to make a purchase when they see they’re getting something for free. This can be particularly effective for promotional items or samples that you want to give away to attract new customers or reward loyal ones.
Enhanced Store Appearance
This change can also enhance the overall appearance of your store. It can make your store look more customer-friendly and professional, which can help build trust with your customers.
Ease of Implementation
One of the biggest benefits of this tutorial is the ease of implementation. With the help of the Code Snippets plugin, you can make this change without any coding knowledge. This makes it a great solution for WooCommerce store owners who are not comfortable with editing code.
By implementing this change, you can make your WooCommerce store more appealing to customers and potentially boost your sales.
Use Cases for this Tutorial
- Highlighting free products in your WooCommerce store.
- Enhancing the customer experience by clearly indicating free products.
- Differentiating free products from low-cost products.