✅ Pestaña con Guía de Tallas del Producto en Woocommerce (Sin Plugins)

En el ámbito del comercio electrónico, la presentación precisa de información sobre las tallas de productos desempeña un papel fundamental para garantizar una experiencia de compra informada y satisfactoria. El código proporcionado se erige como una solución ingeniosa y completa para la implementación de una detallada «Guía de Tallas» en una tienda online basada en WooCommerce.

El propósito central de estas funciones en PHP es enriquecer la plataforma de comercio electrónico, ofreciendo a los usuarios y administradores una herramienta eficiente y visualmente atractiva para la gestión y visualización de información sobre tallas de productos. Desde el frontend, donde los clientes pueden acceder a la guía de tallas de manera clara y estructurada, hasta el backend, donde los administradores pueden gestionar fácilmente estos datos, el código busca mejorar la usabilidad y la administración integral de información crucial.

Los posibles casos de uso abarcan una amplia gama de escenarios en el comercio electrónico. Desde tiendas de moda y ropa hasta mercados de productos variados, la necesidad de proporcionar información detallada sobre las dimensiones de los productos es universal. Este código se convierte en una valiosa herramienta para cualquier comercio que busque mejorar la transparencia y la toma de decisiones de sus clientes, permitiendo una elección más informada de tallas y, por ende, mejorando la satisfacción del cliente.

En resumen, estas funciones no solo son un conjunto de líneas de código; representan una estrategia inteligente para potenciar la experiencia de compra y la gestión de productos en una tienda WooCommerce. Desde tiendas de moda hasta plataformas de comercio electrónico diversificadas, este código proporciona una solución adaptable y robusta para la gestión eficaz de información sobre tallas, demostrando su versatilidad en distintos contextos comerciales.

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

<?php
// Agrega la pestaña de Guía de Tallas
add_filter('woocommerce_product_tabs', 'agregar_pestana_guia_tallas');

function agregar_pestana_guia_tallas($tabs) {
    $tabs['guia_tallas'] = array(
        'title'    => 'Guía de Tallas',
        'priority' => 50,
        'callback' => 'contenido_pestana_guia_tallas',
    );
    return $tabs;
}

// Contenido de la pestaña Guía de Tallas en el frontend
function contenido_pestana_guia_tallas() {
    global $product;

    // Obtén los valores de la guía de tallas guardados como metadatos del producto
    $guia_tallas = array(
        'pecho_s' => get_post_meta($product->get_id(), '_pecho_s', true),
        'pecho_m' => get_post_meta($product->get_id(), '_pecho_m', true),
        'pecho_l' => get_post_meta($product->get_id(), '_pecho_l', true),
        'pecho_xl' => get_post_meta($product->get_id(), '_pecho_xl', true),
        'brazo_s' => get_post_meta($product->get_id(), '_brazo_s', true),
        'brazo_m' => get_post_meta($product->get_id(), '_brazo_m', true),
        'brazo_l' => get_post_meta($product->get_id(), '_brazo_l', true),
        'brazo_xl' => get_post_meta($product->get_id(), '_brazo_xl', true),
        'cintura_s' => get_post_meta($product->get_id(), '_cintura_s', true),
        'cintura_m' => get_post_meta($product->get_id(), '_cintura_m', true),
        'cintura_l' => get_post_meta($product->get_id(), '_cintura_l', true),
        'cintura_xl' => get_post_meta($product->get_id(), '_cintura_xl', true),
        'caderas_s' => get_post_meta($product->get_id(), '_caderas_s', true),
        'caderas_m' => get_post_meta($product->get_id(), '_caderas_m', true),
        'caderas_l' => get_post_meta($product->get_id(), '_caderas_l', true),
        'caderas_xl' => get_post_meta($product->get_id(), '_caderas_xl', true),
        'largo_pierna_s' => get_post_meta($product->get_id(), '_largo_pierna_s', true),
        'largo_pierna_m' => get_post_meta($product->get_id(), '_largo_pierna_m', true),
        'largo_pierna_l' => get_post_meta($product->get_id(), '_largo_pierna_l', true),
        'largo_pierna_xl' => get_post_meta($product->get_id(), '_largo_pierna_xl', true),
    );

    // Si no hay guía de tallas, muestra un mensaje
    if (empty(array_filter($guia_tallas))) {
        echo '<p>No hay información de guía de tallas disponible para este producto.</p>';
        return;
    }

    // Muestra la tabla de guía de tallas en el frontend
    echo '<table class="tabla-guia-tallas">
            <thead>
                <tr>
                    <th>Medidas</th>
                    <th>S</th>
                    <th>M</th>
                    <th>L</th>
                    <th>XL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Pecho</td>
                    <td>' . esc_html($guia_tallas['pecho_s']) . '</td>
                    <td>' . esc_html($guia_tallas['pecho_m']) . '</td>
                    <td>' . esc_html($guia_tallas['pecho_l']) . '</td>
                    <td>' . esc_html($guia_tallas['pecho_xl']) . '</td>
                </tr>
                <tr>
                    <td>Brazo</td>
                    <td>' . esc_html($guia_tallas['brazo_s']) . '</td>
                    <td>' . esc_html($guia_tallas['brazo_m']) . '</td>
                    <td>' . esc_html($guia_tallas['brazo_l']) . '</td>
                    <td>' . esc_html($guia_tallas['brazo_xl']) . '</td>
                </tr>
                <tr>
                    <td>Cintura</td>
                    <td>' . esc_html($guia_tallas['cintura_s']) . '</td>
                    <td>' . esc_html($guia_tallas['cintura_m']) . '</td>
                    <td>' . esc_html($guia_tallas['cintura_l']) . '</td>
                    <td>' . esc_html($guia_tallas['cintura_xl']) . '</td>
                </tr>
                <tr>
                    <td>Caderas</td>
                    <td>' . esc_html($guia_tallas['caderas_s']) . '</td>
                    <td>' . esc_html($guia_tallas['caderas_m']) . '</td>
                    <td>' . esc_html($guia_tallas['caderas_l']) . '</td>
                    <td>' . esc_html($guia_tallas['caderas_xl']) . '</td>
                </tr>
                <tr>
                    <td>Largo de Pierna</td>
                    <td>' . esc_html($guia_tallas['largo_pierna_s']) . '</td>
                    <td>' . esc_html($guia_tallas['largo_pierna_m']) . '</td>
                    <td>' . esc_html($guia_tallas['largo_pierna_l']) . '</td>
                    <td>' . esc_html($guia_tallas['largo_pierna_xl']) . '</td>
                </tr>
            </tbody>
          </table>';
}

// Añade la tabla de guía de tallas en la página de edición del producto
add_action('woocommerce_product_options_general_product_data', 'tabla_guia_tallas');

function tabla_guia_tallas() {
    ?>
    <div id='guia_tallas'>
        <h3>Guía de Tallas</h3>
        <table class="form-field">
            <tbody>
                <tr>
                    <th></th>
                    <th>S</th>
                    <th>M</th>
                    <th>L</th>
                    <th>XL</th>
                </tr>
                <tr>
                    <td>Pecho</td>
                    <?php echo generar_celda_guia_tallas('pecho_s'); ?>
                    <?php echo generar_celda_guia_tallas('pecho_m'); ?>
                    <?php echo generar_celda_guia_tallas('pecho_l'); ?>
                    <?php echo generar_celda_guia_tallas('pecho_xl'); ?>
                </tr>
                <tr>
                    <td>Brazo</td>
                    <?php echo generar_celda_guia_tallas('brazo_s'); ?>
                    <?php echo generar_celda_guia_tallas('brazo_m'); ?>
                    <?php echo generar_celda_guia_tallas('brazo_l'); ?>
                    <?php echo generar_celda_guia_tallas('brazo_xl'); ?>
                </tr>
                <tr>
                    <td>Cintura</td>
                    <?php echo generar_celda_guia_tallas('cintura_s'); ?>
                    <?php echo generar_celda_guia_tallas('cintura_m'); ?>
                    <?php echo generar_celda_guia_tallas('cintura_l'); ?>
                    <?php echo generar_celda_guia_tallas('cintura_xl'); ?>
                </tr>
                <tr>
                    <td>Caderas</td>
                    <?php echo generar_celda_guia_tallas('caderas_s'); ?>
                    <?php echo generar_celda_guia_tallas('caderas_m'); ?>
                    <?php echo generar_celda_guia_tallas('caderas_l'); ?>
                    <?php echo generar_celda_guia_tallas('caderas_xl'); ?>
                </tr>
                <tr>
                    <td>Largo de Pierna</td>
                    <?php echo generar_celda_guia_tallas('largo_pierna_s'); ?>
                    <?php echo generar_celda_guia_tallas('largo_pierna_m'); ?>
                    <?php echo generar_celda_guia_tallas('largo_pierna_l'); ?>
                    <?php echo generar_celda_guia_tallas('largo_pierna_xl'); ?>
                </tr>
            </tbody>
        </table>
    </div>
    <?php
}

// Función para generar las celdas de la guía de tallas
function generar_celda_guia_tallas($nombre_campo) {
    global $post;

    $valor_celda = get_post_meta($post->ID, '_' . $nombre_campo, true);

    return '<td><input type="text" name="' . $nombre_campo . '" value="' . esc_attr($valor_celda) . '" /></td>';
}

// Guarda los valores de la guía de tallas
add_action('woocommerce_process_product_meta', 'guardar_valores_guia_tallas');

function guardar_valores_guia_tallas($post_id) {
    $campos_guia_tallas = array(
        'pecho_s', 'pecho_m', 'pecho_l', 'pecho_xl',
        'brazo_s', 'brazo_m', 'brazo_l', 'brazo_xl',
        'cintura_s', 'cintura_m', 'cintura_l', 'cintura_xl',
        'caderas_s', 'caderas_m', 'caderas_l', 'caderas_xl',
        'largo_pierna_s', 'largo_pierna_m', 'largo_pierna_l', 'largo_pierna_xl',
    );

    foreach ($campos_guia_tallas as $campo) {
        $valor_campo = isset($_POST[$campo]) ? sanitize_text_field($_POST[$campo]) : '';
        update_post_meta($post_id, '_' . $campo, $valor_campo);
    }
}



// Agregar estilos CSS personalizados
function agregar_estilos_personalizados() {
    echo '<style>
        /* Estilos para la tabla de guía de tallas en el front end */
        .tabla-guia-tallas {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            overflow-x: auto; /* Permite desplazar horizontalmente en dispositivos pequeños */
        }

        .tabla-guia-tallas th,
        .tabla-guia-tallas td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .tabla-guia-tallas th {
            background-color: #f2f2f2;
        }

        @media screen and (max-width: 600px) {
            /* Estilos adicionales para tamaños de pantalla pequeños (por ejemplo, teléfonos) */
            .tabla-guia-tallas {
                overflow-x: auto;
            }

            .tabla-guia-tallas th,
            .tabla-guia-tallas td {
                font-size: 12px;
            }
        }

        /* Estilos para la tabla de guía de tallas en la página de edición del producto */
        .form-field table {
            width: 100%;
            border-collapse: collapse;
            overflow-x: auto;
        }

        .form-field th,
        .form-field td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .form-field th {
            background-color: #f2f2f2;
        }

        @media screen and (max-width: 600px) {
            /* Estilos adicionales para tamaños de pantalla pequeños (por ejemplo, teléfonos) */
            .form-field th,
            .form-field td {
                font-size: 12px;
            }
        }
    </style>';
}

// Agregar los estilos personalizados al hook 'wp_head'
add_action('wp_head', 'agregar_estilos_personalizados');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Función agregar_pestana_guia_tallas()Esta función incorpora una nueva pestaña, «Guía de Tallas», a las páginas de productos en WooCommerce. Utiliza el filtro woocommerce_product_tabs para personalizar la interfaz de productos.
   • Propósito:
     • Agregar una pestaña informativa sobre tallas en la página de productos.
   • Acciones Principales:
     • Configura el título, la prioridad y la función de devolución de llamada para la pestaña.
2. Función contenido_pestana_guia_tallas()Encargada de mostrar el contenido específico de la pestaña «Guía de Tallas» en el frontend. Obtiene información sobre tallas almacenada como metadatos del producto y la presenta de manera organizada en una tabla.
   • Propósito:
     • Mostrar la guía detallada de tallas en la interfaz del producto.
   • Acciones Principales:
     • Recupera información de tallas.
     • Presenta la información en una tabla fácil de entender.
3. Función tabla_guia_tallas()Se ejecuta en la interfaz de edición de productos y facilita la entrada y gestión de valores para la guía de tallas. Permite a los administradores mantener la información actualizada desde el backend.
   • Propósito:
     • Ofrecer una interfaz en la edición de productos para gestionar las tallas.
   • Acciones Principales:
     • Muestra una tabla editable con campos para cada talla.
4. Función generar_celda_guia_tallas($nombre_campo)Genera celdas para la tabla de guía de tallas en la página de edición del producto. Cada celda incluye un campo de entrada de texto para ingresar valores específicos de talla.
   • Propósito:
     • Facilitar la entrada de datos en la tabla de guía de tallas.
   • Acciones Principales:
     • Genera celdas con campos de entrada de texto.
5. Función guardar_valores_guia_tallas($post_id)Ejecutada al actualizar un producto, esta función guarda los valores ingresados para la guía de tallas. Obtiene, sanitiza y actualiza los metadatos del producto.
   • Propósito:
     • Almacenar los valores de tallas ingresados para cada producto.
   • Acciones Principales:
     • Obtiene, sanitiza y actualiza los metadatos del producto con los valores de la guía de tallas.
6. Función agregar_estilos_personalizados()Añade estilos CSS personalizados para mejorar la presentación visual de las tablas de guía de tallas, tanto en el frontend como en la página de edición del producto.
   • Propósito:
     • Mejorar la estética y legibilidad de las tablas de tallas.
   • Acciones Principales:
     • Define estilos CSS para tablas en el frontend y la página de edición.
7. Hooks y Acciones
   • add_action('woocommerce_product_options_general_product_data', 'tabla_guia_tallas'): Agrega la interfaz de administración de productos con campos de guía de tallas.
   • add_action('woocommerce_process_product_meta', 'guardar_valores_guia_tallas'): Guarda la información de guía de tallas al actualizar un producto.
   • add_action('wp_head', 'agregar_estilos_personalizados'): Agrega estilos CSS personalizados al encabezado del documento.

Resumen:

Este código proporciona una estructura completa para gestionar y mostrar información detallada sobre las tallas de productos en una tienda WooCommerce. Desde la interfaz de edición hasta la visualización en el frontend, cada función desempeña un papel crucial para ofrecer una experiencia completa y fácil de usar.

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.