¡Las páginas de productos estándar de WooCommerce son bastante funcionales y atractivas también! ¡Pero podemos hacerlo mejor, especialmente combinando WooCommerce y Elementor!
En esta guía, le mostramos cómo crear páginas de productos de WooCommerce personalizadas (y hermosas) para «SORPRENDER» a sus clientes y generar más ventas.
Que necesitas
Además de lo que ya tiene, una instalación de WordPress en funcionamiento y WooCommerce agregado además de eso, necesita el complemento del generador de páginas de Elementor .
Elementor viene en dos sabores: gratis y de pago . Si bien hay algunas personalizaciones disponibles en Elementor gratis que se pueden usar para WooCommerce, para llegar a las cosas realmente buenas y acceder a las plantillas preconstruidas de Elementor Pro , debe actualizar a la versión pro. Esto le costará $ 49 por un sitio.
Nota; Elementor no es el único creador de páginas que funciona con WooCommerce y te permite crear páginas de productos WooCommerce personalizadas . Aquí hay algunas alternativas si desea explorar qué más hay por ahí. Dicho esto, Elementor es nuestra solución favorita para las personalizaciones de WooCommerce.
Antes de que pueda comenzar a trabajar, debe instalar los complementos Elementor gratuito y Elementor pro en su sitio:
- Instalar Elementor gratis es simple. Simplemente vaya a Complementos → Agregar nuevo e ingrese Elementor en el cuadro de búsqueda. Instalar y activar.
- Para instalar Elementor pro, primero debe completar su compra en Elementor.com. Podrá descargar el paquete Elementor pro desde su perfil de usuario: es un archivo ZIP. Vaya a Complementos → Agregar nuevo y haga clic en el botón Cargar complemento . Seleccione Elementor ZIP desde su escritorio y cárguelo en su sitio. Activa el complemento.
Elementor le pedirá que valide su licencia antes de que todo esté operativo.
Crear una nueva página de producto de WooCommerce con Elementor
Para comenzar, vaya a Plantillas y haga clic en Agregar nuevo .
En la lista, seleccione Producto único .
Elementor mostrará algunas plantillas de páginas de productos de WooCommerce listas para usar con las que puede comenzar. Elegir uno que se parezca más a lo que desea es el mejor camino a seguir para la mayoría de los usuarios. Crear una plantilla de producto desde cero generalmente llevará mucho más tiempo. Simplemente es más fácil modificar una plantilla existente. Haga clic en Insertar para obtener la plantilla.
Verá su plantilla agregada al lienzo de Elementor. Ahora puede personalizar la plantilla como mejor le parezca: agregue nuevos elementos a la página, personalice los actuales, elimine las cosas que no necesita, etc.
En la barra lateral izquierda, notará una variedad de elementos de WooCommerce, como el título del producto , las imágenes del producto , el precio del producto y todos los demás datos que muestra WooCommerce sobre sus productos.
Puede tomar cada uno de estos elementos y arrastrarlos al lienzo en el lugar exacto donde los necesita.
Aquí hay algunas personalizaciones que puede hacer primero:
Agrega tu marca y colores
Las plantillas de productos de Elementor en stock se ven bien, pero probablemente no coincidan perfectamente con su marca. Un cambio rápido que podemos hacer para solucionarlo es ajustar los colores de fondo, los colores de fuente y varias configuraciones de tipografía en general.
Para ajustar cualquier bloque que esté en la página, haz clic en el icono del lápiz en la esquina superior derecha del bloque.
Luego, en la barra lateral izquierda, cambie a la pestaña Estilo . Aquí es donde puede realizar todas las personalizaciones relacionadas con el estilo y la apariencia. Por ejemplo, para el bloque Título del producto , puede cambiar el color del texto, la tipografía y las sombras.
Hagamos clic en Tipografía . Esto mostrará otro cuadro donde puede cambiar la fuente y todos los parámetros de la misma.
Proceda a través de todos los textos uno por uno y edítelos hasta que se vean como usted quiere. Preste especial atención a cómo se ve el bloque de precios: debe ser claramente visible para que no confunda al cliente.
Realinear/mover la descripción del producto
WooCommerce muestra las descripciones de sus productos en varios lugares. No necesitamos entrar en todos los detalles en este momento, pero concentrémonos en dos cosas:
- la breve descripción
- sus fichas de datos de productos
La breve descripción es justo lo que suena. WooCommerce toma este texto del cuadro Descripción breve (uno de los campos que completa al crear un nuevo producto). Es una buena idea que la breve descripción se muestre cerca de la parte superior de la página del producto.
Puede tomar el bloque de descripción breve de Elementor y arrastrarlo y soltarlo donde lo necesite.
Las pestañas de datos del producto son efectivamente el bloque que alberga la información principal sobre el producto. Asegúrate de que esté en un lugar visible en tu nueva plantilla de página de producto de WooCommerce.
No olvides diseñar los colores y la tipografía de esos bloques también.
Modifique su botón «agregar al carrito»
El botón «agregar al carrito» es el botón más importante en cualquier sitio de comercio electrónico. Realmente quiere que se destaque y llame la atención de su cliente.
Puede usar dos tipos de bloques diferentes para el botón «agregar al carrito» en Elementor. Está el bloque Agregar al carrito y el bloque Agregar al carrito personalizado .
Experimente con ambos para ver cuál es mejor en su caso. Haga clic en el ícono del lápiz y vea lo que está disponible en la barra lateral cuando se trata de la configuración del bloque dado.
Con un par de clics, puede hacer que su botón se vea mucho mejor.
Agregar/eliminar calificaciones de productos
Mostrar calificaciones de productos puede ser una excelente manera de dar a sus clientes ese empujón final para comprar sus productos. El único problema es que necesitas tener algunas calificaciones en primer lugar.
Cuando su tienda es nueva y aún no tiene ninguna calificación, es mejor no tener el bloque de calificaciones en la página. Haga clic con el botón derecho en el elemento Calificación del producto y elimínelo.
Más tarde, puede volver a agregar ese bloque e incluso personalizar su apariencia. Algunas de las cosas que puede cambiar son los colores de las estrellas y el espaciado de las cosas.
Modificar las vistas de dispositivos móviles y tabletas
En estos días, más personas acceden a la web desde sus teléfonos inteligentes que desde computadoras de escritorio y portátiles . Por esa razón, su tienda debe estar optimizada para la visualización móvil, ¡o perderá ventas!
WooCommerce ya está optimizado para dispositivos móviles desde el principio, pero dado que estamos creando una página de producto personalizada, debemos asegurarnos de que su nueva plantilla de producto también se vea bien.
En la esquina inferior izquierda de la interfaz de Elementor hay un botón llamado Modo receptivo .
Cuando haga clic en él, podrá cambiar entre las vistas de escritorio , tableta y móvil . Elija uno de ellos y modifique el diseño si es necesario.
Lo bueno aquí es que puede cambiar la configuración de visualización de sus bloques de manera que surtan efecto solo en dispositivos móviles o tabletas. Por ejemplo, si cree que el precio debería ser mayor en el dispositivo móvil, haga clic en el ícono del lápiz en el bloque de precios, luego haga clic para editar la tipografía y, por último, cambie a Dispositivo móvil junto al tamaño de fuente:
Si cambia el tamaño de fuente ahora, solo se verá afectada la vista móvil.
Revise su plantilla elemento por elemento hasta que tenga todo configurado para los visores de dispositivos móviles y tabletas.
Publicar páginas de productos WooCommerce personalizadas
Cuando su nueva plantilla de producto esté lista, haga clic en el botón Publicar en la esquina inferior izquierda de la interfaz de Elementor.
Elementor le pedirá que agregue una condición para cuándo se debe usar la plantilla.
Para que la plantilla se utilice para todos los productos, simplemente seleccione «Productos» de la lista, así:
Haga clic en GUARDAR Y CERRAR para finalizar todo.
¡Eso es!
Puede ver la página de su producto en acción cuando visita cualquiera de los productos en su tienda.
