💳 Cómo Mostrar Cuotas Sin Interés en WooCommerce (¡Con Snippet y Video Tutorial!)

Si estás creando una tienda online con WooCommerce y querés mejorar la experiencia de compra de tus clientes, ¡estás en el lugar correcto! En este artículo te voy a enseñar cómo mostrar un mensaje con la cantidad de cuotas sin interés que ofrecés.

Es un detalle simple, pero súper útil: mejora la conversión, informa al cliente antes de llegar al checkout y genera confianza. Además, como siempre, te dejo un video paso a paso para que puedas implementarlo aunque estés dando tus primeros pasos en diseño web.

🛒 ¿Por qué mostrar las cuotas sin interés en WooCommerce?

Antes de pasar al código, entendamos por qué esto es tan importante:

• 🔄 Reduce el rebote: muchos usuarios abandonan una tienda si no entienden las opciones de pago desde el principio.
• 🧠 Ayuda a la toma de decisiones: si tu cliente ve desde el principio que puede pagar en, por ejemplo, 3 o 6 cuotas sin interés, probablemente compre más tranquilo.
• 💰 Aumenta el ticket promedio: ofrecer pagos en cuotas suele animar a agregar más productos al carrito.
• 💬 Evita preguntas: menos mensajes preguntando “¿cuántas cuotas hay?” = más tiempo para vos.

Y lo mejor es que no necesitás instalar ningún plugin adicional. Con solo agregar un pequeño snippet de código, podés mostrar este mensaje directamente en la página del producto o donde quieras.

✍️ Snippet: Código para mostrar cuotas sin interés

Vamos a usar un pequeño fragmento de código que podés agregar fácilmente en tu tema hijo (child theme) o con un plugin como Code Snippets si no te sentís cómodo tocando archivos.

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

function change_displayed_sale_price_html_with_cuotas( $price, $product ) {
    if ( get_woocommerce_currency() !== 'ARS' ) {
        return $price;
    }

    $precision = 2;
    $cuotas_html = '';

    // Obtener el precio base según tipo de producto
    if ( $product->is_type( 'simple' ) ) {
        $base_price = (float) $product->get_price();
    } elseif ( $product->is_type( 'variable' ) ) {
        $variation_ids = $product->get_children();
        $prices = [];

        foreach ( $variation_ids as $variation_id ) {
            $variation = wc_get_product( $variation_id );
            if ( $variation && $variation->get_price() ) {
                $prices[] = (float) $variation->get_price();
            }
        }

        if ( empty( $prices ) ) {
            return $price;
        }

        $base_price = min( $prices );
    } else {
        return $price;
    }

    // Cálculos de cuotas sin interés
    $cuota_3  = round( $base_price / 3, $precision );
    $cuota_6  = round( $base_price / 6, $precision );
    $cuota_12 = round( $base_price / 12, $precision );

    // Contenedor general para las cuotas
    $cuotas_html .= '<div class="cuotas-texto" style="margin-top: 5px;">';

    // Mostrar 3 cuotas (por defecto)
    $cuotas_html .= sprintf(
        '<div style="font-size:0.75em"><b>3</b> CUOTAS SIN INTERÉS DE $%s</div>',
        number_format( $cuota_3, 2, ',', '.' )
    );

    // Opcional: mostrar 6 cuotas
   /* 
    $cuotas_html .= sprintf(
        '<div><b>6</b> CUOTAS SIN INTERÉS DE $%s</div>',
        number_format( $cuota_6, 2, ',', '.' )
    );
   
*/
    // Opcional: mostrar 12 cuotas
    /*
    $cuotas_html .= sprintf(
        '<div><b>12</b> CUOTAS SIN INTERÉS DE $%s</div>',
        number_format( $cuota_12, 2, ',', '.' )
    );
    */

    $cuotas_html .= '</div>';

    return $price . $cuotas_html;
}

🎥 ¿Preferís verlo en acción? Te lo muestro paso a paso en este video:
👉 Mirá el tutorial completo aquí

📍 ¿Dónde agregar el código?

Tenés dos opciones principales:

Opción 1: Usar Code Snippets (Recomendado para principiantes)

1. Instalá el plugin Code Snippets.
2. Andá a Snippets > Añadir nuevo.
3. Pegá el código y poné un nombre, por ejemplo «Mensaje de cuotas».
4. Activá el snippet y listo.

Opción 2: Agregarlo al functions.php de tu tema hijo

1. Ingresá a Apariencia > Editor de archivos de tema.
2. Abrí el archivo functions.php del tema hijo.
3. Pegá el código al final del archivo y guardá los cambios.

⚠️ Importante: No edites directamente el archivo functions.php de tu tema principal, ya que podrías perder los cambios en una actualización.

🧑‍🏫 Mirá el paso a paso en YouTube

Como siempre, además del artículo, te dejo el video tutorial donde podés ver exactamente cómo aplicar este snippet, dónde pegarlo y cómo personalizarlo a tu gusto. Ideal si estás dando tus primeros pasos en diseño web con WordPress.

📬 ¿Querés más tips como este?
Si te sirvió este tutorial y querés seguir aprendiendo sobre WooCommerce, WordPress y diseño web, te invito a suscribirte a mi canal. Subo contenido regularmente con trucos, tutoriales y recursos para que lleves tu tienda al próximo nivel.

🛠️ 📲 Suscribite acá