Cómo personalizar la pestaña de información adicional de WooCommerce 

Si la página de tu producto tiene una pestaña que aparece en blanco, queda fuera de lugar o simplemente dice "Información adicional" sin decir nada útil a los compradores, no estás atascado con ella. La pestaña de información adicional de WooCommerce es totalmente personalizable, y la mayoría de los cambios solo llevan unos minutos.

En esta guía, te mostraré cómo editar la información adicional en WooCommerce para cambiar su nombre, rediseñarla, moverla u ocultarla por completo, dependiendo de lo que tenga sentido para tu tienda.

¿Qué es la pestaña de Información Adicional de WooCommerce?

La pestaña de información adicional de WooCommerce es una pestaña de la página de producto que muestra automáticamente el peso, las dimensiones y los atributos personalizados de tu producto. Aparece solo cuando un producto tiene asignado al menos un atributo o detalle de envío, por lo que si ves una pestaña vacía, esa suele ser la razón.

Pero la pestaña de información adicional puede hacer más que listar especificaciones. Es uno de los primeros lugares donde los compradores buscan para confirmar si un producto es adecuado para ellos. Dejarla genérica o vacía puede costarte la venta.

Cómo añadir información adicional a los productos de WooCommerce

Antes de explorar las opciones de personalización, veamos cómo añadir detalles de producto a la pestaña de información adicional en WooCommerce. La función de atributos integrada de WooCommerce es el punto de partida adecuado para añadir cosas como material, dimensiones o instrucciones de cuidado.

En tu panel de WordPress, ve a Productos » Atributos. Aquí es donde gestionarás todos los atributos de tus productos.

Dale a tu atributo un nombre descriptivo, como "Duración de la batería", "Material" o "Información de garantía". Esto es lo que los clientes verán en el front-end.

Luego haz clic en Añadir atributo.

Ahora, edita el producto al que quieres añadir esta información, desplázate hacia abajo hasta la sección Datos del producto y haz clic en la pestaña Atributos.

Elige tu nuevo atributo del menú desplegable, luego añade la información relevante en el campo Valor(es).

Ahora, haz clic en Guardar atributos, luego en Actualizar tu producto.

Tu nuevo atributo aparecerá ahora ordenado de forma ordenada en la pestaña de Información Adicional de la página del producto.

Cómo Personalizar la Pestaña de Información Adicional de WooCommerce

Ha añadido detalles valiosos del producto a su pestaña de Información adicional. Ahora hagamos que funcione mejor para su tienda. Una pestaña genérica no guía a los compradores hacia una compra. Estos métodos le dan control real sobre lo que muestra y cómo se ve.

Cambiar el estilo de la pestaña de Información Adicional

El editor visual de SeedProd le permite personalizar las pestañas de productos de WooCommerce sin tocar código. Puede cambiar colores, tipografía, espaciado y bordes para que coincidan con su marca, todo desde una interfaz de arrastrar y soltar.

Cuando esté listo para estilizar la pestaña de Información adicional, diríjase a SeedProd » Theme Builder desde su panel de WordPress y haga clic en “Editar diseño” en la plantilla de la Página de producto.

Una vez dentro del editor visual, busque el bloque llamado Pestañas de datos del producto. Esto controla el diseño de las pestañas de sus productos de WooCommerce, incluida la sección de Información adicional.

Haga clic en el bloque para abrir su configuración de diseño, que le otorga control total sobre:

• Colores de las pestañas: Cambie los colores de fondo, texto y borde para los estados activo e inactivo.
• Tipografía: Ajuste la fuente, el tamaño, el peso y el estilo del texto de la pestaña.
• Espaciado y relleno: Controle el espaciado alrededor y dentro del contenido de la pestaña.
• Bordes: Añada o personalice bordes para que la pestaña destaque.
• Estilos de tabla: Estilice la tabla de datos del producto, incluidos los colores del texto, el relleno e incluso añada un efecto de sombra.

Cuando esté satisfecho con el diseño, haga clic en "Guardar" y previsualice sus cambios. Así es como se ven mis cambios cuando previsualizo la página del producto:

¿Nuevo en SeedProd? Consulte esta guía para aprender cómo configurar una tienda online en WordPress.

Mover la Información Adicional a la Descripción

¿Quiere simplificar la página de su producto y facilitar la búsqueda de información clave? Puede mover el contenido de Información adicional directamente debajo de la descripción del producto de WooCommerce dentro de SeedProd.

Primero, edite la página del producto para ver el editor visual. Dependiendo del bloque que esté utilizando, arrastre las Pestañas de datos del producto desde su ubicación actual hasta debajo de la descripción de su producto.

Ahora haga clic en "Guardar" y previsualice la página de su producto para ver cómo queda.

Ocultar la Información Adicional de WooCommerce

Si un producto no tiene atributos o detalles de envío relevantes, ocultar la pestaña de información adicional mantiene la página del producto limpia. Es una mejor opción que dejar una pestaña vacía o escasa visible para los compradores.

Si está utilizando SeedProd para personalizar la página de su producto de WooCommerce, puede eliminar el bloque de Pestañas de datos del producto con unos pocos clics.

Pase el cursor sobre el bloque de Pestañas de datos del producto y haga clic en el icono de la papelera para eliminarlo.

Eso es todo. Las páginas de sus productos ahora están libres de desorden innecesario.

¿Necesita ocultar la pestaña para categorías de productos específicas? El enfoque de fragmento de PHP (cubierto en la sección Eliminar a continuación) se puede extender para dirigirse solo a productos de ciertas categorías. De esa manera, oculta la información adicional para productos donde no es relevante, sin afectar el resto de su catálogo.

Eliminar la Información Adicional de WooCommerce

¿Quiere un control más granular? Puede eliminar información adicional producto por producto. Esta opción es buena si solo desea eliminar el desorden de páginas de productos específicas.

Para hacer esto, ve a "Productos" en tu panel de WordPress y elige el producto que deseas editar.

En el panel "Datos del producto", haz clic en la pestaña "Atributos". Luego, haz clic en eliminar en los atributos que deseas eliminar.

Cuando veas esa página de producto, la pestaña Información adicional habrá desaparecido.

Nota: Este método elimina los atributos, no solo su visualización en el front-end. Si necesita esta información más adelante, es mejor usar SeedProd para ocultar la pestaña en lugar de eliminar los datos.

Renombrar la pestaña de Información Adicional

“Información adicional” es un nombre largo. Si desea editar la pestaña de información adicional de WooCommerce para reflejar mejor el contenido de su producto, puede cambiar el nombre de la pestaña con un fragmento de código rápido.

Nota: Para este método, usaré WPCode para agregar fragmentos de código personalizados en lugar de editar directamente los archivos del tema. Aquí tienes una guía sobre cómo usar WPCode. Antes de continuar, haz una copia de seguridad de tu sitio web para asegurarte de no perder nada si algo sale mal.

Si aún no lo has hecho, instala y activa el plugin WPCode.

Tras la activación, ve a Fragmentos de código » Añadir nuevo y elige "Añadir tu código personalizado (Nuevo fragmento)".

A continuación, dale un título a tu fragmento: Algo como "Renombrar pestaña Información adicional" funcionará. Luego pega el siguiente código en el editor de código:

add_filter( 'woocommerce_product_tabs', 'rename_additional_information_tab', 10, 1 );

function rename_additional_information_tab( $tabs ) {
  $tabs['additional_information']['title'] = __( 'Your New Tab Name', 'your-theme-textdomain' ); // Customize the tab name here
  return $tabs;
}

Ahora, reemplaza 'Tu Nuevo Nombre de Pestaña' con el nombre de pestaña deseado (por ejemplo, 'Especificaciones del producto', 'Más información', etc.). Yo usé "Información del producto".

Si no estás seguro del text domain de tu tema, puedes dejar 'your-theme-textdomain' como 'woocommerce'.

En "Tipo de código", selecciona "Fragmento de PHP".

Ahora, haz clic en el botón "Guardar fragmento", luego cambia el interruptor "Inactivo" a "Activo".

Eso es todo. Revisa la página de tu producto. Tu pestaña de Información Adicional ahora tiene un nombre completamente nuevo.

Cómo Reordenar las Pestañas de Producto de WooCommerce

Si la pestaña de Información Adicional no pertenece al final de la página de tu producto, puedes moverla. El editor visual de SeedProd lo hace sencillo sin necesidad de código.

Desde SeedProd » Theme Builder, abre tu plantilla de Página de Producto. En el editor visual, busca el bloque Pestañas de Datos del Producto y arrástralo a la posición donde deseas que aparezca el grupo de pestañas en la página.

Para reordenar pestañas individuales dentro del grupo de pestañas, WooCommerce utiliza un sistema de prioridad. La pestaña de Información Adicional tiene una prioridad predeterminada de 20, mientras que la pestaña de Descripción es 10 y Reseñas es 30. Un número más bajo aparece primero.

Puedes ajustar el orden de las pestañas con un fragmento de PHP a través de WPCode. Agrega este código para cambiar la prioridad de la pestaña de Información Adicional:

add_filter( 'woocommerce_product_tabs', 'reorder_additional_information_tab', 98 );

function reorder_additional_information_tab( $tabs ) {
  $tabs['additional_information']['priority'] = 5; // Lower number = appears first
  return $tabs;
}

Cambia el número de prioridad para controlar el orden. Un valor de 5 coloca Información Adicional antes de la pestaña Descripción, mientras que 25 la sitúa entre Descripción y Reseñas.

Añadir contenido personalizado a la pestaña Información adicional

¿Listo para ir más allá de los atributos básicos del producto? Puedes convertir tu pestaña de Información Adicional en un centro de contenido. Aquí tienes dos formas de agregar campos y contenido dinámico a la pestaña de información adicional de WooCommerce.

Método 1: Usando fragmentos de PHP

Si te sientes cómodo con un poco de código, los fragmentos de PHP te dan más control sobre qué contenido aparece en tu pestaña. Usaré el plugin WPCode para mantener las cosas organizadas.

Crea un nuevo fragmento con un título descriptivo (por ejemplo, "Añadir contenido personalizado a la pestaña Información adicional").

Luego, pega el siguiente código en el editor de fragmentos:

add_action( 'woocommerce_product_additional_information', 'add_custom_content_to_additional_info' );
function add_custom_content_to_additional_info() {
  // Add your custom content here!
  echo '<p>This is some custom content added to the Additional Information tab!</p>';
  echo '<ul>';
  echo '<li>You can add text, HTML, shortcodes...</li>';
  echo '<li>...even output content from custom fields!</li>';
  echo '</ul>';
}

Puedes reemplazar el contenido de ejemplo dentro de las sentencias echo con el contenido deseado. En mi ejemplo, añadiré detalles sobre la información de envío.

Luego, guarda tu fragmento, establece su "Tipo de código" como "Fragmento de PHP" y actívalo.

Ahora puedes ver tu página de producto para ver la nueva información:

Método 2: Usando plugins de WordPress

¿Prefieres un enfoque más visual? Varios plugins de WooCommerce facilitan la adición de contenido personalizado a la pestaña de información adicional de WooCommerce:

• Plugins de Gestión de Pestañas: Plugins como YITH WooCommerce Tab Manager y WooCommerce Product Tabs te permiten crear pestañas completamente nuevas (no solo personalizar la existente) con arrastrar y soltar.
• Plugins de Campos Personalizados: Si ya estás utilizando un plugin como Advanced Custom Fields (ACF) para gestionar datos de productos personalizados, también puedes usar sus funciones para mostrar ese contenido en la pestaña de Información Adicional.

Preguntas Frecuentes

¿Cómo agrego información adicional a los productos de WooCommerce?

Ve a Productos » Atributos en tu panel de WordPress y crea un nuevo atributo con un nombre descriptivo. Luego edita el producto, abre la pestaña Atributos en el panel de Datos del Producto y asigna tu atributo con los valores relevantes. Haz clic en Guardar Atributos y actualiza el producto. El atributo aparecerá en la pestaña Información Adicional en la página del producto.

¿Cómo oculto la pestaña de información adicional de WooCommerce?

Si usas SeedProd, abre tu plantilla de Página de Producto en Theme Builder y elimina el bloque Pestañas de Datos del Producto. Esto elimina la pestaña globalmente para todos los productos.

Para ocultarlo solo para categorías de productos específicas, puedes ampliar el enfoque de fragmentos de PHP usando WPCode para dirigirte a productos por categoría, dejando la pestaña visible para los productos donde sea útil.

¿Cómo renombro la pestaña de información adicional de WooCommerce?

Usa WPCode para agregar un fragmento de PHP que filtre el hook woocommerce_product_tabs. En el fragmento, establece $tabs['additional_information']['title'] a tu etiqueta preferida, como "Especificaciones del Producto" o "Más Información". Guarda y activa el fragmento, y tus páginas de producto mostrarán el nuevo nombre de la pestaña inmediatamente.

¿Por qué no se muestra mi pestaña de información adicional de WooCommerce?

La pestaña Información Adicional solo aparece cuando un producto tiene al menos un atributo o campo de envío (peso o dimensiones) asignado. Si la pestaña falta, revisa la pestaña Atributos en el panel Datos del Producto y confirma que al menos un atributo tiene un valor guardado.

Si estás usando SeedProd y la pestaña aún no aparece, verifica que el bloque Pestañas de Datos del Producto esté presente en tu plantilla de Página de Producto y que no haya sido eliminado.

¿Listo para crear páginas de producto que conviertan?

Personalizar la pestaña de información adicional de WooCommerce es una de las mejoras rápidas disponibles para cualquier página de producto. Usa SeedProd para facilitar la creación de páginas de producto atractivas y orientadas a la conversión sin escribir código.

Aquí tienes algunos consejos, trucos y tutoriales más de WooCommerce que te pueden resultar útiles:

• Cómo Añadir el Botón Ver Carrito en WooCommerce
• Cómo Cambiar el Título de la Página de Tienda en WooCommerce
• Cómo crear una impresionante galería de imágenes de productos en WooCommerce
• Cómo añadir valoraciones de estrellas a las páginas de productos de WooCommerce
• Cómo ocultar productos sin stock en WooCommerce

¡Gracias por leer! Nos encantaría conocer tu opinión, así que no dudes en unirte a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.