How To Remove The Word Free In Woocommerce

How to Remove the Word “Free” in WooCommerce: A Beginner’s Guide

So, you’ve built your awesome WooCommerce store, offering both paid and free products. Great! But you’ve noticed that little word “Free” plastered all over the place on your free products, and maybe you want to change it or get rid of it altogether. Don’t worry, you’re not alone! This is a common customization, and thankfully, quite easy to achieve. This guide is designed for newbies, so we’ll break it down step-by-step with clear explanations and examples.

Why would you want to remove “Free” in WooCommerce anyway? Well, here are a few common reasons:

• Aesthetics: Maybe it just doesn’t fit the overall design and feel of your store.
• Redundancy: If you’re offering a service or product with a clear $0.00 price, “Free” might seem unnecessary.
• Marketing: Sometimes, removing the word can subtly shift focus onto the benefits or value of the free product, rather than just highlighting its lack of cost. Think of it like this: instead of “Download this *Free* eBook!”, you might prefer “Download this eBook and unlock valuable insights!”

Let’s get started! We’ll cover a few different methods, from the simplest to slightly more advanced, so you can choose the one that best suits your needs and comfort level.

Method 1: The Simple CSS Trick (Hiding it Visually)

This is the quickest and easiest way, especially if you just want to *hide* the word “Free” without actually removing it from the underlying code. We’ll use CSS, the styling language of the web.

What it does: This method uses CSS to hide the elements displaying the word “Free.” It’s a visual change only. The word “Free” is still present in the code but is invisible to your website visitors.

How to do it:

1. Access your WordPress Customizer: Go to your WordPress Dashboard, then navigate to Appearance -> Customize.

2. Find the CSS section: Look for a section called “Additional CSS” or “Custom CSS.” The exact name might vary slightly depending on your theme.

3. Add the following CSS code:

.woocommerce .price .amount.amount,

.woocommerce .price del,

.woocommerce-loop-product__price .price .amount.amount,

.woocommerce-loop-product__price del {

display: none !important;

}

Explanation:

• `.woocommerce .price .amount.amount` and `.woocommerce-loop-product__price .price .amount.amount`: These selectors target the price elements on your product pages and shop/archive pages.
• `.woocommerce .price del` and `.woocommerce-loop-product__price del`: These target the ‘deleted’ (crossed-out) price, which might be used if you have a sale and are showing the original price and a discounted price.
• `display: none !important;`: This hides the targeted elements. The `!important` ensures this CSS rule overrides any other conflicting rules in your theme’s stylesheets.

4. Publish your changes: Click the “Publish” button in the Customizer.

Important Considerations:

• Targeting Free Variations: If you have product variations (e.g., different colors or sizes), you might need to adjust the CSS slightly to specifically target the “Free” on variations. Use your browser’s developer tools (right-click on the element and choose “Inspect”) to identify the correct CSS selector.
• Accessibility: Hiding content visually without addressing the underlying code can sometimes impact accessibility. Screen readers might still read out the word “Free,” even though it’s not visible. If accessibility is a major concern, consider using the more advanced methods below.

Method 2: Using Check out this post: How To Remove Showing 1 Of 30 On Woocommerce Page a Code Snippet (The Recommended Approach)

This method involves adding a small piece of PHP code to your theme’s `functions.php` file (or, even better, a child theme’s `functions.php` or via a code snippet plugin). This is generally the preferred approach because it directly modifies the output and offers more control.

What it does: This method directly alters the output of the WooCommerce function that displays the price, effectively replacing “Free” with an empty string.

How to do it:

1. Create a Child Theme (Highly Recommended): Never edit your theme’s `functions.php` file directly! If you update your theme, your changes will be overwritten. A child theme allows you to make modifications without affecting the parent theme. There are many tutorials online on how to create a child theme for your current WordPress theme.

2. Or Use a Code Snippet Plugin: An alternative to using a child theme is to use a code snippet plugin like “Code Snippets” (available in the WordPress plugin repository). This plugin allows you to add custom PHP code without directly editing theme files.

3. Add the following PHP code: Paste the following code into your child theme’s `functions.php` file (or activate it in your Code Snippets plugin):

 add_filter( 'woocommerce_empty_price_html', 'custom_free_price_html', 10, 2 ); 

function custom_free_price_html( $price, $instance ) {

return ”; // Replace “Free!” with nothing (empty string)

}

Explanation:

• `add_filter( ‘woocommerce_empty_price_html’, ‘custom_free_price_html’, 10, 2 );`: This line tells WordPress to use our custom function (`custom_free_price_html`) whenever WooCommerce needs to display the price for a product that has no price (i.e., it’s free).
• `function custom_free_price_html( $price, $instance ) { … }`: This is our custom function. It takes two arguments: `$price` (the original HTML for the price) and `$instance` (an object representing the product).
• `return ”;`: This line replaces the original price HTML with an empty string, effectively removing the word “Free.”

4. Save your changes: Save the `functions.php` file or activate the code snippet.

Alternative: If you want to replace “Free!” with something else, like “Download Now” or “Get it!”, you can change the `return ”;` line to:

 return 'Download Now!'; 

Or:

 return 'Get it!'; 

Why this is better than CSS:

• SEO-Friendly: It removes the word “Free” from the source code, which is better for search engines.
• Accessibility: Improves accessibility because the word is actually removed.
• Clean Code: It directly addresses the issue in the code, rather than just hiding it visually.

Method 3: Using WooCommerce Templates (Advanced – Proceed with Caution!)

This method involves overriding WooCommerce templates. It’s the most advanced and requires a good understanding of WooCommerce template structure. Only attempt this if you’re comfortable working with code and have experience with WooCommerce templates.

What it does: This method directly edits the WooCommerce template files responsible for displaying the price.

How to do it:

1. Locate the Relevant Template: Explore this article on How To Add Woocommerce Shortcode To Pricing Table Button The template responsible for displaying the price is usually located in `woocommerce/templates/loop/price.php` (for shop/archive pages) and `woocommerce/templates/single-product/price.php` (for single product pages). The exact location might vary slightly depending on your theme.

2. Copy the Template to Your Theme: Create a `woocommerce` folder in your child theme. Then, create the necessary subfolders to match the original template path. For example, if you’re modifying the `loop/price.php` template, your child theme should have a `woocommerce/loop/price.php` file. Copy the contents of the original template file into your child theme’s template file.

3. Modify the Template: Open the template file in your child theme and look for the code that displays the price. It will usually involve a check to see if the price is empty or zero, and then outputting the word “Free.” Modify this code to remove the word “Free” or Discover insights on How To Make Downloadable Product In Woocommerce replace it with something else.

Example (Illustrative – actual code may vary):

 get_price() === '' || $product->get_price() Explore this article on How To Change The Labels In Woocommerce == 0 ) { // Remove this line: // echo '' . esc_html__( 'Free!', 'woocommerce' ) . ''; 

// Option 1: Remove it entirely

// echo ”;

// Option 2: Replace it with something else

echo Read more about How To Price Items In Woocommerce ‘Download Now!‘;

} else {

wc_get_template( ‘loop/price.php’, array( ‘product’ => $product ) );

}

?>

4. Save your Changes: Save the modified template file in your child theme.

Why this is the most complex:

• Template Overrides: Requires understanding of WooCommerce template structure and how to override them.
• Theme Updates: You need to keep an eye on WooCommerce updates, as changes to the original templates might require you to update your overridden templates as well.
• Debugging: More complex to debug if something goes wrong.

In summary, the code snippet method (Method 2) is generally the best balance of simplicity, effectiveness, and maintainability for most users. Start with that, and if you need more control or have specific requirements, consider the template override method (Method 3) – but only if you’re comfortable working with code and understand WooCommerce templates. The CSS method is easiest for a very quick visual fix, but has limitations. Good luck customizing your WooCommerce store!