Si hay algo que mata las ventas en una tienda online es la incertidumbre. Cuando un cliente está a punto de hacer clic en «Añadir al carrito», la pregunta más crítica que pasa por su mente es: «¿Cuándo me va a llegar?»
Si no respondes esa pregunta de forma clara, visual y rápida, corres el riesgo de perder la venta. Muchos dueños de tiendas instalan plugins pesados que ponen lenta su web solo para mostrar un texto genérico. En Aprendamos E-commerce, hacemos las cosas a nivel de ingeniería.
Por eso, he desarrollado un Snippet de código ligero, automatizado y de diseño Premium que puedes aplicar en tu tienda hoy mismo, sin ralentizar tu WooCommerce.
🔥 ¿Qué hace este código por tu tienda?
- Es Inteligente (Multipaís): No importa si tu tienda opera en Colombia, Chile, México, Perú, Venezuela o España. El código lee automáticamente la Zona Horaria que tengas configurada en tu WordPress (
Ajustes > Generales) y calcula la hora exacta local. - A prueba de Domingos: El algoritmo calcula las fechas de envío y entrega saltándose automáticamente los días no hábiles (domingos), para que no le prometas a un cliente que su pedido llegará un día que las transportadoras no trabajan.
- Diseño Premium: Añade una línea de tiempo visual (Confirmación ➔ Envío ➔ Entrega) con un pulso animado en el estado actual que guía el ojo del comprador directo al botón de compra.
- Cero Mantenimiento: Lo instalas una vez mediante un Hook y se aplica automáticamente a todos los productos de tu catálogo, pasados y futuros.
🛠️ Cómo implementarlo en 3 pasos
- Ve a tu panel de WordPress e instala un plugin gratuito para gestionar código como Code Snippets
- Crea un nuevo Snippet de tipo PHP.
- Copia el siguiente código, pégalo y actívalo.
(¡Ojo a «Configuración» en las primeras líneas! Ahí puedes cambiar los colores HEX para que se vea afín con tu marca y ajustar los días exactos que tarda tu transportadora en entregar).
Implementar detalles como este separa a una tienda amateur de una profesional. ¡Aplica el código, personaliza tus colores y cuéntame en los comentarios o en el grupo de WhatsApp que te pareció!
/**
* ========================================================================
* WIDGET: TIEMPOS DE ENTREGA DINÁMICOS PARA WOOCOMMERCE
* * Autor: Ing. Guillermo Amaya
* Aporte exclusivo para estudiantes de aprendamosecommerce.com
* ========================================================================
*/
add_filter('woocommerce_short_description', 'gpa_tiempos_entrega_global_filter', 99);
function gpa_tiempos_entrega_global_filter($short_description) {
// 1. Evitar que se ejecute fuera de productos
if ( ! is_product() ) {
return $short_description;
}
// 2.Evitar que se duplique en llamadas AJAX (cambios de variación)
if ( wp_doing_ajax() ) {
return $short_description;
}
// 3. Asegurar que solo se imprima UNA vez por carga de página
static $ya_impreso = false;
if ( $ya_impreso ) {
return $short_description;
}
$ya_impreso = true;
// =====================================================================
// ⚙️ ZONA DE CONFIGURACIÓN (Modifica los valores aquí según tu tienda)
// =====================================================================
$dias_para_enviar = 1;
$dias_min_entrega = 2;
$dias_max_entrega = 5;
$color_principal = '#D4AF37';
$color_secundario = '#7DA856';
$texto_info_envio = 'Los tiempos de entrega son estimados. Para ciudades principales, el tiempo de entrega es de 1 a 3 días hábiles. Recibirás tu número de guía por correo electrónico o WhatsApp.';
// =====================================================================
// ⛔ FIN DE LA CONFIGURACIÓN (No tocar el código de abajo)
// =====================================================================
$zona_horaria_wp = wp_timezone_string();
if ($zona_horaria_wp) {
date_default_timezone_set($zona_horaria_wp);
}
$hoy_timestamp = time();
$sumar_dias_habiles = function($inicio, $dias_a_sumar) {
$actual = $inicio;
$agregados = 0;
while ($agregados < $dias_a_sumar) {
$actual += 86400;
if (date('w', $actual) != 0) { $agregados++; }
}
return $actual;
};
$fecha_envio = $sumar_dias_habiles($hoy_timestamp, $dias_para_enviar);
$entrega_inicio = $sumar_dias_habiles($hoy_timestamp, $dias_min_entrega);
$entrega_fin = $sumar_dias_habiles($hoy_timestamp, $dias_max_entrega);
$meses = ['Jan'=>'ene', 'Feb'=>'feb', 'Mar'=>'mar', 'Apr'=>'abr', 'May'=>'may', 'Jun'=>'jun', 'Jul'=>'jul', 'Aug'=>'ago', 'Sep'=>'sep', 'Oct'=>'oct', 'Nov'=>'nov', 'Dec'=>'dic'];
$dias = ['Sun'=>'Dom', 'Mon'=>'Lun', 'Tue'=>'Mar', 'Wed'=>'Mié', 'Thu'=>'Jue', 'Fri'=>'Vie', 'Sat'=>'Sáb'];
$formato_fecha = function($t) use ($meses) { return date('d', $t) . ' ' . $meses[date('M', $t)]; };
$formato_dia = function($t) use ($dias) { return $dias[date('D', $t)]; };
$hoy_txt = $formato_fecha($hoy_timestamp);
$envio_txt = $formato_fecha($fecha_envio);
$rango_entrega = $formato_fecha($entrega_inicio) . ' - ' . $formato_fecha($entrega_fin);
$rango_dias = $formato_dia($entrega_inicio) . ' a ' . $formato_dia($entrega_fin);
ob_start();
?>
<style>
.gpa-delivery-box { font-family: 'Inter', sans-serif; background: #ffffff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 20px; margin: 25px 0 10px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.03); width: 100%; clear: both; }
.gpa-del-header { font-family: 'Montserrat', sans-serif; color: <?php echo $color_principal; ?>; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; display: flex; align-items: center; }
.gpa-del-header::before { content: '●'; margin-right: 8px; font-size: 16px; color: <?php echo $color_secundario; ?>; }
.gpa-del-steps { display: flex; justify-content: space-between; margin-bottom: 20px; position: relative; }
.gpa-del-steps::before { content: ''; position: absolute; top: 25px; left: 15%; right: 15%; height: 2px; background-color: #f0f0f0; z-index: 1; }
.gpa-del-step { display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 2; flex: 1; }
.gpa-del-icon { width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border: 2px solid #e0e0e0; transition: all 0.3s ease; }
.gpa-del-step.active .gpa-del-icon { border-color: <?php echo $color_principal; ?>; box-shadow: 0 0 15px <?php echo $color_principal; ?>33; }
.gpa-del-icon svg { width: 22px; height: 22px; fill: #333; transition: all 0.3s ease; }
.gpa-del-step.active .gpa-del-icon svg { fill: <?php echo $color_principal; ?>; animation: gpa-cart-pulse 2s ease-in-out infinite; }
@keyframes gpa-cart-pulse { 0% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(-3px); } 100% { transform: scale(1) translateY(0); } }
.gpa-del-title { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #888; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.gpa-del-step.active .gpa-del-title { color: <?php echo $color_principal; ?>; }
.gpa-del-date { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 5px; }
.gpa-del-badge { background-color: #f5f5f5; color: #888; font-size: 11px; padding: 3px 10px; border-radius: 20px; }
.gpa-del-step.active .gpa-del-badge { background-color: <?php echo $color_principal; ?>1A; color: <?php echo $color_principal; ?>; font-weight: 600; }
.gpa-del-info { background-color: #fcfcfc; border-left: 3px solid <?php echo $color_principal; ?>; padding: 12px 15px; border-radius: 0 8px 8px 0; font-size: 12px; color: #666; line-height: 1.5; }
.gpa-del-info strong { color: <?php echo $color_principal; ?>; font-family: 'Montserrat', sans-serif; }
</style>
<div class="gpa-delivery-box">
<div class="gpa-del-header">ENTREGA ESTIMADA</div>
<div class="gpa-del-steps">
<div class="gpa-del-step active">
<div class="gpa-del-icon">
<svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
</div>
<div class="gpa-del-title">Haces el pedido</div>
<div class="gpa-del-date">Hoy</div>
<div class="gpa-del-badge"><?php echo $hoy_txt; ?></div>
</div>
<div class="gpa-del-step">
<div class="gpa-del-icon">
<svg viewBox="0 0 24 24"><path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
</div>
<div class="gpa-del-title">Enviamos</div>
<div class="gpa-del-date"><?php echo $envio_txt; ?></div>
<div class="gpa-del-badge">Día hábil</div>
</div>
<div class="gpa-del-step">
<div class="gpa-del-icon">
<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
</div>
<div class="gpa-del-title">Recibes</div>
<div class="gpa-del-date"><?php echo $rango_entrega; ?></div>
<div class="gpa-del-badge"><?php echo $rango_dias; ?></div>
</div>
</div>
<div class="gpa-del-info">
<strong>INFORMACIÓN DE ENVÍO:</strong> <?php echo $texto_info_envio; ?>
</div>
</div>
<?php
$caja_html = ob_get_clean();
return $short_description . $caja_html;
}
Curso Gratuito
Domina WordPress y WooCommerce desde cero
Aprende a construir tiendas online profesionales y rentables. Accede ahora al curso más completo con +20 horas de contenido práctico paso a paso.
Ver Curso en YouTube
1 Comentario
Buen dia , acabo de instalar el codigo y queda super bien, genera mas confianza, gracias por la informacion💯✅