Cómo mostrar productos con precio 0 y colocar “FREE” en WooCommerce

En WooCommerce, cuando un producto tiene precio 0 o no tiene precio definido, por defecto no se muestra en la tienda. Esto puede ser un problema si deseas ofrecer productos gratuitos (ebooks, muestras, contenido digital, etc.). En este artículo aprenderás cómo:

1. Mostrar productos con precio 0 o sin precio en WooCommerce.
2. Reemplazar el precio por la palabra FREE.
3. Mejorar la experiencia del usuario para este tipo de productos.

Mostrar productos con precio 0 o sin precio en WooCommerce

WooCommerce oculta automáticamente los productos que tienen un precio vacío o igual a cero. Para anular este comportamiento, debemos enganchar un filtro que permita mostrar estos productos.

Agrega el siguiente código en el archivo functions.phpde tu tema hijo o en un plugin personalizado:

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

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

    return $isPurchasable;
}

Con este snippet, WooCommerce permitirá que los productos con precio 0 estén disponibles y visibles.

Reemplazar el precio por la palabra “FREE”

Una vez visibles, podemos modificar el texto del precio para que, en lugar de mostrar «0.00», aparezca la palabra «FREE» (o “GRATIS” si tu tienda está en español).

Agrega este fragmento al mismo archivo functions.php:

<?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;
}

Esto reemplaza el precio en la tienda, página del producto y listados.

Opcional: Agregar una clase CSS para personalizar visualmente

Si deseas aplicar un estilo visual diferente a los productos gratuitos, puedes agregar una clase condicional:

<?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;
}

Luego, puedes personalizar el estilo con CSS:

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

Mostrar productos con precio 0 en WooCommerce es totalmente posible, y puedes aprovecharlo para ofrecer contenido gratuito, recompensar a tus clientes o hacer crecer tu lista de correo. Solo necesitas algunos pequeños ajustes con código.

Si deseas aprender más sobre personalizaciones para tu tienda, te invito a explorar nuestra sección de guías prácticas para WooCommerce, donde encontrarás tutoriales paso a paso como:

• Cómo bloquear compras repetidas del mismo producto
• Añadir campos personalizados al checkout de WooCommerce

Related posts:

Mostrar una notificación flotante con los últimos productos vendidos en WooCommerce Mostrar imágenes de los productos en la página de checkout en WooCommerce Cómo agregar campos en la sección de exportar productos en WooCommerce Crear un shortcode para mostrar el SKU de un producto en WooCommerce