How to show products with price 0 and display “FREE” in WooCommerce

By default, WooCommerce hides products that have a price of 0 or no price at all. This can be a problem if you want to offer free products like ebooks, samples, or digital downloads. In this article, you’ll learn how to:

1. Display products with price 0 or no price in WooCommerce.
2. Replace the price with the word FREE.
3. Improve the user experience for free products.

Show products with price 0 or no price in WooCommerce

WooCommerce automatically hides products with no price or a price equal to zero. To override this behavior, we’ll use a filter that allows such products to be visible.

Add the following code to your child theme’s functions.phpfile or in a custom plugin:

<?php
add_filter( 'woocommerce_product_is_purchasable', 'allowFreeProductsToBePurchasable', 10, 2 );

function allowFreeProductsToBePurchasable( $isPurchasable, $product ) {
    if ( $product->get_price() == 0 ) {
        return true;
    }

    return $isPurchasable;
}

This snippet will make sure WooCommerce considers free products as purchasable and shows them in the store.

Replace the price with the word “FREE”

Once the products are visible, we can change the way the price is displayed. Instead of showing “0.00”, we’ll display the word FREE.

Add this code to the same functions.phpfile:

<?php
add_filter( 'woocommerce_get_price_html', 'showFreeForZeroPrice', 10, 2 );

function showFreeForZeroPrice( $priceHtml, $product ) {
    if ( $product->get_price() == 0 ) {
        return '<span class="amount">FREE</span>';
    }

    return $priceHtml;
}

This replaces the price on the shop page, single product page, and product listings.

Optional: add a CSS class to style free products

If you want to apply custom styling to free products, you can conditionally add a class:

<?php
add_filter( 'post_class', 'addFreeProductClass', 10, 3 );

function addFreeProductClass( $classes, $class, $postId ) {
    $product = wc_get_product( $postId );

    if ( $product && $product->get_price() == 0 ) {
        $classes[] = 'product-free';
    }

    return $classes;
}

Then style it in your CSS:

.product-free .amount {
    color: green;
    font-weight: bold;
}

Displaying products with price 0 in WooCommerce is completely possible and useful. You can offer free content, gifts, or lead magnets with just a few lines of code.

To keep learning about WooCommerce customization, visit our WooCommerce tutorials section where you’ll find more guides like:

• How to prevent customers from purchasing the same product more than once

Related posts:

Display a floating notification with recently sold products in WooCommerce Display a dynamic subtotal next to the “Add to Cart” button in WooCommerce Products Show product images in checkout page in WooCommerce How to create a shortcode to display a product SKU in WooCommerce