Spanish (Español) translation by Gustavo Ramirez (you can also view the original English article)
Las plantillas integradas de Elementor Pro son una excelente manera de diseñar una página individual, pero ¿por qué personalizar tu tienda online producto por producto, cuando puedes utilizar los kits de plantillas para Elementor para diseñar todo tu sitio de comercio electrónico?
Innumerables empresas utilizan WordPress para vender sus productos y servicios, gracias al popular plugin WordPress WooCommerce. En el artículo anterior, construimos por completo una tienda virtual, usando Elementor WooCommerce y WordPress.
En este tutorial de continuación, te mostraré cómo rediseñar tu tienda online, utilizando los kits de plantillas para Elementor. También, crearemos una cabecera que incluye toda la información de contacto de tu tienda en línea. Alternativamente, si tienes una visión muy específica en mente, te mostraré cómo crear desde cero tu propia plantilla para Elementor, dándote un control creativo total sobre tu tienda virtual.
Lo que Vamos a Construir
Elementor es una herramienta flexible que te ofrece varias formas de diseñar tu tienda online. En el artículo anterior, te mostré cómo rediseñar el archivo de productos y las páginas de productos de WooCommerce, usando cualquiera de las plantillas para Elementor Pro. En este tutorial de continuación, exploraremos algunas formas adicionales de crear una tienda online diseñara profesionalmente con Elementor WooCommerce.
Al final de este tutorial, habrás creado lo siguiente:
- Una tienda en línea completa, utilizando los kits de plantillas de Envato Elements. Instalaremos una colección temática de plantillas que contiene diseños para todas las páginas que tu tienda WooCommerce pueda necesitar. Al final de esta sección, habrás revisado la página de producto y la página de archivo de productos, y creando una cabecera temática que aparecerá en toda la tienda virtual. Para asegurarnos que quedes satisfecho con el producto final, también te mostraré como personaliza el lit de plantilla elegido con tus propios widgets, información de contacto y enlaces.
- ¡Una página de producto sin plantilla! ¿Tienes un diseño específico en mente para tu tienda online? ¿O quieres experimentar con algunos posibles diseños distintos? Te mostraré cómo crear una página de producto sin usar una plantilla. Al final de esta sección, habrás creado el siguiente diseño.
Tenemos mucho que cubrir, ¡así que empecemos!
Uso de Kits de Plantillas de Envato Elements para Tienda Online con WooCommerce
Las plantillas integradas de Elementor Pro son una excelente manera de darle estilo a una página individual, pero ¿por qué ibas a personalizar tu sitio página por página, cuando puedes usar un kit de plantilla único que aplique estilo a toda tu tienda virtual?
Los kits de Elementor son colecciones temáticas de plantillas, incluyendo kits de comercio electrónico que están diseñados teniendo específicamente en cuenta lo que una tienda en línea necesita.
Los kits de plantillas te pueden evitar la molestia de tener que diseñar y construir una tienda en línea. Basta con que elijas tu kit, apliques una plantilla a cada una de tus páginas, hagas los cambios deseados y felicidades, ¡ya tienes una tienda en WooCommerce diseñada profesionalmente!
Estos kits de plantillas también proporcionan bloques independientes que puedes combinar con tus propios diseños de página. Con estos bloques, podrás crear páginas que sean exclusivas de tu tienda online, y al mismo tiempo coherentes con el conjunto del kit de plantillas elegido.
En esta sección, te mostraré cómo revisar tu página de producto único y la página de archivo de productos, cómo personalizar tus plantillas predeterminadas con widgets adicionales e inculco cómo construir por completo una tienda virtual de comercio electrónico usando el Kit de Plantillas Elementor de tu elección.
Instala un Kit de Plantilla de Elementor para Tienda Virtual de Comercio Electrónico
Envato Elements ofrece una amplia gama de kits de plantillas profesionalmente diseñadas, que van desde plantillas flexibles y multipropósito hasta kits para sectores específicos.
El sitio web de Envato Elements tiene una sección completa dedicada a las compras y comercio electrónico, pero también encontrarás plantillas diseñadas pensando en tu negocio concreto, ya sea que se trate de fotografía, viajes, bienes inmuebles o fitness.
Puedes pasar algún tiempo navegando entre todas las opciones disponibles, y decidir qué plantilla es la más adecuada para tu tienda online. Yo estaré usando este kit en todas mis capturas de pantalla.
Una vez que hayas elegido tu kit, solo tienes que subirlo a tu tienda en línea:
- En el sitio web de Envato Elements, selecciona la plantilla de desees utilizar y, a continuación, haz clic en Descargar.
- Ahora puedes añadir ese kit a un proyecto existente o crear uno nuevo. Haz tu elección de kit y se descargará automáticamente.
- Dirígete a tu tienda virtual en WordPress.
- En el menú de la izquierda de WordPress, selecciona Plantillas > Añadir nueva.
- Selecciona Importar plantillas.
- Haz clic en Elegir archivo y selecciona el archivo zip que acabas de descargar.
- Selecciona Importar ahora.
Tu kit de plantilla de Envato Elements se cargará ahora en tu sitio WordPress, listo para usarse.
Aplica tu Kit de Plantilla de Elementor WooCommerce
En esta sección, te mostraré cómo revisar la página de producto mediante una plantilla de Envato Elements.
Todas las plantillas de WooCommerce Elementor disponibles en Envato Elements están profesionalmente diseñadas, pero si la plantilla que eliges no es la adecuada para tu tienda online, estas plantillas también son fáciles de personalizar.
En esta sección te mostraré cómo añadir fácilmente nuevas funciones a cualquier plantilla, usando una selección de widgets Elementor.
Comencemos aplicándolo a una plantilla:
- En el menú de la izquierda de WordPress, selecciona Plantillas > Añadir nueva
- Abre el menú desplegable Tipo de Plantilla y selecciona Producto único.
- Asígnale un nombre a la plantilla y, a continuación selecciona Crear plantilla.
- En la ventana siguiente, selecciona la pestaña Mis plantillas.
- Elige la plantilla que deseas utilizar. En mis capturas de pantalla, estoy usando Single Product 1.
Cada vez que eliges una plantilla, Elementor WooCommerce te pedirá que importes la configuración del documento para esa plantilla, lo cual anulará la configuración actual de la página. A menos que tengas una razón específica para no hacerlo, generalmente querrás importar la configuración del documento para la plantilla elegida.
Ahora la plantilla se abrirá en el editor de Elementor.
Esta plantilla ya tiene todo lo que tu tienda en línea necesita, pero ¿qué pasaría si quisieras añadir alguna funcionalidad extra?
En las siguientes secciones, te mostraré cómo personalizar la plantilla de la página de producto, utilizando varios widgets populares de Elementor WooCommerce.
Facebook, Twitter, Instagram y mucho más: añadir iconos para compartir en redes sociales
Deberías que los visitantes compartan todo tu contenido en las redes sociales, incluyendo tus productos.
Aunque no es tan común como compartir contenido como pueden ser las entradas de blog o los artículos, a veces los visitantes pueden sentir la necesidad de compartir tus productos. Por ejemplo, si estás realizando un descuento particularmente notable o si tu sitio cuenta con algunos productos interesantes o inusuales.
Puedes añadir iconos para compartir en redes sociales a las páginas de tus productos, utilizando el widget Share Buttons (botones para compartir) de Elementor WooCommerce:
- En el panel de Elementor, busca el widget Share Buttons.
- Arrastra y suelta ese widget en la selección donde desees mostrar los botones para compartir en redes sociales.
- En el Panel Elementor WooCommerce, asegúrate que esté seleccionada la pestaña Content (contenido).
- De forma predeterminada, este widget muestra iconos para Facebook, Twitter y LinkedIn. Si deseas eliminar cualquiera de estos, haz clic en la X que lo acompaña.
- Puedes añadir más plataformas de redes sociales a este widget seleccionando Add Item (añadir elemento) y luego usando Network (red) para seleccionar la plataforma de redes sociales en cuestión.
- Repite el mismo proceso para cad plataforma adicional que desees incluir en tu widget.
- A continuación, puedes ajustar el aspecto de tus botones para compartir en redes sociales. Abre el menú desplegable View (ver) y elige si estos deben estar formados solo por un icono, texto o por un icono y texto.
También puedes cambiar el tamaño de estos iconos o el tamaño de los botones para compartir en general, mediante la pestaña Style (estilo)
En esta sección hemos visto algunas de las distintas formas de personalizar el widget Social Sharing (compartir en redes sociales), pero hay muchos más cambios que puedes realizar.
Vale la pena invertir tiempo para explorar las diversas pestañas y configuraciones del Panel de Elementor WooCommerce, hasta que estés totalmente satisfecho con tu widget Social Sharing.
Añadir al Carrito: La Personalización de este Crucial Widget para Tienda Online
Dado que es una parte integral de la experiencia de la compra en línea, la mayoría de las plantillas de de página de producto cuentan con un widget Add to Cart (añadir al carrito) integrado. Sin embargo, es posible que desees personalizar este digest predeterminado, o incluso reemplazarlo con el widget Custom add to cart (añadir al carrito personalizado) de WooCommerce Elementor.
La plantilla que estamos usando no es la excepción, ya que cuenta con un widget de carrito integrado. Sin embargo, su botón Add to Cart es gris, de manera que pasa desapercibido en mi sitio.
Para garantizar que los clientes potenciales no tengan problemas para localizar mi botón Add to Cart, he decidido personalizar este widget con un color más audaz y llamativo:
- En el lienzo de vista previa en vivo, haz clic para seleccionar el widget Add to Cart.
- En el Panel de Elementor WooCommerce, haz clic en la muestra Background color (color de fondo que inicia el selector de color)
- Utiliza el selector de color para seleccionar el color que desees utilizar. Yo opté por un color brillante que contraste (pero que no choque directamente) con el esquema de color de mi sitio.
Alternativamente, Elementor WooCommerce proporciona un widget Custom add to cart (añadir al carrito personalizado). Este widget cuenta con el conocido botón Add to Cart (añadir al carrito), además de un campo de texto opcional donde los visitantes pueden especificar cuántos productos quieren añadir a su carrito.
¿Sospechas que tus clientes podrían querer comprar productos a granel? En este escenario, un añadir al carrito personalizado podría ser una buena alternativa al widget de carrito estándar.
Para reemplazar el widget Add to Cart de tu plantilla por el Custom add to cart de WooCommerce Elementor, deberás eliminar el winger Add to Cart existente. En el lienzo de vista previa en vivo de WooCommerce Elementor, haz clic para seleccionar el widget de carrito y, a continuación, presiona la tecla Suprimir del teclado.
En el Panel de Elementor WooCommerce, busca el widget Custom Add to Cart, arrástralo al lienzo de vista previa en vivo y, a continuación, coloca este widget en su ubicación.
Ahora puedes personalizar el aspecto de tu widget Custom Add to Cart haciendo clic para expandir la sección Button (botón) en el panel de Elementor WooCommerce.
Para cambiar el color del botón, abre el menú desplegable Type (tipo) y elige una de las distintas opciones.
También puedes cambiar el texto que aparece en el botón Add to Cart, utilizando el campo Text (texto).
El widget Custom Add to Cart también puede mostrar un cuadro de texto opcional Quantity (Cantidad), que es perfecto para los usuarios que desean añadir varios artículos a su carrito. Para añadir este cuadro Quantity, haz clic para expandir la sección Product (producto) en el Panel de Elementor WooCommerce.
- Abre el menú desplegable Product y selecciona el producto que estés viendo actualmente.
- Arrastra el control deslizante Show Quantity (mostrar cantidad) a la posición Show (mostrar)
A diferencia de otros widgets de carrito, el widget Custom add to cart de Elementor no cuenta con un recuento de existencia de productos. Si deseas mostrar esta información en la pagina de tu producto, tendrás que utilizar el widget Product stock (existencias de producto) de Elementor Pro, que encontrarás en el panel de Elementor.
Aumenta tus Ingresos con una Estrategia Upsell
Como negocio electrónico siempre debes intentar persuadir a los clientes para que adquieran mejores productos y con mayor importe: el upselling es una táctica de ventas popular entre todo tipo de empresas y de cualquier tamaño.
Una vez que hayas implementado una estrategia upsell de ventas, tu tienda inane animará automáticamente a los visitantes a hurgar un poco más en sus bolsillos. Por ejemplo, si un cliente está viendo la MacBook más reciente, tu sitio web podría tentarlo a soltar más dinero, mostrando el último modelo de la MacBook Pro en la barra lateral. Mucho más aún si destacas el hecho de que la Pro está de oferta, pero ¡únicamente durante esta semana!
Para implementar una estrategia upsell, tendrás que vincular todos tus productos relacionados en el área de administración de WordPress, y luego añadir el widget Upsell a las plantillas para Elementor de la página del producto.
Dado que ya tenemos abierto el editor Elementor, vamos a añadir nuestro widget Updsell:
- En el Panel Elementor, busca el widget Upsell.
- Arrastra y suelta ese widget en la ubicación deseada sobre el lienzo de vista previa en vivo.
Antes de que aparezca cualquier contenido upsell en tu sitio web, tendrás que vincular todos los productos relacionados en el área de administración de WordPress. Una vez que hayas publicado la plantilla de página de producto, tendrás que hacer lo siguiente:
- En el escritorio de WordPress, selecciona Productos > Todos los productos.
- Encuentra el primer producto que desees vincular a su homólogo más caro y, a continuación, abre este producto para editarlo, como haces habitualmente.
- Desplázate hasta la sección Datos de producto y, a continuación, selecciona la pestaña Productos vinculados.
- En Upsells, introduce el producto que deseas recomendar como alternativa de mayor importe.
- Haz clic en Update (actualizar).
Ahora puedes repetir los pasos anteriores para todos los productos que desees vincular.
Ahora, cada vez que alguien ve mi cama doble contemporánea, WordPress presentará la Cama doble tamaño king contemporánea como posible mejora, ¡Y esperamos que nos obtenga algunos ingresos adicionales mediante este proceso!
Al tentar a tus clientes con alternativas más lujosas y de alta gama, te podrías asegurar de obtener los máximos ingresos de todas y cada una de las ventas.
Cómo Publicar tu Sitio Construido con el Kit de Plantillas para Elementor
Una vez que estés satisfecho con tu plantilla de página de producto personalizada, es hora de implementarla en tu tienda de comercio electrónico:
- En el panel WooCommerce Elementor, selecciona Publish (publicar).
- En la ventana emergente siguiente, abre el menú desplegable Include (incluir) y asegúrate de que esté seleccionado Products.
- Haz clic en Save and close (Guardar y cerrar).
Todas las páginas de tus productos contarán ahora con este nuevo diseño.
Ir más allá de una Sola Plantilla: Cómo Construir tienda WooCommerce
Los kits de plantillas para Elementor proporcionan todas las plantillas que necesitas para crear una tienda completa de comercio electrónico.
Si optaste por un kit que fue diseñado específicamente para tiendas de comercio electrónico, tendrás acceso a plantillas que cubren todas las páginas principales de un eCommerce, incluyendo una plantilla de archivo de productos.
Para crear una apariencia coherente en tu sitio web, normalmente usarías varias plantillas del mismo kit de plantillas para Elementor. En las siguientes secciones, iremos más allá de una sola página y aplicaremos varias plantillas a nuestro sitio web, incluida una plantilla de cabecera que aparecerá en toda nuestra tienda en línea.
Cómo actualizar el Archivo de Productos de una Tienda Online con WooCommerce
Para empezar, voy a aplicar a mi sitio la plantilla de archivo de productos:
- En el menú de la izquierda de WordPress, selecciona Templates > Theme Builder (Plantillas > Constructor de tema).
- Selecciona el botón Add New (añadir nuevo)
- Abre la lista desplegable Template type (tipo de plantilla y selecciona Product Archive (Archivo de productos).
- Asigna un nombre a la plantilla y, a continuación, haz clic en Create Template (Crear plantilla).
- Elementos mostrará ahora todas las plantillas disponibles. Haz clic para seleccionar la plantilla Product Archive (archivo de productos) que deseas utilizar.
Ahora la plantilla elegida se abrirá en el editor Elementor.
En este punto, puedes organizar la plantilla para Elementor y eliminar y editar los widgets que vienen integrados en ella.
Una vez que estés satisfecho con tu plantilla, es hora de pulsar Publish (publicar):
- Haz clic en el botón verde Publish del Panel de Elementor
- En la ventana emergente siguiente, abre el menú desplegable Include (incluir) y selecciona All Product Archives (Todos los archivos de productos).
- Haz clic en Save and Close (Guardar y cerrar).
El archivo de producto actualizado se implementará ahora en tu tienda online con WooCommerce.
Cómo Crear una Cabecera para tu Tienda Online
Para este punto, ya estarás usando varias plantillas del mismo Kit de Plantillas para Elementor, lo que es perfecto para dar a tu tienda en línea un aspecto consistente. Sin embargo, muchos sitios web utilizan elementos recurrentes como cabeceras y columnas laterales o “sidebars”, para cohesionar sus páginas y crear una identidad de marca más sólida.
En las siguientes secciones, usaremos el kit de plantillas para Elementor elegido para crear una cabecera que aparecerá en tu tienda WooCommerce. También, te mostraré cómo personalizar la plantilla de cabecera con tu información de contacto y enlaces a las áreas más importantes de tu tienda virtual.
Para empezar, vamos a elegir una plantilla de cabecera:
- En WordPress selecciona Templates > Theme builder.
- Haz clic en Add New.
- Abre el desplegable Select the template type…(seleccionar el tipo de plantilla) y elige Header (cabecera).
- Asigna un nombre descriptivo a esta plantilla.
- Selecciona Create Template > My Templates (Crear plantilla > Mis plantillas).
Dependiendo del tema elegido, es posible que dispongas de varias plantillas de cabecera. Por ejemplo, este tema proporciona las plantillas Header Menu - Light y Header Menu-Dark.
En mis capturas de pantalla, estoy usando Header Menu - Dark. Cuando se te solicite, opto por importar los ajustes del documento.
Ahora se abrirá la plantilla de cabecera elegida en el editor de Elementor.
Hay muchas maneras de personalizar una plantilla de cabecera, pero cubriré dos de las más populares: añadiendo información de contacto y enlaces.
Ayuda a los clientes potenciales a ponerse en contacto contigo.
Al incluir los datos de contacto en la cabecera, puedes animar a los clientes potenciales a ponerse en contacto para consultar cualquier duda que puedan tener. Proporcionar un acceso sencillo a tu información de contacto, también puede hacer que tu tienda online parezca más fiable, ya que los clientes potenciales sabrán cómo ponerse en contacto contigo en caso de que encuentren algún problema.
En Elementor, la información de contacto se muestra normalmente a través del widget Icon List (lista de iconos). Si la plantilla elegida ya incluye una lista de iconos, puedes personalizar este widget con tu propia información de contacto:
- Haz clic para seleccionar el widget Icon List de la plantilla
- En el Panel de Elementor, haz clic para expandir la sección Icon List.
- Haz clic para expandir la sección de texto que desees editar.
- Introduce el texto en el campo Text.
- Añade un enlace e icono opcionales de ser necesario.
- Si deseas añadir más información a tu lista de iconos, haz clic en Add Item (añadir elemento) y personaliza este elemento con tu propio texto, así como los iconos o enlaces que desees utilizar.
Si la plantilla elegida aún no cuenta con una lista de iconos, puedes encontrar este widget en el panel de Elementor y, a continuación, arrástralo y suéltalo en el lienzo de vista previa en vivo.
Cómo Añadir Enlaces a la cabecera de tu Sitio
Las cabeceras son una excelente forma de proporcionar un acceso fácil a todo el contenido más importante de tu sitio, y muchas plantillas de cabecera contienen ya marcadores de posición para los enlaces.
Esta plantilla de Envato no es la excepción, ya que proporciona marcadores de posición para las páginas, Chat, Contact Us (contáctanos), Log in (iniciar sesión) y Register (Regístrate), como parte de tu widget Icons List integrado. Voy a personalizar esto marcadores de posición para vincularlos a diferentes áreas de mi tienda online.
Si la plantilla no proporciona marcadores de posición para enlaces similares, pero sí cuenta con una lista de iconos, puedes añadir los enlaces como nuevos elementos:
- En el lienzo de vista previa en vivo, haz clic para seleccionar el widget existente Icon List.
- Haz clic en el botón Add Item (añadir elemento).
Como alternativa, puedes añadir una nueva lista de iconos localizando este widget en el Panel de Elementor y, a continuación, soltándolo sobre el lienzo de vista previa en vivo.
En aras de la simplicidad, voy a suponer que tienes un widget de lista de iconos que quieres personalizar con tus propios enlaces:
- En el lienzo de vista previa en vivo, haz clic para seleccionar el widget Icons List.
- En el Panel de Elementor, busca el elemento que desees convertir en un enlace y, a continuación, haz clic para expandir esta sección.
- En el campo Link (enlace), copia y pega o escribe el enlace.
- Si es necesario, cambia el texto que aparece en el encabezado editando el campo Text (texto).
Repite el proceso para cada enlace que desees añadir a tu cabecera.
De forma predeterminada, mi cabecera tiene un marcador de posición para una página de Contáctenos. Actualmente, mi tienda virtual no tiene esta página, pero este tema tiene una plantilla de contacto dedicada a esto.
Si deseas añadir una página de Contacto a tu tienda en línea, puedes utilizar esta plantilla para generar rápida y fácilmente una página de Contacto que complemente el resto de tu tienda online con WooCommerce.
A continuación, puedes hacer referencia a esta página Contáctenos en tu cabecera.
La cabecera también contiene marcadores de posición para las páginas Iniciar sesión y Regístrate. Si tu sitio no tiene funcionalidad de suscripciones, no te preocupes, tenemos una lista de 22 plugin WordPress WooCommerce de suscripción gratuitos y premium que puedes añadir a tu sitio web WordPress. Alternativamente, hemos publicado una guía paso a paso para crear un sitio basado en las suscripciones, usando el plugin WordPress WooCommerce Ultimate Membership Pro (UMP).
Perfeccionando la Cabecera: Eliminar los Enlaces no Deseados
Si la cabecera contiene marcadores de posición que no deseas utilizar, eliminarlos es fácil:
- Haz clic para seleccionar el widget Icon List.
- El Panel de Elementor ahora se actualizará para mostrar todos los elementos incluidos en este widget.
- Para eliminar un elemento, haz clic en el icono X que lo acompaña.
Usando estas génicas, puedes crear una cabecera que contenga enlaces a todas las páginas más importantes de tu tienda en línea.
Mostrar tu Cabecera Personalizada en tu Tienda Online con WooCommerce
¿Estás satisfecho con la configuración de tu cabecera? Si es así, es el momento de pulsar Publish:
- En el Panel de Elementor, haz clic en Publish.
- Abre el menú desplegable Include (incluir) y selecciona Entire Site (todo el sitio)
- Haz clic en Save & Close (guardar y cerrar)
Tu nueva cabecera está publicada ahora y debería aparecer en todo tu tienda WooCommerce.
Diseñar una Tienda WooCommerce Utilizando el Generador de Temas de Elementor
En este tutorial, hemos visto cómo puedes construir una elegante tienda online usando una variedad de plantillas ya construidas, incluyendo las docenas de kits de plantillas profesionalmente diseñadas que tienes a tu disposición en Envato Elements.
Pero, ¿Qué pasa si quires diseñar una tienda WooCommerce sin usar una plantilla?
Tal vez tengas un diseño específico en mente, tal vez necesites asegurarte que tu tienda virtual destaque entre la multitud, ¿o tal vez quieras bocetar distintos diseños utilizando un constructor de páginas intuitivo?
Transformar una pizarra en blanco en una plantilla para Elementor requiere algo de tiempo y esfuerzo, especialmente si lo comparamos con el uso de una plantilla ya hecha. Sin embargo, gran parte trabajaras con los mismos widgets por lo que crear una plantilla de comercio electrónico no debe ser muy diferente a la personalización de una ya creada.
En esta sección final, te mostraré cómo crear una página de producto sin usar una plantilla. Para mantener las cosas interesantes, usaré algunos widgets que no hemos cubierto anteriormente, incluyendo el widget y plugin WooComerce breadrumbs, que ayudan a mantener a los clientes orientados mientras explican tus diversas categorías de productos.
Cómo Crear tus Propias Plantillas para Elementor
Para crear una plantilla en blanco:
- En el menú izquierdo de WordPress, selecciona Templates (plantillas).
- Haz clic sobre el botón Add New (agregar nuevo)
- Abre el menú desplegable Template Type (tipo de plantilla) y selecciona Single Product (producto único).
- Asigna a la plantilla un nombre descriptivo.
- Haz clic en Create template (crear plantilla)
- La biblioteca de plantillas para Elementor se abrirá automáticamente. Dado que no estamos usando una plantilla, puedes cerrar esta ventana.
Ahora deberías tener una pizarra completamente en blanco con la que puedes trabajar.
Construye una Página de Producto sin usar una Plantilla
Comencemos desde arriba, creando un espacio para el título de nuestro producto.
- En el Panel de Elementor, toma el widget Product Title (título de producto) y suéltalo en el lienzo de vista previa en vivo.
- Ahora puedes utilizar el Panel Elementor para cambiar la apariencia de título, incluida la modificación del tamaño del texto y su alineación.
- En el Panel de Elementor, selecciona la pestaña Style (estilo). Aquí, puedes cambiar el color y la fuente del título del producto, añadir una sombra y realizar otros cambios estilísticos. Pasa algún tiempo experimentando para ver los efectos que puedes crear.
- A continuación, tenemos que mostrar a los clientes potenciales lo que están comprando. En el Panel de Elementor, busca el widget Product Images (imágenes de producto) y arrástralo al lienzo de vista previa en vivo.
¡Cada producto necesita una descripción! Quiero mostrar la descripción de mi producto junto con su imagen, así que voy a añadir una segunda columna. Para hacerlo, haz clic en la sección que contiene el widget Product Image. Esta sección ahora debe estar enmarcada en azul. A continuación, en la esquina superior izquierda de la sección, pulsa Control y haz clic en el icono Column.
- Selecciona Add New Column (añadir nueva columna). Ahora deberías tener una sección que conste de dos columnas.
- En el Panel de Elementor, busca el widget Product Data Tabs (pestañas de datos de producto) y arrástralo y suéltalo en la columna que acabas de crear.
- Ahora tenemos que añadir el precio. En el Panel de Elementor busca el plugin WooCommerce Product Price (precio de producto) y arrástralo sobre el lienzo.
- De forma predeterminada, el widget Product Price está en el lado más pequeño, por lo que voy a ajustar el tamaño de su fuente. En el panel de Elementor, selecciona la pestaña Style.
- Busca Typography (tipografía) y haz clic en el icono Edit (Editar) que lo acompaña.
- En la ventana emergente siguiente, aumenta el tamaño de la fuente.
- El siguiente paso es la función Add to Cart (añadir al carrito). En el Panel de Elementor, busca Add to Cart y arrastra y suelta este plugin WooCommerce en el lienzo.
A continuación quiero añadir migas de pan para que los visitantes puedan ver las categorías subcategorías a las que pertenece este producto, como Muebles, Electrónica o Jardinería. En el Panel de Elementor toma el plugin WordPress WooCommerce breadcrumbs y suéltalo sobre el lienzo.
Por último, quiero animar a los visitantes a comprar artículos adicionales, mediante la creación de productos relacionados. En el Panel de Elementor, toma el plugin WooCommerce Product Related (producto relacionado) y suéltalo sobre el lienzo.
Estos son los widgets que estoy añadiendo a mi página de producto, pero es posible que desees añadir widgets y plugin WooCommerce adicionales, como los widgets Social Sharing (compartir en redes sociales) o Upsell que cubrimos anteriormente.
También puedes aplicar estilo a los widgets seleccionándolos en el lienzo y abriendo a continuación la pestaña Styles en el Panel de Elementor. Por último, puedes cambiar el diseño de la plantilla tomando cualquier widget del lienzo y soltándolo en una nueva ubicación.
Cuando estés satisfecho con tu plantilla, puedes publicarla seleccionando Publish > Include > Products > Save and Close (Publicar > Incluir > Productos > Guardar y cerrar). Cada página de producto de tu tienda en línea ahora contará con este nuevo diseño.
Conclusión
En esta serie, cubrimos tres maneras en las que puedes construir una tienda WooCommerceElementor. Si seguiste el tutorial, creaste varias plantillas de comercio electrónico, incluidos archivos de productos, páginas de productos y cabeceras. También deberías estar familiarizado con todos los widgets de comercio electrónico más importantes de Elementor.
Elementor Template Kits son colecciones temáticas de plantillas, incluyendo kits para comercio electrónico que están diseñados teniendo en cuenta específicamente las tiendas en línea.
Los kits de plantillas pueden evitar el esfuerzo que supone tener que diseñar y construir una tienda online. ¡Simplemente elige tu kit y aplica una plantilla a cada una de tus páginas para conseguir una tienda WooCommerce diseñada profesionalmente!
