La pestaña de Información adicional de WooCommerce es un lugar práctico para los detalles adicionales del producto que los compradores adoran, como especificaciones detalladas, información de envío e instrucciones de cuidado. Pero aquí está el truco: WooCommerce ya tiene funciones integradas para ello.
En esta guía, le mostraré cómo desbloquear el verdadero poder de la pestaña Información adicional. Nos desharemos de las cosas redundantes, personalizaremos lo que queda y crearemos una página de producto que convierta.
La pestaña Información adicional está vinculada a los datos de tu producto WooCommerce, pero eso no significa que estés atado a cómo se ve o lo que muestra. En esta guía, te explicaré cómo cambiarla, renombrarla, rediseñarla o eliminarla, dependiendo de lo que tenga sentido para tu tienda.
Índice
- ¿Qué es la pestaña de información adicional de WooCommerce?
- Cómo añadir información adicional a los productos de WooCommerce
- Cómo personalizar la pestaña de información adicional de WooCommerce
- Cambiar el estilo de la pestaña Información adicional
- Mover información adicional a la descripción
- Ocultar información adicional de WooCommerce
- Eliminar información adicional de WooCommerce
- Cambiar el nombre de la pestaña Información adicional
- Añadir contenido personalizado a la pestaña Información adicional
¿Qué es la pestaña de información adicional de WooCommerce?
La pestaña Información adicional aparece junto a la pestaña Descripción en la página del producto, parte del diseño que los compradores ven antes de llegar a la página del carrito de WooCommerce. Por defecto, WooCommerce utiliza esta pestaña para mostrar atributos básicos del producto como el tamaño, el peso y el material.
Pero la pestaña Información adicional puede dar mucho más de sí. En lugar de limitarse a enumerar los detalles básicos, considere este espacio como un inmueble de primera para impulsar las ventas.
¿Por qué? Porque es poco probable que el 87% de los consumidores vuelvan a comprarte si su primera compra está plagada de información inexacta o incompleta sobre el producto.(fuente)
Esta guía le mostrará cómo transformar su pestaña de Información adicional de una simple idea de último momento en una parte clave de una experiencia positiva para el cliente.
Cómo añadir información adicional a los productos de WooCommerce
Antes de explorar las opciones de personalización, vamos a examinar cómo añadir detalles del producto a la pestaña de información adicional en WooCommerce.
La función de atributos integrada de WooCommerce es un buen punto de partida para añadir elementos sencillos como el material, las dimensiones o las instrucciones de cuidado.
En su panel de WordPress, vaya a Productos " Atributos. Aquí es donde podrás gestionar todos los atributos de tus productos.
Dé a su 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 la parte frontal.
A continuación, haga clic en Añadir atributo.
Ahora, edite el producto en el que desea añadir esta información, desplácese hasta la sección Datos del producto y haga clic en la pestaña Atributos.
Elija su nuevo atributo en el menú desplegable y, a continuación, añada la información pertinente en el campo Valor(es).
Ahora, haga clic en Guardar atributos y, a continuación, en Actualizar su producto.
Su nuevo atributo aparecerá ahora perfectamente organizado en la pestaña Información adicional de la página del producto.
Cómo personalizar la pestaña de información adicional de WooCommerce
Ha añadido valiosos detalles del producto a la pestaña Información adicional. Pero una pestaña genérica no grita exactamente "¡Mírame!". Es hora de hacer suya esta pestaña y utilizarla para guiar a los compradores hacia la compra.
Cambiar el estilo de la pestaña Información adicional
La pestaña de Información Adicional es un lugar privilegiado en la página de su producto, no deje que pase a un segundo plano. Con SeedProd, puede personalizar fácilmente su estilo para que coincida con su marca y llamar la atención sobre esta valiosa información.
SeedProd es el mejor constructor de sitios web de WordPress para crear impresionantes tiendas WooCommerce centradas en la conversión. Su interfaz de arrastrar y soltar y bloques pre-construidos le dan total libertad de diseño, incluso si usted no es un codificador.
¿Eres nuevo en SeedProd? Echa un vistazo a esta guía para aprender a configurar una tienda online en WordPress.
Cuando esté listo para dar estilo a 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, busca el bloque llamado Fichas de Datos de Producto. Este bloque controla el diseño de las fichas de producto de WooCommerce, incluida la sección Información adicional.
Haz clic en el bloque para abrir su configuración de diseño, que te ofrece un control total:
- Colores de pestaña: Cambia los colores de fondo, texto y borde para los estados activo e inactivo.
- Tipografía: Ajusta la fuente, el tamaño, el peso y el estilo del texto de la pestaña.
- Espaciado y relleno: Controla el espaciado alrededor y dentro del contenido de la pestaña.
- Bordes: Añade o personaliza los bordes para que la ficha destaque.
- Estilos de tabla: Estiliza la tabla de datos del producto, incluidos los colores del texto, el relleno e incluso añade un efecto de sombra.
Cuando estés satisfecho con el diseño, haz clic en "Guardar" y previsualiza los cambios. Así es como se ven mis cambios cuando previsualizo la página del producto:
Mover información adicional a la descripción
¿Quiere simplificar su página de producto y hacer que la información clave sea fácil de encontrar? Puede mover directamente el contenido de la información adicional en la descripción del producto dentro de SeedProd.
En primer lugar, edite la página del producto para ver el editor visual. Dependiendo del bloque que estés utilizando, arrastra las pestañas de datos del producto desde su ubicación actual hasta debajo de la descripción de tu producto.
Ahora haga clic en "Guardar" y previsualice su página de producto para ver cómo queda.
Ocultar información adicional de WooCommerce
¿Tiene un producto tan increíble que no necesita más detalles? Lo entiendo. A veces, menos es más. Si no utilizas la pestaña Información adicional, lo mejor es eliminarla por completo y crear una página de producto súper simplificada.
Si está utilizando SeedProd para personalizar su página de producto WooCommerce, puede simplemente eliminar el bloque Pestañas de Datos de Producto con unos pocos clics.
Pase el ratón por encima del bloque Fichas de datos de productos y haga clic en el icono de la papelera para eliminarlo.
Ya está. Ahora, sus páginas de productos están libres de desorden innecesario.
Eliminar información adicional de WooCommerce
¿Desea un control más detallado? Puede eliminar la información adicional producto por producto. Esta opción es buena si solo quieres despejar páginas de productos específicos.
Para ello, vaya a "Productos" en el panel de control de WordPress y seleccione el producto que desea editar.
En el panel "Datos del producto", haga clic en la pestaña "Atributos". A continuación, haga clic en eliminar en los atributos que desee eliminar.
Cuando vea la página de ese producto, la pestaña Información adicional desaparecerá.
Cambiar el nombre de la pestaña Información adicional
"Información Adicional" - es un trabalenguas, ¿verdad? Si quieres editar la pestaña Información adicional en WooCommerce para reflejar mejor el contenido de tu producto, puedes cambiar el nombre de la pestaña con un rápido fragmento de código.
Si aún no lo has hecho, instala y activa el plugin WPCode.
Tras la activación, vaya a Fragmentos de código " Añadir nuevo y elija "Añadir su código personalizado (nuevo fragmento)".
A continuación, ponga un título a su fragmento: Algo como "Renombrar pestaña de información adicional" funcionará. A continuación, pegue 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, sustituya "Nombre de su nueva pestaña" por el nombre que desee para la pestaña (por ejemplo, "Especificaciones del producto", "Más información", etc.). Yo he utilizado "Información del producto".
Si no estás seguro del dominio de texto de tu tema, puedes dejar 'your-theme-textdomain' como 'woocommerce'.
En "Tipo de código", seleccione "Fragmento PHP".
Ahora, haz clic en el botón "Guardar fragmento" y cambia el interruptor "Inactivo" a "Activo".
Ya está. Eche un vistazo a la página de su producto: la pestaña Información adicional tiene ahora un nuevo nombre.
Añadir contenido personalizado a la pestaña Información adicional
¿Está preparado para ir más allá de los atributos básicos del producto? Puede convertir su pestaña Información adicional en un completo centro de contenidos. Veamos dos formas de añadir contenido dinámico: utilizando fragmentos de PHP para mayor flexibilidad o plugins de WordPress para mayor facilidad de uso.
Método 1: Uso de fragmentos de PHP
Si te sientes cómodo con un poco de código, los fragmentos de PHP te dan más control sobre el contenido que aparece en tu pestaña. Usaremos el fiel plugin WPCode para mantener las cosas organizadas.
Cree un nuevo fragmento con un título descriptivo (por ejemplo, "Añadir contenido personalizado a la pestaña de información adicional").
A continuación, pegue 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>';
}Puede sustituir el contenido del ejemplo dentro de las declaraciones echo por el contenido que desee. En mi ejemplo, añadiré detalles sobre la información de envío.
A continuación, guarde el fragmento, establezca su "Tipo de código" en "Fragmento PHP" y actívelo.
Ahora puede consultar la página de su producto para ver la nueva información:
Método 2: Utilizar plugins de WordPress
¿Prefieres un enfoque más visual? Varios plugins de WooCommerce facilitan la adición de contenido personalizado a la pestaña Información adicional de WooCommerce:
- Plugins Gestores 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 utilizas un plugin como Advanced Custom Fields (ACF) para gestionar los datos personalizados de los productos, también puedes utilizar sus funciones para mostrar ese contenido en la pestaña Información adicional.
¿Listo para crear páginas de productos que conviertan?
A estas alturas, ya estás en camino de dominar la pestaña Información adicional de WooCommerce. Ya has aprendido a añadir contenido valioso, deshacerte del desorden, personalizar el estilo e incluso mover cosas para crear una experiencia de compra más fluida y persuasiva.
Ahora es su turno. Utiliza SeedProd para que crear páginas de producto atractivas y orientadas a la conversión sea ridículamente fácil.
Aquí tienes más consejos, trucos y tutoriales de WooCommerce que pueden resultarte útiles:
- Cómo añadir el botón Ver carrito en WooCommerce
- Cómo cambiar el título de la página de la tienda en WooCommerce
- Cómo crear una impresionante galería de imágenes de productos en WooCommerce
- Cómo añadir estrellas a las páginas de productos de WooCommerce
- Cómo ocultar productos agotados en WooCommerce
Gracias por leernos. 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 contenidos útiles para hacer crecer tu negocio.
