La página de producto es crucial para el proceso de venta. Es el lugar donde el comprador decide continuar y adquirir el artículo, o marcharse sin ninguna garantía de que vuelva. Como propietario de una tienda online, tu objetivo es atraer a los visitantes a las páginas de tus productos y lograr que den los pasos finales: Añadir al carrito y Finalizar compra.
Para ello, es esencial que las páginas de tus productos hagan el mejor trabajo posible al promocionar el artículo que vendes. La plantilla de producto predeterminada de WooCommerce es limpia y profesional, y te proporciona una base sólida para tu página que puedes ampliar utilizando los métodos que se indican a continuación.
Cómo optimizar tu plantilla de página de producto de WooCommerce
Hay varias formas de personalizar las páginas de producto o la plantilla de WooCommerce. Algunos métodos están incluidos en WooCommerce. Para otros, necesitarás una extensión. También puedes usar el Editor del sitio o realizar personalizaciones manualmente. Veamos más de cerca cada opción.
Cómo personalizar tu página de producto de WooCommerce mediante funciones integradas
Muchas optimizaciones de las páginas de productos pueden realizarse sin complementos ni programación. Las fotos de alta calidad, las descripciones informativas y la información clave del producto facilitan que el visitante se sienta cómodo al comprarlo.
Activa las reseñas y las valoraciones para generar confianza. Configura productos relacionados, ventas cruzadas y ventas adicionales para aumentar el valor medio de los pedidos y facilitar que los clientes descubran nuevos artículos. Incluye testimonios de clientes en las descripciones o pestañas de tus productos como prueba social.
Una vez optimizado el contenido de tu página, puedes mejorar aún más las páginas de tus productos utilizando extensiones de WooCommerce, editando la plantilla de página de producto con el Editor del sitio y personalizándolas manualmente con código y hooks.
Cómo personalizar la página de producto utilizando extensiones de WooCommerce
Una extensión es un plugin de WordPress creado específicamente para proporcionar funcionalidades adicionales a las tiendas de WooCommerce. A continuación se muestran algunas extensiones de WooCommerce que puedes utilizar para proporcionar información adicional sobre los productos, mejorar la experiencia de compra y ampliar tu página más allá de sus funciones predeterminadas. Puedes encontrar aún más extensiones para personalizarla en la biblioteca oficial de extensiones de WooCommerce.
1. Advanced Product Variation for WooCommerce
Los productos variables son artículos con opciones como talla y color: elecciones que el comprador hace antes de finalizar la compra. En la interfaz pública, WooCommerce muestra un menú desplegable para cada atributo (como talla o color), con una lista de las variaciones disponibles debajo (como Pequeña, Mediana o Grande).
Para un enfoque más visual, Advanced Product Variation for WooCommerce te permite mostrar variaciones de productos con muestras (de colores, imágenes y texto), galerías y tablas. Incluso puedes incluir vídeos en tus muestras.
Las muestras de variaciones se muestran en la página del producto o en la principal página de la tienda, según la configuración que establezcas. Puedes crear muestras aprovechando las imágenes de productos existentes y las imágenes destacadas.
También puedes personalizar el diseño de la galería de productos, trasladándola de su posición predeterminada debajo de la imagen destacada al lado izquierdo.
Obtén más información sobre Advanced Product Variation for WooCommerce.
2. WooCommerce Tab Manager
Las pestañas de la página de producto de WooCommerce aparecen debajo del botón Añadir al carrito y te permiten mostrar información adicional, manteniendo elementos clave como el título y el precio por encima del pliegue.
Esta información adicional puede incluir materiales e ingredientes del producto, pesos y dimensiones, tablas de tallas, tablas de precios, plazos de entrega, gastos de envío, vídeos explicativos: cualquier cosa que ayude al cliente a sentirse seguro al realizar su compra.
Con WooCommerce Tab Manager, puedes cambiar el nombre, reordenar y eliminar las pestañas predeterminadas —Descripción larga, Información adicional y Reseñas—, así como personalizar esta sección creando tus propias pestañas globales, para toda una categoría y específicas para cada producto.
Utiliza el plugin para establecer un orden predeterminado de las pestañas que pueda modificarse a nivel de producto. Gracias a una interfaz de arrastrar y soltar, no necesitas modificar los archivos del tema ni entrar en el código.
Si ya tienes pestañas personalizadas mediante otros plugins, WooCommerce Tab Manager las detecta y te ofrece la opción de mostrarlas u ocultarlas. Una ventaja importante de este plugin es que el contenido de tus pestañas se incluye en los resultados de búsqueda de tu sitio.
Obtén más información sobre WooCommerce Tab Manager.
3. Product FAQs
Las preguntas frecuentes, o FAQ, son una forma sencilla de organizar y presentar la información de los productos a tus visitantes. Con la extensión Product FAQs puedes añadir una pestaña de preguntas frecuentes específica para cada producto, con un número ilimitado de preguntas y respuestas.
El plugin funciona con todos los tipos de productos y añade una sección de preguntas frecuentes al crear o editar una página de producto.
En la interfaz pública, las preguntas frecuentes se muestran en formato de acordeón con animación.
Obtén más información sobre Product FAQs.
4. Composite Products
Con Composite Products, tus clientes pueden crear kits o productos configurables.
Para cada producto compuesto, permitirás que los clientes elijan entre selecciones predeterminadas del inventario existente. Puedes asignar tarifas adicionales a selecciones específicas y permitir que ciertas categorías sean opcionales.
Por ejemplo, un collar podría incluir opciones para la cadena (plata, oro), la piedra (rubí, granate, esmeralda) y un colgante opcional (con varias formas para elegir).
Para cada uno de los componentes del kit —cadena, piedra y colgante—, puedes seleccionar los SKU entre los que el cliente podrá elegir o permitirle escoger cualquier opción de una categoría de productos completa.
La lógica condicional permite mostrar u ocultar opciones según las elecciones anteriores (por ejemplo, la camisa roja no está disponible en determinadas tallas), y el seguimiento a nivel de componente facilita una gestión avanzada del inventario. Si tienes una gran cantidad de opciones, puedes crear vistas con ordenación, filtrado y paginación para facilitar la compra.
Más información sobre Composite Products.
5. Product Add-Ons
La extensión Product Add-Ons permite a tus clientes personalizar y mejorar sus compras mediante extras gratuitos y de pago.
Los complementos pueden incluir garantías, materiales de mayor calidad, opciones de envío prioritario o personalizaciones como monogramas y grabados personalizados. Si la gente suele comprar tus productos como regalo, podrías añadir una opción de envoltorio o un campo para mensajes de regalo.
Las organizaciones sin ánimo de lucro podrían permitir que los clientes incluyeran una donación con su compra y la hicieran en honor de alguien añadiendo un nombre y un mensaje.
Si tienes WooCommerce Bookings, la extensión Product Add-Ons te permite crear opciones para servicios adicionales (enjuague capilar después del corte de pelo) o mejoras VIP para asientos y acceso especiales. También funciona con WooCommerce Subscriptions para que puedas ofrecer complementos para tus productos de suscripción.
Tus complementos pueden incluir campos personalizados que se muestran como cuadros de texto, menús desplegables, casillas de verificación, selecciones basadas en imágenes y campos de precio personalizado para elementos como propinas y donaciones. Estos campos pueden aplicarse a todo tu catálogo o asignarse a productos específicos.
Una vez configurados los complementos, aparecen en las páginas de producto encima del botón Añadir al carrito, en el orden que elijas.
Más información sobre Product Add-Ons.
Personaliza tu página de producto mediante el Editor del sitio
Con los temas de bloques, puedes personalizar el aspecto de la página de producto editando la plantilla de página «Producto individual» en el Editor del sitio. En el panel de administración de WordPress, ve a Apariencia → Editor.
Elige “Explorar todas las plantillas” en el menú desplegable situado en la parte superior central de la página. Elige la plantilla de Producto individual en la lista que aparece.
El diseño de página predeterminado contiene el encabezado, el pie de página y el bloque Producto individual de WooCommerce, que muestra información del producto, el precio y elementos de imagen.
Debes hacer una copia de seguridad de tu sitio antes de realizar cambios en la plantilla de página de producto. Ciertos cambios —por ejemplo, eliminar accidentalmente el bloque Producto individual y guardar— impedirán que tus visitantes puedan comprar.
Cómo editar las plantillas de encabezado y pie de página de la página de Producto individual
La pestaña Plantilla, dentro de Ajustes (el icono de engranaje situado arriba a la derecha), contiene enlaces para gestionar el encabezado y el pie de página. Haz clic en cualquiera de las opciones para gestionar esa parte de la plantilla de página. También puedes hacer clic directamente en un área de la plantilla para empezar a editarla. Recuerda que cualquier cambio realizado aquí se aplicará a todos los productos que utilicen la plantilla.
En el encabezado, puedes editar el título del sitio y los enlaces del menú de navegación principal, e incluso añadir nuevos bloques para personalizar específicamente tu página de producto. Usa este espacio para añadir imágenes, texto y otros elementos que mejoren la capacidad de venta de tu página de producto. Podrías añadir una nota o un banner sobre una promoción o una política para informar a los clientes de una oferta actual o de cómo obtener envío gratuito en pedidos superiores a un importe determinado.
Puedes hacer algo similar con el pie de página de la página de producto. Por ejemplo, añadir el testimonio de un cliente o información sobre una política de garantía de satisfacción.
Cómo personalizar el cuerpo de Producto individual
El bloque Producto individual muestra una advertencia en negrita en la parte superior: «¡No elimines este bloque! Eliminarlo provocará efectos inesperados en tu tienda». ¡Tómate este mensaje en serio!
Sin embargo, puedes añadir nuevos bloques alrededor del bloque Producto individual para personalizar por completo el diseño de tu página de producto.
Usa el icono + para añadir elementos encima o debajo del bloque Producto individual y, después, incluye los bloques que quieras para personalizar la página.
Usa un bloque de párrafo para incluir ofertas actuales (“Gasta 100 $ o más y obtén envío gratuito”), una garantía de satisfacción o cualquier otra cosa que ayude a los visitantes a decidirse a comprar. Añade un bloque de vídeo que muestre una mirada entre bastidores a tus procesos. O incluye productos recomendados específicos que quieras promocionar. ¡El límite lo pones tú!
Además, en cada bloque puedes editar ajustes como el color de fondo, la tipografía y el espaciado para hacerlo realmente tuyo.
Personaliza manualmente tu página de producto (mediante código y hooks)
Para opciones avanzadas —sin el coste ni el mantenimiento de los plugins—, puedes editar y personalizar manualmente tu página de producto mediante código y hooks.
Antes de hacer cambios en tus archivos, es importante que te tomes el tiempo de hacer una copia de seguridad de WooCommerce. Si utilizas Jetpack VaultPress Backup, esto se hace automáticamente y en tiempo real. Por lo tanto, si alguno de tus cambios hace que tu sitio deje de funcionar, puedes restaurar una copia de seguridad con solo unos clics, incluso si no tienes acceso a tu panel de WordPress.
Además, querrás usar un tema hijo para realizar estos cambios. De lo contrario, cuando actualices tu tema o WooCommerce más adelante, podrías perder todas tus personalizaciones. Otra opción es usar un plugin como Code Snippets, que te permite añadir código personalizado a tu sitio en fragmentos que puedes activar y desactivar según sea necesario.
Personaliza las páginas de producto de WooCommerce mediante hooks
Los hooks permiten a los propietarios de sitios añadir código y personalizar páginas sin los riesgos asociados a editar archivos del núcleo. Hay dos tipos de hooks: acciones y filtros. Las acciones permiten insertar código en puntos específicos, mientras que los filtros permiten manipular y devolver una variable.
Por ejemplo, puedes usar acciones para añadir un nuevo campo de pago y, después, usar filtros para cambiar las etiquetas o los textos de marcador de posición de los campos de pago existentes. Puedes encontrar la lista de hooks de WooCommerce disponibles aquí.
Estos son algunos ejemplos más de cambios que puedes realizar en tus páginas de producto mediante hooks:
- Cambiar el texto del botón Añadir al carrito. Por ejemplo, podrías decir “Donar ahora” en su lugar.
- Personalizar las migas de pan de WooCommerce. Cambiar el separador de las migas de pan, eliminarlas por completo, etc.
- Eliminar, cambiar el nombre y reordenar las pestañas de producto. Añadir, por ejemplo, una pestaña de Ingredientes o incluir un vídeo en una de las pestañas.
Personaliza las páginas de producto de WooCommerce mediante CSS
CSS es un lenguaje de programación utilizado para controlar elementos de diseño (a diferencia de JavaScript, que controla las acciones). Puedes usarlo para modificar el diseño de tus páginas de producto. Una vez que hayas aprendido los conceptos básicos de CSS, puedes personalizar desde los colores y las fuentes hasta el tamaño de cada elemento.
Puedes añadir fácilmente código CSS accediendo a Apariencia → Personalizar → CSS adicional en tu panel de administración de WordPress. Por ejemplo, si quisieras cambiar el color de la fuente de los títulos de tus productos, usarías el siguiente código, sustituyendo el código hexadecimal del color por el tuyo:
.woocommerce div.product .product_title {
color: #222222;
}Si quisieras cambiar el color del botón Comprar ahora, usarías este código, reemplazando nuevamente el código hexadecimal por el color que elijas:
.woocommerce div.product .button {
background: #000000;
}Puedes ver más ejemplos en este artículo de WooCommerce.
Cómo aumentar la velocidad de carga de las páginas de producto
Los sitios que cargan rápido son importantes tanto para los visitantes como para los motores de búsqueda. Las personas no quieren esperar y los motores de búsqueda no quieren enviar a la gente a sitios con un rendimiento deficiente.
Literalmente, cada segundo cuenta: un retraso de un segundo en los tiempos de carga puede reducir las tasas de conversión un 20 %.
Jetpack Boost es la mejor solución de optimización del rendimiento y la velocidad de sitios web para WordPress. Tiene un proceso de configuración rápido y sencillo —no necesitas un desarrollador— y presume de resultados que superan a los cinco principales plugins de rendimiento en una prueba comparativa.
Después de instalar el plugin gratuito, puedes realizar una auditoría y obtener un informe sobre las puntuaciones de rendimiento actuales de tu sitio. Estas servirán como referencia para medir las mejoras de tus Core Web Vitals, las métricas que Google utiliza para evaluar la experiencia de usuario y el rendimiento técnico de tu sitio.
Un panel sencillo permite configurar las opciones de optimización mediante activaciones con un solo clic. Esto te ofrece la flexibilidad de probar los módulos de rendimiento individualmente y configurar Jetpack Boost para que se adapte perfectamente a cualquier situación.
Para conocer más formas de acelerar tus páginas de producto, consulta Nueve formas de acelerar una tienda de WooCommerce.
Preguntas frecuentes sobre la personalización de páginas de producto
¿Todavía tienes preguntas? Consulta a continuación las respuestas a algunas preguntas frecuentes.
¿Cuál es la mejor manera de personalizar una página de producto de WooCommerce?
No existe una única manera ideal. La mejor opción para ti depende de tu nivel de comodidad con los distintos métodos.
El Editor del sitio pone todo el control en tus manos y te permite arrastrar y soltar elementos para crear tu propia página de producto personalizada sin tener que editar código alguno. ¡Es una solución excelente tanto para principiantes como para usuarios avanzados!
Si buscas una funcionalidad adicional específica, las extensiones de WooCommerce son una excelente opción. Han sido revisadas y aprobadas por WooCommerce y ofrecen a los comerciantes opciones avanzadas de personalización sin código personalizado.
La personalización manual y la programación ofrecen la mayor flexibilidad, pero también requieren más conocimientos técnicos. En comparación con el uso de bloques o extensiones, este método tiene más probabilidades de causar problemas o incluso hacer que el sitio deje de funcionar.
¿Debería hacer una copia de seguridad de mi sitio antes de editar la plantilla de la página de producto?
Sí. A diferencia de las páginas y las entradas, las plantillas del sitio, como las páginas de producto y la página del carrito de WooCommerce no tienen un historial de revisiones. Haz una copia de seguridad de tu sitio antes de realizar actualizaciones en la plantilla de la página de producto, para que puedas restaurarla rápidamente si surge algún problema.
Jetpack VaultPress Backup es un plugin de copias de seguridad de WordPress en tiempo real, lo que significa que tu sitio no solo se guarda a diario o cuando haces una copia manual. En su lugar, se guarda automáticamente cada vez que haces un cambio en tu sitio, un cliente realiza un pedido o un visitante deja un comentario. ¿Pasa algo importante? ¡Se guarda!
Las tiendas de comercio electrónico no pueden permitirse perder datos, especialmente cuando esos datos representan pedidos reales de clientes. No te conformes con soluciones que solo guardan tu sitio ocasionalmente o que requieren una larga interacción con el servicio de atención al cliente para restaurarlo cuando surge un problema.
Con Jetpack VaultPress Backup, puedes restaurar tu sitio con un solo clic y volver a estar en línea rápidamente. Con la aplicación móvil de Jetpack, puedes restaurarlo en cualquier momento y lugar, incluso si el sitio está completamente caído.
¿La mejor parte para los propietarios de tiendas? Todos tus datos de clientes y pedidos están protegidos y se mantienen actualizados.
¿Cuáles son algunas prácticas recomendadas para personalizar una página de producto de WooCommerce?
Independientemente del método que utilices para editar y personalizar tu página de producto de WooCommerce, sigue estas prácticas recomendadas para protegerte a ti, a tu sitio y a tus clientes.
Haz primero una copia de seguridad de tu sitio, cada vez. Cuando añades o actualizas el código del sitio, un solo error puede causar problemas. Tienes que estar preparado para restaurarlo lo antes posible, sin perder ni un solo pedido. Jetpack VaultPress Backup es la mejor solución de copias de seguridad automática y en tiempo real para WordPress.
Se hace por ti, así que ni siquiera tienes que preocuparte por guardar tu sitio antes de experimentar con cambios.
Haz los cambios de código fuera de los archivos de tu tema principal. Cuando editas un archivo del tema o del plugin, esos cambios se sobrescribirán y desharán la próxima vez que se actualice el tema o el plugin.
Hay varias formas de añadir código a tu sitio sin editar directamente los archivos del tema o del plugin. Puedes usar el plugin Code Snippets para añadir, editar o eliminar elementos de una página y aplicar estilos a tu sitio mediante el campo CSS adicional del Personalizador de temas. También puedes crear un tema hijo. Lo importante es hacer los cambios donde no se vean afectados por las actualizaciones del tema o del plugin.
Vigila la velocidad. Sin importar cómo personalices tus páginas de producto, debes asegurarte de que la velocidad de tu sitio no se vea afectada. Con Jetpack Boost, puedes mejorar al instante áreas clave que optimizan tanto la experiencia de usuario como la percepción de Google sobre la calidad de tu sitio. Un sitio más rápido significa que será más probable que los clientes permanezcan en él y que Google te recomiende en los resultados de búsqueda. Un pequeño impulso puede marcar una gran diferencia.
Jetpack 