Cómo editar y personalizar sus páginas de productos de WooCommerce

La página del producto es crucial para el proceso de venta. Es donde el comprador decide proceder y comprar el artículo o irse sin garantía de devolución. Su objetivo como propietario de una tienda en línea es lograr que los visitantes del sitio visiten las páginas de sus productos y luego hacer que tomen los pasos finales de Agregar al carrito y Pagar.

Con ese fin, es esencial que las páginas de sus productos hagan el mejor trabajo posible al promocionar el artículo que se vende. La plantilla de producto predeterminada de WooCommerce es limpia y profesional, lo que le brinda una base sólida para su página que puede desarrollar utilizando los métodos a continuación.

Cómo optimizar su plantilla de página de producto de WooCommerce

Hay varias formas de personalizar las páginas o plantillas de productos de WooCommerce. Algunos métodos están incluidos en WooCommerce. Para otros, necesitará una extensión. También puede utilizar el Editor del sitio o realizar personalizaciones manualmente. Echemos un vistazo más de cerca a cada opción.

Cómo personalizar la página de su producto WooCommerce usando funciones integradas

Muchas optimizaciones de páginas de productos se pueden realizar sin complementos ni codificación. Las fotos de alta calidad, las descripciones informativas y la información clave del producto facilitan que el visitante se sienta cómodo comprando el producto.

Habilite las reseñas y calificaciones para generar confianza. Configure productos relacionados, ventas cruzadas y ventas adicionales para aumentar el tamaño promedio de los pedidos y facilitar que los clientes descubran nuevos artículos. Incluya testimonios de clientes en las descripciones de sus productos o pestañas para pruebas sociales.

Una vez que haya optimizado el contenido de su página, puede mejorar aún más las páginas de sus productos utilizando las extensiones de WooCommerce, editando la plantilla de su página de productos con el Editor del sitio y personalizándolas manualmente con código y ganchos.

Cómo personalizar la página de tu producto usando las extensiones de WooCommerce

Una extensión es un complemento de WordPress creado específicamente para proporcionar funcionalidad adicional a las tiendas WooCommerce. A continuación se muestran algunas extensiones de WooCommerce que puede usar para proporcionar información adicional sobre productos, mejorar la experiencia de compra y ampliar su página más allá de sus funciones predeterminadas. Puede encontrar aún más extensiones para una mayor personalización en la biblioteca oficial de extensiones de WooCommerce.

1. Variación avanzada de productos para WooCommerce

Los productos variables son artículos con opciones como el tamaño y el color, elecciones que hace el comprador antes de pagar. En la interfaz, WooCommerce muestra un menú desplegable para cada atributo (como tamaño o color) con una lista de variaciones disponibles a continuación (como Pequeño, Mediano o Grande).

Para un enfoque más visual, Variación avanzada de productos para WooCommerce te permite exhibir variaciones de productos con muestras (colores, imágenes y texto), galerías y tablas. Incluso puede incluir videos en sus muestras.

Las muestras de variación se muestran en la página del producto o en la página principal de la tienda, según los ajustes que configure. Puede crear muestras aprovechando las imágenes de productos existentes y las imágenes destacadas.

También puede personalizar el diseño de la galería de productos, moviéndolo desde su posición predeterminada debajo de la imagen destacada hacia el lado izquierdo.

Obtenga más información sobre la Variación avanzada de productos para WooCommerce.

2. Administrador de pestañas de WooCommerce

Las pestañas de la página de productos de WooCommerce aparecen debajo del botón Agregar al carrito y le permiten mostrar información adicional mientras mantiene elementos clave como el título y el precio en la parte superior.

Esta información adicional puede incluir materiales e ingredientes del producto, pesos y dimensiones, tablas de tallas, tablas de precios, tiempos de entrega, tarifas de envío, videos instructivos, cualquier cosa. que ayudará al cliente a sentirse seguro al realizar su compra.

Con WooCommerce Tab Manager, puede cambiar el nombre, reordenar y eliminar las pestañas predeterminadas (Descripción larga, Información adicional y Reseñas) y personalizar esta sección creando sus propias pestañas globales, para toda la categoría y específicas del producto.

Use el complemento para establecer un orden de tabulación predeterminado que se puede anular en el nivel del producto. Con una interfaz de arrastrar y soltar, no es necesario que modifique los archivos de temas ni ingrese el código.

Si ya tiene pestañas personalizadas a través de otros complementos, WooCommerce Tab Manager las detecta y le da la opción de mostrarlas u ocultarlas. Un beneficio importante de este complemento es que el contenido de sus pestañas se incluye en los resultados de búsqueda de su sitio.

Obtenga más información sobre el Administrador de pestañas de WooCommerce.

3. Preguntas frecuentes sobre productos

Las preguntas frecuentes, o FAQ, son una forma fácil de usar para organizar y presentar la información del producto a sus visitantes. Con la extensión de Preguntas frecuentes sobre productos, puede agregar una pestaña de Preguntas frecuentes dedicada para cada producto con preguntas y respuestas ilimitadas.

El complemento funciona con todos los tipos de productos y agrega una sección de preguntas frecuentes cuando crea o edita una página de producto.

En la parte delantera, las preguntas frecuentes se muestran en estilo acordeón con animación.

Obtenga más información sobre las preguntas frecuentes sobre productos.

4. Productos compuestos

Con los productos compuestos, sus clientes pueden crear kits o productos configurables.

Para cada producto compuesto, permitirá que los clientes elijan entre selecciones predeterminadas del inventario existente. Puede asignar tarifas adicionales a selecciones específicas y permitir que ciertas categorías sean opcionales.

Por ejemplo, un collar puede contener opciones para la cadena (plata, oro), la piedra (rubí, granate, esmeralda) y un amuleto opcional (múltiples opciones de forma).

Para cada uno de los componentes básicos del kit (cadena, piedra y amuleto), puede seleccionar los SKU que el cliente puede elegir o dejar que elija cualquier opción de una categoría de producto completa.

La lógica condicional le permite mostrar u ocultar opciones en función de elecciones anteriores (p. ej., la camisa roja no está disponible en tallas específicas) y el seguimiento a nivel de componentes admite la gestión avanzada de inventario. Si tiene una gran cantidad de opciones, puede crear vistas con clasificación, filtrado y paginación para facilitar las compras.

Obtenga más información sobre los productos compuestos.

5. Complementos de productos

La extensión Complementos de productos permite a sus compradores personalizar y actualizar sus compras a través de extras gratuitos y de pago.

Los complementos pueden incluir garantías, materiales de mayor calidad, opciones de envío prioritarias o personalizaciones como monogramas y grabados personalizados. Si las personas a menudo compran sus productos como regalos, puede agregar una opción de envoltorio o un campo de mensaje de regalo.

Las organizaciones sin fines de lucro podrían permitir a los compradores incluir una donación con su compra y hacer la donación en honor a alguien agregando un nombre y un mensaje.

Si tiene reservas de WooCommerce, los complementos de productos le permiten crear opciones para servicios adicionales (enjuague del cabello después del corte de cabello) o actualizaciones VIP para asientos y accesos especiales. También funciona con las suscripciones de WooCommerce para que pueda ofrecer complementos a sus productos de suscripción.

Sus 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 entradas de precios personalizadas para elementos como propinas y donaciones. Estos campos pueden aplicarse a todo su catálogo o asignarse a productos específicos.

Una vez que haya configurado sus complementos, aparecerán en las páginas de productos encima del botón Agregar al carrito en el orden que elija.

Obtenga más información sobre los complementos de productos.

Personaliza la página de tu producto usando el Editor del sitio

Con los temas de bloque, puede personalizar la apariencia de la página de su producto editando la plantilla de la página de un solo producto en el Editor del sitio. En el administrador de WordPress, vaya a Apariencia → Editor .  

Elija "Examinar todas las plantillas" en el menú desplegable en la parte superior central de la página. Elija la plantilla Producto único de la lista que aparece.

El diseño de página predeterminado contiene el encabezado, el pie de página y el bloque de producto único de WooCommerce, que muestra la información del producto, el precio y los elementos de imagen.

Debe hacer una copia de seguridad de su sitio antes de realizar modificaciones en la plantilla de la página de su producto. Ciertos cambios, por ejemplo, eliminar accidentalmente el bloque de Producto único y guardar, harán que a sus visitantes les resulte imposible comprar o comprar.

Cómo editar las plantillas de encabezado y pie de página de un solo producto

La pestaña Plantilla en Configuración (el icono de engranaje en la esquina superior derecha) contiene enlaces para administrar el encabezado y el pie de página. Haga clic en cualquiera de las opciones para administrar esa parte de la plantilla de página. También puede hacer clic en un área de la plantilla directamente para comenzar a editar. Recuerde que cualquier cambio realizado aquí se aplicará a todos los productos que utilicen la plantilla.

En el encabezado, puede editar el Título del sitio y los enlaces en su menú de navegación principal, e incluso agregar nuevos bloques para personalizar específicamente la página de su producto. Use este espacio para agregar imágenes, texto y más para mejorar el poder de venta de la página de su producto. Puede agregar una nota promocional o de política o un banner para informar a los compradores sobre una venta actual o cómo obtener envío gratuito en pedidos superiores a una cierta cantidad.

Puede hacer algo similar con el pie de página de la página del producto. Por ejemplo, agregue el testimonio de un cliente o información sobre una política de garantía de satisfacción.

Cómo personalizar el cuerpo de un solo producto

El bloque Producto único muestra una advertencia en negrita en la parte superior, “¡No elimine este bloque! Eliminar este bloqueo causará efectos no deseados en su tienda”. ¡Toma este mensaje en serio!

Sin embargo, puede agregar nuevos bloques alrededor del bloque Producto único para personalizar completamente el diseño de la página de su producto.

Use el ícono + para agregar elementos encima o debajo del bloque de Producto único, luego incluya los bloques que desee para personalizar la página.

Use un bloque de párrafo para incluir ofertas actuales ("Gaste $ 100 o más para envío gratis"), una garantía de satisfacción o cualquier cosa que ayude a los visitantes a tomar la decisión de comprar. Agregue un bloque de video que brinde una mirada entre bastidores a sus procesos. O incluya productos recomendados específicos que le gustaría promocionar. ¡El cielo es el límite aquí!

Y para cada bloque, puede editar configuraciones como el color de fondo, la tipografía y el espaciado para que sea realmente suyo.

Personaliza la página de tu producto manualmente (usando código y ganchos)

Para opciones avanzadas, sin el costo o el mantenimiento de los complementos, puede editar y personalizar la página de su producto manualmente usando código y enlaces.

Antes de realizar cambios en sus archivos, es importante que se tome el tiempo para hacer una copia de seguridad de WooCommerce. Si está utilizando Jetpack VaultPress Backup, esto se hace automáticamente, en tiempo real. Entonces, si alguno de sus cambios hace que su sitio se caiga, puede restaurar una copia de seguridad con solo unos pocos clics, incluso si no tiene acceso a su panel de WordPress.

Y también querrá usar un tema secundario para realizar estos cambios. De lo contrario, cuando actualice su tema o WooCommerce en el futuro, podría perder todas sus personalizaciones. Otra opción es usar un complemento como Code Snippets, que le permite agregar código personalizado a su sitio en fragmentos que puede activar y desactivar según sea necesario.

Personalice las páginas de productos de WooCommerce usando ganchos

Los ganchos permiten a los propietarios de sitios agregar código y personalizar páginas sin los peligros asociados con la edición de archivos principales. Hay dos tipos de ganchos: acciones y filtros. Las acciones le permiten insertar código en puntos específicos, mientras que los filtros le permiten manipular y devolver una variable.

Por ejemplo, puede usar acciones para agregar un nuevo campo de pago y luego usar filtros para cambiar las etiquetas o marcadores de posición de los campos de pago existentes. Puede encontrar la lista de ganchos de WooCommerce disponibles aquí.

Aquí hay algunos ejemplos más de cambios que puede hacer en las páginas de sus productos usando ganchos:

• Cambia el texto del botón Agregar al carrito. Por ejemplo, podría decir "Donar ahora" en su lugar.
• Personaliza las migas de pan de WooCommerce. Cambiar el separador de pan rallado, quitar el pan rallado por completo, etc.
• Eliminar, renombrar y reordenar pestañas de productos. Agrega una pestaña de Ingredientes, por ejemplo, o incluye un video en una de las pestañas.

Personalice las páginas de productos de WooCommerce usando CSS

CSS es un lenguaje de codificación utilizado para controlar los elementos de diseño (a diferencia de JavaScript, que controla las acciones). Puede usarlo para modificar el diseño de las páginas de sus productos. Una vez que haya aprendido los conceptos básicos de CSS, puede personalizar todo, desde colores y fuentes hasta tamaños de elementos individuales.

Puede agregar fácilmente código CSS yendo a Apariencia → Personalizar → CSS adicional en su panel de WordPress. Por ejemplo, si quisiera cambiar el color de fuente de los títulos de sus productos, usaría el siguiente código, reemplazando el código hexadecimal del color con el suyo propio:

 .woocommerce div.product .product_title { color: #222222; }

Si quisiera cambiar el color del botón Comprar ahora, usaría este código, reemplazando nuevamente el código hexadecimal con el color de su elección:

 .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 la página de tu producto

Los sitios de carga rápida son importantes tanto para los visitantes como para los motores de búsqueda. La gente no quiere esperar y los motores de búsqueda no quieren enviar a la gente a sitios de bajo rendimiento.

Literalmente, cada segundo cuenta: ¡una demora de un segundo en los tiempos de carga puede reducir las tasas de conversión en un 20 %!

Jetpack Boost es la mejor solución de optimización de rendimiento y velocidad de sitios web para WordPress. Tiene un proceso de configuración rápido y fácil (no se necesita un desarrollador) y cuenta con resultados que superan a los cinco mejores complementos de rendimiento en una prueba directa.

Después de instalar el complemento gratuito, puede ejecutar una auditoría y obtener un informe sobre los puntajes de rendimiento actuales de su sitio. Estos servirán como puntos de referencia que puede usar para medir las mejoras en su Core Web Vitals, métricas que Google usa para medir la experiencia del usuario y el rendimiento técnico de su sitio.

Un tablero simple simplifica la configuración de las opciones de optimización a través de activaciones con un solo clic. Esto le brinda la flexibilidad de probar los módulos de rendimiento individualmente y configurar Jetpack Boost para que se adapte perfectamente a cualquier escenario.

Para obtener más formas de acelerar las páginas de sus productos, consulte Nueve formas de acelerar una tienda WooCommerce.

Preguntas frecuentes sobre la personalización de páginas de productos

¿Todavía tienes preguntas? Eche un vistazo a las respuestas a algunas de las más comunes a continuación.

¿Cuál es la mejor manera de personalizar una página de producto de WooCommerce?

No hay una sola mejor manera. La mejor manera para usted depende de su nivel de comodidad con los distintos enfoques.

El Editor del sitio pone todo el poder en sus manos, lo que le permite arrastrar y soltar elementos para crear su propia página de producto personalizada sin tener que editar ningún código. ¡Esta es una solución excelente tanto para principiantes como para usuarios avanzados!

Si está buscando una funcionalidad adicional específica, las extensiones de WooCommerce son una excelente opción. Están examinados y aprobados por WooCommerce, y brindan a los comerciantes opciones de personalización avanzadas sin código personalizado.

La personalización y la codificación manuales ofrecen la mayor flexibilidad, pero también requieren los conocimientos más técnicos. En comparación con el uso de bloques o extensiones, este método tiene la mayor posibilidad de causar un problema o incluso romper el sitio.

¿Debo hacer una copia de seguridad de mi sitio antes de editar la plantilla de la página del producto?

Sí. A diferencia de las páginas y publicaciones, las plantillas de sitio no tienen un historial de revisión. Realice una copia de seguridad de su sitio antes de realizar cualquier actualización en la plantilla de la página de su producto, para que pueda realizar una restauración rápida si hay algún problema.

Jetpack VaultPress Backup es un complemento de respaldo de WordPress en tiempo real, lo que significa que su sitio no solo se respalda en un horario diario o cuando realiza una copia manual. En cambio, se guarda automáticamente cada vez que realiza un cambio en su sitio, un cliente realiza un pedido o un visitante deja un comentario. ¿Cada vez que pasa algo importante? ¡Está guardado!

Las tiendas de comercio electrónico no pueden darse el lujo de perder datos, especialmente cuando esos datos representan pedidos de clientes del mundo real. No se conforme con soluciones que solo guarden su sitio ocasionalmente o que requieran una interacción prolongada con el servicio de atención al cliente para restaurar las cosas cuando haya un problema.

Con Jetpack VaultPress Backup, puede restaurar su sitio con un solo clic y volver a conectarse rápidamente. Con la aplicación móvil Jetpack, puede restaurar en cualquier momento y en cualquier lugar, incluso si el sitio está completamente inactivo.

¿La mejor parte para los dueños de las tiendas? Todos los datos y pedidos de sus clientes están protegidos y se mantienen actualizados.

¿Cuáles son algunas de las mejores prácticas para personalizar una página de producto de WooCommerce?

Independientemente del método que utilice para editar y personalizar la página de su producto WooCommerce, siga estas prácticas recomendadas para protegerse a sí mismo, a su sitio y a sus clientes.

Haga una copia de seguridad de su sitio primero, siempre . Cuando agrega o actualiza el código del sitio, un solo error puede causar problemas. Debe estar listo para restaurar el sitio lo antes posible, sin perder un solo pedido. Jetpack VaultPress Backup es la mejor solución de copia de seguridad automática en tiempo real para WordPress.

Está hecho para usted, por lo que ni siquiera tiene que preocuparse por guardar su sitio antes de experimentar con los cambios.

Realice sus cambios de código fuera de sus archivos de temas principales . Cuando edita un archivo de tema o complemento, esos cambios se sobrescribirán y se desharán la próxima vez que se actualice el tema o complemento.

Hay varias formas de agregar código a su sitio sin editar el tema o los archivos del complemento directamente. Puede usar el complemento Code Snippets para agregar, editar o eliminar elementos en una página y diseñar su sitio a través del campo CSS adicional en el personalizador de temas. También puede crear un tema hijo. Lo importante es realizar los cambios donde no se verán afectados por las actualizaciones de temas o complementos.

Ojo con la velocidad. No importa cómo personalice las páginas de sus productos, quiere asegurarse de que la velocidad de su sitio no se vea afectada. Con Jetpack Boost, puede mejorar instantáneamente áreas clave que mejoran tanto la experiencia del usuario como la percepción de Google sobre la calidad de su sitio. Un sitio más rápido significa que es más probable que los clientes se queden y que Google lo recomiende en los resultados de búsqueda. Un impulso rápido puede recorrer un largo camino.