Cómo personalizar la página de producto de WooCommerce para conseguir más ventas

Las páginas de producto por defecto de WooCommerce son bonitas y funcionales pero nada especial a la vista. Como una de las páginas más importantes en cualquier tienda WooCommerce, la página de producto tiene un papel increíblemente importante que desempeñar. Sin embargo, la página por defecto realmente no cumple.

Por eso es tan importante personalizar las páginas de productos.

La personalización de la página de producto crea una experiencia de compra única para sus clientes y contribuye en gran medida a que su tienda destaque entre las miles que compiten por el mismo público.

Esto es esencial si quiere que su tienda online para sobrevivir y prosperar!

Este post te mostrará cómo personalizar la página de producto usando el plugin Elementor WooCommerce Builder. Personalizar la página visualmente es primordial para mantener el mismo estilo en toda tu tienda WooCommerce.

Elementor es fácil de usar. Todo lo que necesita hacer es arrastrar y soltar visualmente diferentes elementos de la página del producto, personalizando el diseño según sus especificaciones.

Elementor Pro le ofrece un control total para personalizar el Astra ya que este tema se ha diseñado para integrarse perfectamente con Elementor.

¿Qué necesitas para personalizar la página de producto de WooCommerce?

¿Qué necesitas para personalizar una página de producto de WooCommerce?

Para este tutorial, debe tener un instalación de WordPress en funcionamiento y WooCommerce añadido encima.

También necesita el Tema Astra y el complemento Astra Pro. Astra Pro es un complemento del tema superligero Astra. Te da un control total sobre el sitio web. Puedes personalizar los diseños, el color, la tipografía y mucho más.

Instalar y activar WooCommerce y el Astra Pro addon.

En este post, verás cómo puedes personalizar un único diseño de página de producto de WooCommerce con Astra Pro. 

Personalizaremos cada elemento utilizando herramientas de arrastrar y soltar y sin tener que codificar.

Cómo personalizar la página de producto de WooCommerce

Estos son los pasos que debes seguir para personalizar la página de producto único en WooCommerce.

Paso 1: Activar los módulos Astra Pro

Una vez que instale el complemento Astra Pro y lo active mediante una clave de licencia, podrá desbloquear todos sus módulos.

Aunque puedes decidir si quieres activarlos todos o no, el importante es el módulo WooCommerce.

• Ir a Apariencia > Opciones Astra
• Haga clic en el botón Activar todo para activar todos los módulos
• Si sólo desea activar el módulo WooCommerce, haga clic en el enlace a su derecha.
• Para empezar a personalizar, vaya a Apariencia> Personalizar > WooCommerce

Aquí encontrarás todos los ajustes relacionados con tu tienda de comercio electrónico.

• Dado que estamos personalizando una página de producto, seleccione la opción Producto único opción.

Paso 2: Personalizar la dimensión de la imagen

Empecemos a personalizar las imágenes. En una tienda de comercio electrónico, las imágenes juegan un papel vital en la conversión. 

Por lo tanto, es esencial organizar las imágenes de modo que su producto sea claramente visible y todos los casos de uso estén claramente representados.

Tan pronto como entre en el personalizador de Producto Único, verá la configuración para editar el Diseño de la Galería y el Ancho de la Imagen.

Si una galería vertical se ve mejor que una horizontal, puede mantener la configuración como tal. La sección de ancho de la imagen es bastante sencilla. Básicamente controlas la porción de pantalla que cubre la imagen.

Puedes jugar con los ajustes para encontrar el punto óptimo y ver los cambios en el front-end en la Vista previa en vivo.

Paso 3: Personalizar la estructura del producto

En esta sección, puede controlar el contenido del producto que muestra. Puedes organizar dónde quieres añadir el título, las valoraciones, el precio, una breve descripción, añadir al carrito y los metadatos del producto.

Puede hacer clic en el botón icono "ojo para activar o desactivar un elemento concreto.

También puede activar o desactivar las migas de pan (la ruta del producto por encima del título) y activar la funcionalidad Ajax Add to Cart.

Habilitar esta página restringirá la recarga de la página cuando un cliente añada un producto al carrito.

El efecto Zoom de imagen amplía la imagen cuando pasas el ratón por encima,

En este caso, hagamos los siguientes cambios:

• Desactivar los metadatos que muestran la categoría del producto
• Desactiva las migas de pan. Así queda más limpio.
• Activar Ajax Add to Cart
• Activar el efecto de zoom de la imagen

Puedes elegir jugar y crear tus ajustes como necesites.

Paso 4: Personalizar la navegación de la página y las pestañas de productos

Si tiene varios productos, puede colocar flechas de navegación en la esquina superior derecha para que los clientes puedan navegar entre los productos.

La pestaña Producto contiene la descripción completa, reseñas del producto y, a veces, información adicional sobre el producto.

Puede ajustar la posición de las pestañas a vertical u horizontal, según le parezca mejor.

Paso 5: Ventas adicionales y cruzadas

También puede añadir upsells y cross-sells a su producto. Podría llamarlo Productos relacionados.

Sólo tiene que utilizar el botón de alternancia situado junto a Mostrar productos relacionados y Display Up Sells opciones.

Aquí también puede personalizar el número de columnas que desea mostrar.

Paso 6: Personalizar el color y la tipografía

Por último, puede decidir personalizar el color y la tipografía de la página. Aunque puede establecer colores y tipografía globales, también puede cambiarlos en tipos de página individuales.

Sólo tienes que hacer clic en el icono situado junto al color del elemento o la tipografía que desees y empezar a diseñar.

Cuando esté satisfecho con el resultado, pulse el botón Publique para activar los cambios.

Cómo crear una nueva página de producto WooCommerce con Elementor

Le recomendamos que añada algunos productos relacionados a su sitio web para que pueda seguirlos.

También cabe mencionar que si no tiene WooCommerce instalado y activado, no tendrá acceso a las plantillas de productos de Elementor.

Estos son los pasos que debes seguir para personalizar la página de producto único en WooCommerce:

1. Elija una plantilla de página de producto prediseñada

En Plantillas > Creador de temas > Producto único > Añadir nuevoen el menú desplegable, seleccione Producto único, asígnele un nombre y haga clic en Crear plantilla.

Le recomendamos encarecidamente que seleccione una de las plantillas de página de producto prediseñadas y la personalice para adaptarla a su marca. Elementor Pro tiene varios estilos diferentes entre los que puedes elegir.

También puedes crear una plantilla nueva si tienes los conocimientos técnicos necesarios. Crear tu plantilla desde cero te llevará mucho tiempo, pero puede merecer la pena si tienes los conocimientos necesarios.

Elija una Bloque de un solo producto y Insertecomo se muestra a continuación:

Esto recuperará la plantilla para que puedas añadir los nuevos elementos que necesites en la página.

La plantilla que seleccione se añadirá al lienzo Elementor. Esto le permitirá personalizar la plantilla utilizando los widgets de la izquierda.

También puedes personalizar los widgets actuales o eliminar los elementos que no necesites. Elementor te da un control total sobre cómo puedes personalizar el diseño y el estilo.

En la barra lateral izquierda hay una serie de elementos como Imágenes del producto, Título del producto, Precio del producto, y cada dato que WooCommerce muestra en la página de producto único.

Antes de que pueda añadir widgets para personalizar esta página, asegúrese de que está trabajando en una página de producto de ancho completo.

Elementor le permite arrastrar los elementos y colocarlos en el lugar exacto donde los necesite.

2. Añadir colores que combinen con su marca

La página de producto único que ha seleccionado tiene buen aspecto, pero probablemente no encaja perfectamente con su marca.

Una solución rápida es ajustar el color de fondo, el color de la fuente y varios tipografía ajustes.

Para ajustar cualquier elemento de la página, haga clic en el icono del lápiz situado en la esquina superior derecha del bloque:

Para realizar cualquier personalización de estilo o visual, cambie a la opción Ficha de estilo, como se muestra a continuación:

En el ejemplo anterior, puede cambiar el color del texto, la tipografía y las sombras de la etiqueta Título del producto bloque.

Haga clic en Tipografía. Se abrirá otro cuadro con ajustes de tipografía en el que podrá cambiar la fuente y otros parámetros, como se muestra a continuación:

Continúe por todas las secciones y edítelas hasta que consiga el resultado deseado.

En lo que respecta al bloque de precios, preste especial atención a cómo se muestra. Este bloque tiene que ser claro para que los clientes puedan verlo fácilmente sin ninguna confusión.

3. Añadir widgets de productos que compondrán su página

Si quiere que sus clientes tengan una experiencia de compra única en la página de producto único, asegúrese de que contiene algunos widgets de producto.

Elementor le permite tener un control total del aspecto de todos los elementos que componen la página de producto.

Tendrás muchos widgets nuevos a tu disposición, como Título del producto, Galería, Imágenes, Precio, Valoración, Descripción breve, Migas de pan, Fichas de datos, Existencias, Relacionados, Venta adicional, Añadir al carrito, Meta, Contenido e Información adicional.

Otro widget es el Menu Cart.

Estos son los widgets de producto que puede añadir a esta página:

Menú de la cesta

En widget menú carrito abre el carrito en una nueva ventana. Puedes utilizarlo para mostrar el carrito en cualquier página:

WooCommerce Migas de pan

El widget de migas de pan de WooCommerce controla el diseño y el color de las migas de pan de WooCommerce en la página:

Título del producto

El widget del título del producto controla el estilo y el diseño del título del producto:

Precio del producto

El widget de precio del producto le permite establecer la posición y el estilo del precio del producto:

Clasificación del producto

El widget de valoración de productos le permite mostrar la valoración del producto. Mostrar valoraciones de productos en su página de producto único anima a los clientes potenciales a comprar sus productos. Esto significa que primero necesitas tener algunas valoraciones.

Descripción breve

El widget de descripción breve controla el diseño y el estilo de la descripción breve. Puede añadir una descripción breve en uno de los campos que rellena al crear un nuevo producto.

Recomendamos mostrar este widget cerca de la parte superior de la página de un solo producto:

Stock de productos

El widget de stock de producto muestra el stock restante del producto. Puede añadir los detalles de stock en la sección de datos del producto al crear el producto:

Añadir a la cesta

El widget Añadir a la cesta controla el diseño y el estilo del botón Añadir a la cesta. Esta es una de las llamadas a la acción más importantes en cualquier página de producto. Permite a los usuarios añadir productos a la cesta y más tarde proceder a la página de pago:

Metadatos

El meta widget establece la distancia entre el texto. Se puede mostrar apilado o en línea.

También puede controlar el estilo de sus metadatos:

Imagen del producto

El widget de imagen de producto se utiliza para establecer la imagen o galería que desea mostrar:

Fichas de producto (Información adicional, Reseñas)

El widget de fichas de producto contiene la información principal del producto.

Le recomendamos encarecidamente que se asegure de que las fichas de producto están en un lugar visible para que los usuarios puedan informarse sobre el producto:

Upsell

El widget de upsell le permite establecer su estilo a los productos de upsell. Puedes llamarlo 'Productos que te pueden gustar' o algo similar.

Puede utilizar esta sección para añadir productos que suelen comprarse juntos:

Productos relacionados

El widget de productos relacionados le permite establecer su estilo a los productos relacionados.

Este widget utiliza la función de productos relacionados de WooCommerce para enlazar productos con la misma categoría y etiqueta.

4. Ajustar las vistas de móvil y tableta

Muchas personas acceden a la web desde sus smartphones que desde portátiles y ordenadores de sobremesa. Esto significa que su tienda debe estar optimizada para la visualización móvil, o de lo contrario sus ventas podrían verse afectadas negativamente.

WooCommerce está optimizado para móviles. Dado que estamos creando una plantilla de producto personalizada, debemos asegurarnos de que la nueva plantilla de página de producto tenga el mejor aspecto posible.

Para ver cómo se ve la página en los dispositivos móviles, puede hacer clic en el botón denominado Modo sensible en la esquina inferior izquierda de la interfaz Elementor

Al hacer clic en este botón, podrá cambiar entre los botones Escritorio, Tabletay Vistas móviles. Puede ajustar el diseño de cada vista como desee.

También puedes cambiar la configuración de visualización de tus bloques para que se muestren bien en vistas de móvil o tableta.

Por ejemplo, si desea aumentar el tamaño de la fuente del bloque de precio en la vista móvil, haga clic en el icono del lápiz en el elemento de precio. Haga clic para editar la tipografía y cambie a Móvil. Establezca el tamaño de fuente deseado.

Si cambia el tamaño de la fuente aquí, sólo se verá afectada la vista móvil.

Recomendamos pasar por todos los elementos hasta que toda la página esté configurada para móviles y tabletas.

5. Vista previa de la página de nuevos productos

Para asegurarse de que la plantilla tiene el estilo deseado, le recomendamos que la previsualice con otros productos.

Para previsualizar la página del nuevo producto, haga clic en el icono del ojo situado en el panel inferior izquierdo y, a continuación, en Configuración.

Elija el producto que desea mostrar en la configuración de vista previa.

Solicite y revise para ver cómo se mostrará el producto.

6. Publicar la página de producto WooCommerce personalizada

Si está satisfecho con la visualización de todos los elementos, haga clic en el botón Publique en la esquina inferior izquierda de la interfaz Elementor.

A continuación, aparecerá una nueva ventana en la que se le pedirá que añada una condición para utilizar esta plantilla.

7. Establezca las condiciones

Por defecto, la plantilla que hemos creado afectará a todas las páginas de producto de tu tienda WooCommerce. Al establecer las condiciones, puedes seleccionar una categoría de producto específica.

Haga clic en Guardar y cerrary se establecerán todas las condiciones que añadas.

Esta acción guardará y reemplazará la página de producto por defecto. Puede visitar cualquier página de producto para ver cómo se muestra en el front-end.

Relacionado: Cómo crear un sitio web WooCommerce de un solo producto

Características a añadir en la página de producto de WooCommerce para optimizar tu tasa de conversión

En esta sección, hablaremos de las características que puedes añadir a tu página de producto único de WooCommerce para aumentar las tasas de conversión

1. Filtrado inteligente de páginas de productos

Incluir una función de filtrado de productos en tu tienda WooCommerce te ayuda a optimizar la experiencia de la página. También facilita que los clientes consigan el producto que desean.

Los productos de WooCommerce, por defecto, se ordenan en orden cronológico inverso. Esto significa que el primer producto que añadas se añadirá en la parte inferior. Los productos añadidos recientemente se mostrarán en la parte superior.

Cuando un cliente visita una tienda online, suele filtrar los productos en función de:

• Precios de los productos
• El producto más vendido
• Producto añadido recientemente
• Valoración y reseñas de productos

Si desea optimizar su tienda, puede utilizar un filtro de productos o plugins de cortocircuito. Estos plugins te permiten añadir diferentes opciones de cortocircuito en función de lo que necesites.

Sus clientes pueden clasificar los productos utilizando:

• Precios (orden ascendente)
• Precios (orden descendente)
• Clasificación
• Popularidad

Puede añadir más en función de sus necesidades.

2. Jerarquía de la información

La organización jerárquica de la información sobre los productos facilita a los clientes el conocimiento de los mismos y de los servicios ofrecidos.

Añadir los detalles del producto ayuda a los clientes a saber más sobre él. También les anima a actuar en su página de producto.

Por ejemplo, si su tienda opera en distintos países, debe tener una política de ventas que todos los clientes deban cumplir en función de la normativa de su país.

Añadir esta información en la página de producto único ayudará a generar confianza en el cliente.

3. Mejore las imágenes de sus productos

Puede que su producto sea bueno, pero es probable que sus ventas se desplomen si las imágenes del producto no muestran lo mejor de él. Es importante contar con imágenes de producto claras, que sean capaces de vender su producto.

Cualquiera que visite su tienda quiere ver imágenes centradas en el producto, de alta calidad y con un fondo claro. También puedes añadir imágenes contextuales que muestren los productos en su entorno.

Por ejemplo, en el caso de los electrodomésticos de cocina, puedes fotografiarlos en la cocina.

Para ello se necesitará un fotógrafo profesional que haga fotos del producto desde distintos ángulos. Cuanto más pueda ver el cliente el producto en esas imágenes, más seguro se sentirá de hacer la compra.

Puede utilizar un plugin de intercambio para mostrar imágenes secundarias del producto cuando un usuario pasa el ratón por encima del producto.

Recomendamos utilizar imágenes de alta resolución para mostrar los detalles de los productos. Las imágenes de alta resolución ralentizan su sitio, pero puede optimizarlas utilizando plugins de optimización de imágenes.

4. Mejorar la descripción del producto

Su página de producto debe tener una descripción larga y corta del producto.

La breve descripción proporciona a los clientes información útil y relevante.

La descripción larga continúa aportando datos relevantes sobre la producción del producto.

Aquí puede ampliar la breve descripción y contar una historia atractiva sobre su producto que vaya más allá de las características básicas. Esto puede ayudar a que los clientes se sientan más cómodos a la hora de comprar.

5. Colocación de precios

Los clientes siempre quieren saber el precio antes de hacer una compra. Debe probar la colocación de los precios. Si quiere que los clientes entiendan rápidamente el precio, personalice la página del producto para que muestre el precio en una fuente grande.

El precio debe ser uno de los elementos más importantes de la página del producto.

Asegúrese de que el texto esté en negrita. Puede utilizar un color que contraste para que el precio destaque.

Resalte los descuentos y muestre el precio original junto al nuevo precio.

Si el precio no queda claro en cuanto el cliente entra en la página del producto, debe replantearse el diseño.

Puedes empezar aplicando los consejos anteriores y luego volver a probarlo.

Conclusión

Llegados a este punto, deberías poder personalizar la página de producto de WooCommerce cómodamente.

Ya has visto cómo el WooCommerce Builder de Elementor te da la flexibilidad de diseño para personalizar tu página de producto visualmente y lo fácil que es personalizar las páginas para hacerlas únicas.

Elementor tiene toneladas de plantillas que puede elegir, lo que le ahorra mucho tiempo pero también le da libertad para experimentar.

Siga este tutorial y podrá crear una impresionante página de producto en un abrir y cerrar de ojos.