✅Mostrar los Campos Personalizados de WordPress en el Front End (Sin Plugins)

La capacidad de presentar información detallada y específica sobre los productos es esencial para proporcionar a los clientes una experiencia de compra completa. WooCommerce, como una de las plataformas de comercio electrónico más populares para WordPress, ofrece flexibilidad y personalización a los desarrolladores para adaptar las fichas de productos según las necesidades específicas de cada tienda en línea.

El código proporcionado se centra en una tarea específica: la creación de una nueva pestaña en la ficha del producto que muestra características adicionales si existen datos en campos personalizados. Esta funcionalidad tiene múltiples casos de uso que pueden mejorar la presentación y la información disponible para los usuarios.

Casos de Uso y Escenarios Aplicables:

1. Productos con Variantes: Ideal para productos que vienen en diferentes colores, tallas, materiales, etc. La nueva pestaña permite mostrar estas variantes de manera ordenada, proporcionando a los clientes una visión rápida de las opciones disponibles.
2. Información Técnica: Para productos que requieren información técnica detallada, como dimensiones, peso y material. La nueva pestaña proporciona un espacio específico para resaltar estas características, evitando la sobrecarga de información en otras secciones de la ficha del producto.
3. Destacar Atributos Especiales: Puede utilizarse para destacar atributos especiales que diferencian un producto de otros, como la resistencia al agua, la durabilidad del material, etc.
4. Productos Personalizables: En tiendas que ofrecen productos personalizables, esta funcionalidad podría mostrar los detalles específicos de la personalización elegida por el cliente.
5. Mejora de la Experiencia del Usuario: Al proporcionar una pestaña específica para características, se mejora la navegabilidad y legibilidad de la ficha del producto, evitando la congestión de información en secciones principales.

Beneficios de la Implementación:

• Presentación Estructurada: La información se presenta de manera organizada y estructurada, mejorando la legibilidad y la comprensión.
• Adaptabilidad: Se adapta a una variedad de productos y casos de uso, desde ropa y accesorios hasta productos técnicos y personalizables.
• Experiencia del Usuario Mejorada: Facilita a los clientes encontrar rápidamente información relevante sin abrumarlos con detalles en la sección principal de la ficha del producto.
• Personalización: Permite a los propietarios de tiendas personalizar la presentación de productos según sus necesidades específicas, proporcionando una ventaja competitiva.

En resumen, la implementación de esta funcionalidad no solo mejora la presentación de los productos en una tienda WooCommerce, sino que también abre oportunidades para adaptar la experiencia de compra a las expectativas y preferencias de los clientes.

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

<?php

// Función para agregar una nueva pestaña y mostrar campos personalizados en la ficha del producto
function agregar_pestana_caracteristicas_producto() {
    $color = get_post_meta(get_the_ID(), 'color', true);
    $talla = get_post_meta(get_the_ID(), 'talla', true);
	$medidas = get_post_meta(get_the_ID(), 'medidas', true);
	$material = get_post_meta(get_the_ID(), 'material', true);
    $peso = get_post_meta(get_the_ID(), 'peso', true);




  // Verificar si hay datos en al menos uno de los campos personalizados
if (!empty($color) || !empty($talla) || !empty($medidas) || !empty($material) || !empty($peso)) {
    echo '<li class="woocommerce-Tabs-panel woocommerce-Tabs-panel--custom_fields panel entry-content">';
    echo '<div class="woocommerce-product-custom-fields">';
    echo '<h2>Características del Producto</h2>';
    
    // Mostrar los campos solo si hay datos
    if (!empty($color)) {
        echo '<p><strong>Color:</strong> ' . esc_html($color) . '</p>';
    }
    
    if (!empty($talla)) {
        echo '<p><strong>Talla:</strong> ' . esc_html($talla) . '</p>';
    }
    
    if (!empty($medidas)) {
        echo '<p><strong>Medidas:</strong> ' . esc_html($medidas) . '</p>';
    }
    
    if (!empty($material)) {
        echo '<p><strong>Material:</strong> ' . esc_html($material) . '</p>';
    }
    
    if (!empty($peso)) {
        echo '<p><strong>Peso:</strong> ' . esc_html($peso) . '</p>';
    }

    echo '</div>';
    echo '</li>';
} else {
    // Mostrar un mensaje si no hay datos en los campos personalizados
    echo '<li class="woocommerce-Tabs-panel woocommerce-Tabs-panel--custom_fields panel entry-content">';
    echo '<p>Este producto no tiene características adicionales.</p>';
    echo '</li>';
}

}

// Agregar la nueva pestaña al final de la lista de pestañas de la ficha del producto
function agregar_pestana_caracteristicas_producto_pestanas($tabs) {
    $tabs['custom_fields'] = array(
        'title'    => __('Características del Producto', 'textdomain'),
        'priority' => 21,
        'callback' => 'agregar_pestana_caracteristicas_producto',
    );
    return $tabs;
}
add_filter('woocommerce_product_tabs', 'agregar_pestana_caracteristicas_producto_pestanas');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Función agregar_pestana_caracteristicas_producto()

Esta función tiene como objetivo agregar una nueva pestaña a la ficha del producto en WooCommerce, que mostrará campos personalizados si existen datos en ellos.

1. Obtención de Datos:
   • Se obtienen los valores de campos personalizados (‘color’, ‘talla’, ‘medidas’, ‘material’, ‘peso’) para el producto actual.
2. Verificación de Datos:
   • Se verifica si al menos uno de los campos personalizados tiene datos.
3. Generación de HTML:
   • Si hay datos, se genera un bloque HTML que incluye una lista (<li>) y un contenedor para mostrar las características del producto.
4. Mostrar Características:
   • Se muestra un título (<h2>) indicando «Características del Producto».
   • Se muestran los campos personalizados solo si tienen datos.
5. Mensaje de Ausencia de Datos:
   • Si no hay datos, se muestra un mensaje indicando que el producto no tiene características adicionales.

Función agregar_pestana_caracteristicas_producto_pestanas($tabs)

Esta función agrega la pestaña creada por agregar_pestana_caracteristicas_producto() a la lista de pestañas de la ficha del producto.

1. Agregando la Pestaña:
   • Se añade la nueva pestaña ‘custom_fields’ con un título personalizado, prioridad 21 y un callback a la función anterior.
2. Retorno de Pestañas Actualizadas:
   • Se retorna el array actualizado de pestañas.

Hooks y Acciones:

• add_filter('woocommerce_product_tabs', 'agregar_pestana_caracteristicas_producto_pestanas'): Se utiliza para conectar la función agregar_pestana_caracteristicas_producto_pestanas a la lista de pestañas de productos en WooCommerce.

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.