✅ Fecha Estimada de Envío en Woocommerce (Sin Plugins)

Este código PHP en conjunto con JavaScript destaca como una solución ingeniosa para mejorar la experiencia de usuario al implementar la estimación de fechas de entrega en productos de WooCommerce. Al incorporar campos personalizados, visualización de la fecha estimada y estilos personalizados, esta serie de funciones añade una capa adicional de información crucial para los clientes.

La función agregar_campos_estimados_entrega() establece la base al introducir campos personalizados para el tiempo mínimo y máximo de entrega. Posteriormente, la función guardar_campos_estimados_entrega($post_id) se encarga de manejar la persistencia de estos datos, asegurando una gestión efectiva de la información ingresada por los usuarios.

La presentación de la fecha estimada se logra mediante la función mostrar_fecha_estimada_entrega(), que utiliza los datos guardados para generar un mensaje informativo visualmente atractivo tanto en la página del producto como en la tienda. Además, la función agregar_estilos_fecha_estimada() contribuye con estilos personalizados para una presentación visual pulida y profesional.

La inclusión de la biblioteca Font Awesome a través de la función cargar_font_awesome() es un toque adicional que enriquece la apariencia visual con un ícono de envío rápido.

La implementación de estos elementos se integra perfectamente en el entorno de WordPress mediante acciones y hooks bien orquestados, como woocommerce_product_options_general_product_data, woocommerce_process_product_meta, woocommerce_single_product_summary, woocommerce_after_shop_loop_item, wp_head, y wp_head.

Este conjunto de funciones no solo es un código, sino una herramienta efectiva que potencia la presentación de información vital en un entorno de comercio electrónico WooCommerce. Representa un ejemplo de cómo el desarrollo creativo y el conocimiento sólido pueden mejorar significativamente la funcionalidad y la estética de un sitio WordPress. En definitiva, este código no solo informa sobre las fechas de entrega, sino que también contribuye a una experiencia de usuario mejorada y memorable.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

// Agrega dos campos personalizados para estimar la fecha de entrega en el producto
function agregar_campos_estimados_entrega() {
    // Campo para el número mínimo de días de entrega
    woocommerce_wp_text_input(
        array(
            'id'          => '_min_dias_entrega',
            'label'       => __('Mínimo de días de entrega', 'woocommerce'),
            'placeholder' => 'Ingrese el número mínimo de días de entrega',
            'desc_tip'    => 'true',
            'description' => __('Ingrese el número mínimo de días de entrega para este producto.', 'woocommerce')
        )
    );

    // Campo para el número máximo de días de entrega
    woocommerce_wp_text_input(
        array(
            'id'          => '_max_dias_entrega',
            'label'       => __('Máximo de días de entrega', 'woocommerce'),
            'placeholder' => 'Ingrese el número máximo de días de entrega',
            'desc_tip'    => 'true',
            'description' => __('Ingrese el número máximo de días de entrega para este producto.', 'woocommerce')
        )
    );
}
add_action('woocommerce_product_options_general_product_data', 'agregar_campos_estimados_entrega');

// Guarda los valores ingresados en los campos personalizados
function guardar_campos_estimados_entrega($post_id) {
    $min_dias = isset($_POST['_min_dias_entrega']) ? sanitize_text_field($_POST['_min_dias_entrega']) : '';
    $max_dias = isset($_POST['_max_dias_entrega']) ? sanitize_text_field($_POST['_max_dias_entrega']) : '';

    update_post_meta($post_id, '_min_dias_entrega', $min_dias);
    update_post_meta($post_id, '_max_dias_entrega', $max_dias);
}
add_action('woocommerce_process_product_meta', 'guardar_campos_estimados_entrega');

// Muestra la fecha estimada de entrega en la página de producto y en la tienda
function mostrar_fecha_estimada_entrega() {
    global $product;

    $min_dias = get_post_meta($product->get_id(), '_min_dias_entrega', true);
    $max_dias = get_post_meta($product->get_id(), '_max_dias_entrega', true);

     if ($min_dias && $max_dias) {
        echo '<div class="fecha-estimada-container"><p class="fecha-estimada"><i class="fas fa-shipping-fast"></i> La fecha estimada de entrega es de <span class="min-dias">' . esc_html($min_dias) . '</span> a <span class="max-dias">' . esc_html($max_dias) . '</span> días laborables.</p></div>';
    }
}
add_action('woocommerce_single_product_summary', 'mostrar_fecha_estimada_entrega');
add_action('woocommerce_after_shop_loop_item', 'mostrar_fecha_estimada_entrega');

// Agrega estilos personalizados para la fecha estimada de entrega
function agregar_estilos_fecha_estimada() {
    echo '<style>
        .fecha-estimada-container {
            margin-top: 20px;
        }

        .fecha-estimada {
            font-size: 14px;
            color: #333;
            background-color: #f9f9f9;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .fecha-estimada i {
            margin-right: 10px;
        }
		
		.fecha-estimada .min-dias,
        .fecha-estimada .max-dias {
            font-weight: bold;
            font-size: 14px; /* Ajusta el tamaño según tus preferencias */
			color:red;
        }
    </style>';
}
add_action('wp_head', 'agregar_estilos_fecha_estimada');


// Función para verificar y cargar Font Awesome si es necesario
function cargar_font_awesome() {
    // Verifica si Font Awesome está cargada
    if (!wp_style_is('font-awesome', 'enqueued')) {
        // Si no está cargada, la agrega
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css', array(), '5.15.3', 'all');
    }
}

// Hook para ejecutar la función en el head de WordPress
add_action('wp_head', 'cargar_font_awesome');Lenguaje del código: PHP (php)

Entendiendo el Código

Función agregar_campos_estimados_entrega() Esta función tiene como objetivo incorporar dos campos personalizados para estimar la fecha de entrega en los productos de WooCommerce.

Creación de Campos Personalizados:

• Se utilizan dos llamadas a la función woocommerce_wp_text_input.
• Cada llamada agrega un campo de entrada de texto para el número mínimo y máximo de días de entrega.
• Proporciona etiquetas, placeholders y descripciones para guiar al usuario.

Función guardar_campos_estimados_entrega($post_id) Esta función se encarga de guardar la información ingresada en los campos personalizados al actualizar un producto.

Guardado de Valores:

• Se obtienen los valores de los campos y se sanitizan.
• Luego, se actualizan los metadatos del producto con estos valores utilizando update_post_meta.

Función mostrar_fecha_estimada_entrega() Esta función muestra la fecha estimada de entrega en la página del producto y en la tienda.

Visualización de la Fecha Estimada:

• Utiliza los metadatos del producto para obtener los valores mínimos y máximos de días de entrega.
• Si ambos valores existen, se muestra un mensaje descriptivo con ícono de envío rápido de Font Awesome.

Función agregar_estilos_fecha_estimada() Esta función define estilos CSS personalizados para mejorar la presentación visual de la fecha estimada de entrega.

Estilos CSS:

• Se utiliza la función echo para imprimir un bloque de estilos CSS.
• Define la apariencia de elementos relacionados con la fecha estimada, como contenedores y texto.
• Se incluyen estilos de Font Awesome para el ícono de envío rápido.

Función cargar_font_awesome() Esta función verifica y carga Font Awesome si aún no está presente en el sitio.

Verificación y Carga:

• Utiliza wp_style_is para verificar si Font Awesome ya está encolado.
• Si no está presente, utiliza wp_enqueue_style para agregar la hoja de estilo desde una fuente externa.

Hooks y Acciones:

• add_action('woocommerce_product_options_general_product_data', 'agregar_campos_estimados_entrega'): Agrega la interfaz de administración de productos de WooCommerce con los campos personalizados.
• add_action('woocommerce_process_product_meta', 'guardar_campos_estimados_entrega'): Guarda la información ingresada al actualizar un producto.
• add_action('woocommerce_single_product_summary', 'mostrar_fecha_estimada_entrega'): Muestra la fecha estimada en la página del producto.
• add_action('woocommerce_after_shop_loop_item', 'mostrar_fecha_estimada_entrega'): Muestra la fecha estimada en la tienda.
• add_action('wp_head', 'agregar_estilos_fecha_estimada'): Agrega estilos personalizados al encabezado del documento.
• add_action('wp_head', 'cargar_font_awesome'): Carga Font Awesome si aún no está presente.

En resumen, el código desarrollado para la estimación de fechas de entrega en productos de WooCommerce representa una herramienta valiosa para enriquecer la experiencia de compra en un sitio WordPress. Al introducir campos personalizados, visualización de la fecha estimada y estilos personalizados, este conjunto de funciones va más allá de simplemente informar sobre las fechas de entrega, ofreciendo una presentación visualmente atractiva y funcional.

Posibles Aplicaciones:

1. Información Específica del Producto:
   • Destaca los detalles de entrega para productos, brindando a los clientes información crucial al tomar decisiones de compra.
2. Estilo Personalizado:
   • Permite la personalización estilizada, asegurando que la presentación visual de la información de entrega se integre de manera coherente con la estética general del sitio.
3. Mejora de la Experiencia de Usuario:
   • Contribuye significativamente a la experiencia del usuario al proporcionar información clara y visualmente atractiva sobre las fechas de entrega.

Ejemplos Prácticos:

1. Tiendas en Línea:
   • Mejora la transparencia en las fechas de entrega, creando confianza y satisfacción en los clientes.
2. Sitios de Comercio Electrónico con Variedad de Productos:
   • Adaptable a diferentes tipos de productos, desde productos de consumo diario hasta artículos especializados.
3. Comunicación Efectiva:
   • Facilita una comunicación clara y efectiva con los clientes sobre el tiempo de entrega estimado.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.