Añadir selector de fecha en productos de WooCommerce

Necesitas añadir en tus productos un selector de fecha, pues no puedes perderte este articulo donde te lo explicamos todo. Siempre nos puede dar el caso de tener un producto en nuestra tienda online que necesitemos ponerle un selector de fecha, o bien por ser una web de reserva, den entrega de productos. Podemos instalar algun plugins específicos, o programarlo nosotros mismos a nuestra medida, la mejor de programarlo es que los plugins específicos van a tener muchas opciones que no vamos a usar y el coste de estos son muy elevados.

Cómo añadir un selector de fecha en productos de WooCommerce.

En muchas tiendas online puede ser necesario que el cliente elija una fecha específica al momento de comprar un producto:

  • Reservas de servicios.
  • Entrega de flores o pasteles en un día concreto.
  • Citas personalizadas.

WooCommerce no trae un campo de fecha por defecto en los productos, pero podemos añadirlo fácilmente usando un poco de código.

Resultado final

Con este código tendrás un selector de fecha en la página del producto, que se guardará en el carrito, checkout y quedará registrado en el pedido del cliente.

Si lo deseas, puedes mejorar la experiencia con un date picker en jQuery UI o personalizar la validación (ejemplo: deshabilitar fines de semana, limitar fechas mínimas o máximas, etc.).

<?php
/**
 * Plugin Name: Woo Fecha en Productos
 * Description: Añade un selector de fecha en productos WooCommerce y lo guarda en el pedido.
 * Author: SEO Alicante
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * 1) Pintar el campo de fecha en la ficha de producto
 */
add_action( 'woocommerce_before_add_to_cart_button', function() {
    // Opcional: limita a ciertos IDs o categorías
    // if ( ! has_term( array('reservas','citas'), 'product_cat' ) ) return;

    echo '<div class="woo-custom-date-field" style="margin:12px 0;">';
    echo '<label for="woo_product_date" style="display:block;margin-bottom:6px;">Selecciona la fecha</label>';
    // min = hoy en formato YYYY-MM-DD
    $today = current_time('Y-m-d');
    printf(
        '<input type="date" id="woo_product_date" name="woo_product_date" min="%s" required style="padding:8px;width:100%%;max-width:280px;" />',
        esc_attr( $today )
    );
    echo '<small style="display:block;margin-top:6px;color:#666;">Campo obligatorio</small>';
    echo '</div>';
} );

/**
 * 2) Validación antes de añadir al carrito
 */
add_filter( 'woocommerce_add_to_cart_validation', function( $passed, $product_id, $quantity, $variation_id = 0, $variations = array() ) {
    if ( empty( $_POST['woo_product_date'] ) ) {
        wc_add_notice( __( 'Por favor, selecciona una fecha antes de añadir al carrito.', 'woocommerce' ), 'error' );
        return false;
    }

    // Validar formato YYYY-MM-DD y que no sea pasada
    $date = sanitize_text_field( wp_unslash( $_POST['woo_product_date'] ) );
    if ( ! preg_match( '/^\d{4}-\d{2}-\d{2}$/', $date ) ) {
        wc_add_notice( __( 'La fecha no es válida.', 'woocommerce' ), 'error' );
        return false;
    }

    $today = date_create( current_time('Y-m-d') );
    $chosen = date_create( $date );
    if ( $chosen < $today ) {
        wc_add_notice( __( 'La fecha no puede ser anterior a hoy.', 'woocommerce' ), 'error' );
        return false;
    }

    return $passed;
}, 10, 5 );

/**
 * 3) Añadir la fecha a los datos del ítem del carrito
 */
add_filter( 'woocommerce_add_cart_item_data', function( $cart_item_data, $product_id, $variation_id ) {
    if ( ! empty( $_POST['woo_product_date'] ) ) {
        $cart_item_data['woo_product_date'] = sanitize_text_field( wp_unslash( $_POST['woo_product_date'] ) );
        // Para que items con distinta fecha no se fusionen
        $cart_item_data['unique_key'] = md5( microtime().rand() );
    }
    return $cart_item_data;
}, 10, 3 );

/**
 * 4) Mostrar en el carrito y checkout
 */
add_filter( 'woocommerce_get_item_data', function( $item_data, $cart_item ) {
    if ( ! empty( $cart_item['woo_product_date'] ) ) {
        $item_data[] = array(
            'key'   => __( 'Fecha', 'woocommerce' ),
            'value' => date_i18n( get_option( 'date_format' ), strtotime( $cart_item['woo_product_date'] ) ),
            'display' => ''
        );
    }
    return $item_data;
}, 10, 2 );

/**
 * 5) Guardar en el pedido (línea) y mostrar en emails/admin
 */
add_action( 'woocommerce_checkout_create_order_line_item', function( $item, $cart_item_key, $values, $order ) {
    if ( ! empty( $values['woo_product_date'] ) ) {
        $item->add_meta_data( __( 'Fecha', 'woocommerce' ), $values['woo_product_date'], true );
    }
}, 10, 4 );

/**
 * 6) (Opcional) JS: bloquear fines de semana o aplicar lógica adicional
 *    Aquí solo evitamos que el usuario borre el valor required en algunos navegadores.
 */
add_action( 'wp_footer', function() {
    if ( ! is_product() ) return;
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var input = document.getElementById('woo_product_date');
        if (!input) return;

        // Ejemplo: bloquear sábados y domingos (descomentar si lo quieres)
        // input.addEventListener('change', function () {
        //     var d = new Date(this.value);
        //     if ([0,6].includes(d.getUTCDay())) {
        //         alert('No hay disponibilidad en fines de semana. Elige un día laborable.');
        //         this.value = '';
        //     }
        // });

        // Asegura que tenga min=today si el HTML5 falla
        var today = new Date();
        var yyyy = today.getFullYear();
        var mm = ('0' + (today.getMonth()+1)).slice(-2);
        var dd = ('0' + today.getDate()).slice(-2);
        var min = yyyy + '-' + mm + '-' + dd;
        if (input && (!input.min || input.min < min)) input.min = min;
    });
    </script>
    <?php
} );

Integrar el código en nuestra tienda online

La mejor opción es crear nuestro plugins y subirlo a nuestro portal web, aqui os dejamos los pasos a seguir.

Pasos básicos

  1. Crea la carpeta y el archivo principal
    En wp-content/plugins/
  2. Cabecera del plugin (obligatoria)
    En mi-plugin.php añade:
<?php
/**
 * Plugin Name: Mi Plugin de Ejemplo
 * Plugin URI:  https://tusitio.com
 * Description: Un plugin de ejemplo con shortcode y página de ajustes.
 * Version:     1.0.0
 * Author:      Tu Nombre
 * Author URI:  https://tusitio.com
 * License:     GPLv2 or later
 * Text Domain: mi-plugin
 * Domain Path: /languages
 */

Una vez integrado en nuestra carpeta podemos entrar en WP y activarlo, con esto ya tendriamos un plugins para tener un selector de fecha en nuestra tienda online woocomercer

Scroll al inicio