Set Free WooCommerce Products to ‘Free’ Instead of $0

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Code Snippets, PHP
Pricing, WooCommerce

Instructions

Create a new PHP code snippet.
Copy the contents of code snippet below.
Paste the contents into your code snippet.
Review any notes that I’ve provided.
Save and enable the code snippet.
Test.

Snippet

One Line 6 is where we are replacing ‘$0’ with ‘Free!’.

function my_wc_custom_get_price_html( $price, $product ) {

    if ( $product->get_price() == 0 ) {
        if ( $product->is_on_sale() && $product->get_regular_price() ) {
            $regular_price = wc_get_price_to_display( $product, array( 'qty' => 1, 'price' => $product->get_regular_price() ) );
            $price = wc_format_price_range( $regular_price, __( 'Free', 'woocommerce' ) );
        } else {
            $price = '<span class="amount">' . __( 'FREE', 'woocommerce' ) . '</span>';
        }
    }
    return $price;
}

add_filter( 'woocommerce_get_price_html', 'my_wc_custom_get_price_html', 10, 2 );

function my_wc_custom_get_price_html( $price, $product ) {

    if ( $product->get_price() == 0 ) {
        if ( $product->is_on_sale() && $product->get_regular_price() ) {
            $regular_price = wc_get_price_to_display( $product, array( 'qty' => 1, 'price' => $product->get_regular_price() ) );
            $price = wc_format_price_range( $regular_price, __( 'Free', 'woocommerce' ) );
        } else {
            $price = '<span class="amount">' . __( 'FREE', 'woocommerce' ) . '</span>';
        }
    }
    return $price;
}

add_filter( 'woocommerce_get_price_html', 'my_wc_custom_get_price_html', 10, 2 );

Uniquely Style the “FREE” Plan Text

Maybe you would like to change the color, boldness, etc., of the word ‘Free’ so it stands out from the others. No problem!

Add the following CSS to your website as a starting point for your design.

.form#job_package_selection > div > div.row.section-body.row-eq-height > div:nth-child(1) > div > h2.plan-price.case27-primary-text > span {
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: #34a496 !important;
}

.form#job_package_selection > div > div.row.section-body.row-eq-height > div:nth-child(1) > div > h2.plan-price.case27-primary-text > span {
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: #34a496 !important;
}

Adjust as desired.
Clear all caching levels and refresh your browser.

Video Tutorial

MyListing Pro

One plugin. Endless possibilities.

Pro Community

Join for free today.

My Tech Stack

Trusted tools and resources.

Software Deals

Save on Premium Solutions.