Personaliza tu tienda WooCommerce con kits de plantillas de Elementor

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Las plantillas integradas de Elementor Pro son una excelente manera de diseñar una página individual, pero ¿por qué personalizar tu tienda online producto por producto, cuando puedes usar los kits de plantillas de Elementor para diseñar todo tu sitio de comercio electrónico?

Innumerables empresas utilizan WordPress para vender sus productos y servicios, gracias al popular plugin WooCommerce. En el artículo anterior, construimos una completa tienda de comercio electrónico, usando WordPress, WooCommerce y Elementor Pro.

WordPress

Cómo construir una tienda WooCommerce con Elementor

Jessica Thornsby

En este tutorial de continuación, te mostraré cómo rediseñar toda tu tienda online, usando los kits de plantillas de Elementor. También crearemos una cabecera que incluye toda la información de contacto de tu tienda. Alternativamente, si tienes una visión muy específica en mente, te mostraré cómo crear desde cero tu propia plantilla de Elementor, dándote un control creativo total sobre tu sitio de comercio electrónico.

Lo que vamos a construir

Elementor es una flexible herramienta que te ofrece varias formas de diseñar tu tienda de comercio electrónico. En el artículo anterior, te mostré cómo rediseñar el archivo de productos y las páginas de productos de WooCommerce, usando cualquiera de las plantillas prefabricadas de Elementor Pro. En esta tutorial de continuación, exploraremos algunas formas adicionales de crear una tienda de comercio electrónico profesionalmente diseñada con Elementor.

Al final de este tutorial, habrás creado lo siguiente:

Una completa tienda de comercio electrónico, utilizando los kits de plantillas de Envato Elements. Instalaremos una colección temática de plantillas que contienen diseños para todas las páginas que tu sitio WooCommerce pueda necesitar. Al final de esta sección, habrás revisado la página de producto y la página de archivo de productos, y creado una cabecera temática que aparecerá en toda la tienda. Para asegurarnos de que quedes satisfecho con el producto final, también te mostraré cómo personalizar el kit de plantilla elegido con tus propios widgets, información de contacto y enlaces.

WooCommerce generates a Product Archive page automatically you can customize this page using Elementor

¡Una página de producto sin plantilla! ¿Tienes un diseño específico en mente? ¿O quieres experimentar con algunos posibles diseños distintos? Te mostraré cómo crear una página de producto sin usar una plantilla. Al final de esta sección, habrás creado el siguiente diseño:

A product page created with a completely custom Elementor Pro template

Tenemos mucho que cubrir, ¡así que empecemos!

Uso de kits de plantillas de Envato Elements con WooCommerce

Las plantillas integradas de Elementor Pro son una excelente manera de dar estilo a una página individual, pero ¿por qué ibas a personalizar tu sitio página por página, cuando puedes usar un único kit de plantilla que aplique estilo de todo su sitio web?

Los kits de Elementor son colecciones temáticas de plantillas, incluyendo kits de comercio electrónico que están diseñados teniendo específicamente en cuenta las tiendas online.

Los kits de plantillas pueden evitar la molestia de tener que diseñar y construir una tienda online. Basta con que elijas tu kit, apliques una plantilla a cada una de tus páginas, hagas los cambios deseados, y felicidades, ¡ya tienes un sitio WooCommerce profesionalmente diseñado!

Estos kits de plantillas también proporcionan bloques independientes que puedes combinar en tus propios diseños de página. Con estos bloques, podrás crear páginas que sean exclusivas de tu sitio web, y al mismo tiempo coherentes con el conjunto del kit de plantillas elegido.

En esta sección, te mostraré cómo revisar tu página de producto único y la página de archivo de productos, cómo personalizar tus plantillas predeterminadas con widgets adicionales e incluso cómo construir una completa tienda de comercio electrónico usando el Kit de Plantillas Elementor de tu elección.

Instala un kit de plantilla de Elementor para comercio electrónico

Envato Elements ofrece una amplia gama de kits de plantillas profesionalmente diseñados, que van desde plantillas flexibles y multipropósito hasta kits para sectores específicos.

El sitio web de Envato Elements tiene una completa sección dedicada a las compras y el comercio electrónico, pero también encontrarás plantillas diseñadas pensando en tu negocio concreto, ya se trate de la fotografía, los viajes, los bienes inmuebles o el fitness.

Puedes pasar algún tiempo navegando entre todas las opciones disponibles, y decidir qué plantilla es la más adecuada para tu sitio web. Yo estoy usando el kit Shoppix en todas mis capturas de pantalla.

Una vez hayas elegido tu kit, solo tienes que subirlo a tu sitio web:

En el sitio web de Envato Elements, selecciona la plantilla que desees utilizar y, a continuación, haz clic en Descargar.
Ahora puedes añadir este kit a un proyecto existente o crear un nuevo proyecto. Haz tu elección y tu kit se descargará automáticamente.
Dirígete a tu sitio web de WordPress.
En el menú de la izquierda de WordPress, selecciona Plantillas > Añ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 cargará ahora en tu sitio WordPress, listo para su uso.

Aplicar tu Kit de plantilla de Elementor

En esta sección, te mostraré cómo revisar la página de producto mediante una plantilla de Envato Elements.

Todas las plantillas de Elementor disponibles en Envato Elements están profesionalmente diseñadas, pero si la plantilla elegida no es la adecuada para tu sitio web concreto, estas plantillas también son fáciles de personalizar.

En esta sección, te mostraré cómo añadir fácilmente nuevas funciones a cualquier plantilla, usando una selección de widgets de Elementor.

Comencemos aplicando una plantilla:

En el menú de la izquierda de WordPress, selecciona Plantillas > Añadir nueva.
Abre el menú desplegable Tipo de plantilla y selecciona Producto único.
Asígnale un nombre a la plantilla y, a continuación, selecciona Crear plantilla.
En la ventana siguiente, selecciona la pestaña Mis plantillas.
Elige la plantilla que deseas utilizar. En mis capturas de pantalla, estoy usando Single Product 1 (un solo producto 1).

Cada vez que eliges una plantilla, Elementor te pedirá que importes la configuración del documento para esa plantilla, lo que anulará la configuración actual de la página. A menos que tengas una razón específica para no hacerlo, generalmente querrás importar la configuración del documento para la plantilla elegida.

Ahora la plantilla se abrirá en el editor de Elementor.

The Elementor editor will now display your chosen template

Esta plantilla ya tiene todo lo que tu página de productos necesita, pero ¿qué pasaría si quisieses añadir alguna funcionalidad extra?

En las siguientes secciones, te mostraré cómo personalizar la plantilla de la página del producto, utilizando varios populares widgets de Elementor.

Facebook, Twitter, Instagram y mucho más: Añadir iconos para compartir en redes sociales

Deberías facilitar que los visitantes compartan todo tu contenido en las redes sociales, incluidos tus productos.

Aunque no es tan común como compartir contenido como puedan ser las entradas de blog o los artículos, a veces los visitantes pueden sentir la necesidad de compartir tus productos, por ejemplo, si está realizando un descuento particularmente notable, o si tu sitio cuenta con algunos productos interesantes o inusuales.

Puedes añadir iconos para compartir en redes sociales a las páginas de tus productos, utilizando el widget Share Buttons (Botones para compartir) de Elementor:

En el Panel de Elementor, busca el widget Share Buttons.
Arrastra y suelta este widget en la sección donde desees mostrar los botones para compartir en redes sociales.

You can add social sharing buttons to your product listing using the Share Buttons widget

En el Panel Elementor, asegúrate de que esté seleccionada la pestañ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 acompaña.
Puedes añadir más plataformas de redes sociales a este widget seleccionando Add Item (añadir elemento) y usando luego Network (red) para seleccionar la plataforma de redes sociales en cuestión.

Elementor Pro supports a long list of social media networks including Tumblr Digg and Skype

Repite el mismo proceso para cada plataforma adicional que desees incluir en tu widget.
A continuación, puedes ajustar el aspecto de tus botones para compartir en redes sociales. Abre el menú desplegable View (ver) y elige si estos deben estar formados solo por un icono, por texto o por un icono y texto.

You can style your social sharing buttons using Elementors Style tab

También puedes cambiar el tamaño de estos iconos, o el tamaño de los botones para compartir en general, mediante la pestaña Style (estilo).

En esta sección, hemos visto algunas distintas formas de personalizar el widget Social Sharing (compartir en redes sociales), pero hay muchos más cambios que puedes realizar.

Vale la pena invertir tiempo para explorar las diversas pestañas y configuraciones del Panel de Elementor, hasta que estés completamente satisfecho con tu widget Social Sharing.

Añadir al carrito: La personalización de este widget crucial

Dado que es una parte integral de la experiencia de compra online, la mayoría de las plantillas de página de producto cuentan con un widget Add to Cart (añadir al carrito) integrado. Sin embargo, es posible que desees personalizar este widget predeterminado, o incluso reemplazarlo con el widget Custom add to cart (Añadir al carrito personalizado) de Elementor.

La plantilla Shoppix no es una excepción, ya que cuenta con un widget de carrito integrado. Sin embargo, su botó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 botón Add to Cart, he decidido personalizar este widget con un color má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, 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 he optado por un color brillante que contraste (pero no choca directamente) con el esquema de color de mi sitio.

Alternativamente, Elementor proporciona un widget Custom add to cart (añadir al carrito personalizado). Este widget cuenta con el conocido botón Add to Cart (añadir al carrito), además de un campo de texto opcional donde los visitantes puedan especificar cuántos productos quieren añadir a su carrito.

¿Sospechas que tus clientes podrían querer comprar productos a granel? En este escenario, un añadir al carrito personalizado podría ser una buena alternativa al widget de carrito estándar.

Para reemplazar el widget Add to Cart de tu plantilla por el Custom add to cart de Elementor, deberás eliminar el widget Add to Cart existente. En el lienzo de vista previa en vivo de Elementor, haz clic para seleccionar el widget de carrito y, a continuación, presiona la tecla Suprimir del teclado.

En el Panel de Elementor, busca el widget Custom Add to Cart, arrástralo al lienzo de vista previa en vivo y, a continuación, coloca este widget en su ubicación.

Ahora puedes personalizar el aspecto de tu widget Custom Add to Cart haciendo clic para expandir la sección Button (botón) en el Panel de Elementor.

You can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widget

Para cambiar el color del botón, abre el menú desplegable Type (tipo) y elige una de las distintas opciones.

También puedes cambiar el texto que aparece en el botón Add to Cart, utilizando el campo Text (texto).

El widget Custom Add to Cart también puede mostrar un cuadro de texto opcional Quantity (Cantidad), que es perfecto para los usuarios que desean añadir varios artículos a su carrito. Para añadir este cuadro Quantity, haz clic para expandir la sección Product (producto) en el Panel de Elementor.

Elementors Custom Add to Cart widget can display an optional Quantity text box

Abre el menú desplegable Product y selecciona el producto que estés viendo actualmente.
Arrastra el control deslizante Show Quantity (mostrar cantidad) a la posición Show (mostrar).

A diferencia de otros widgets de carrito, el widget Custom add to cart de Elementor no cuenta con un recuento de existencias de productos. Si deseas mostrar esta información en la página de tu producto, tendrás que utilizar el widget Product stock (existencias de producto) de Elementor Pro, que encontrarás en el Panel de Elementor.

Aumenta tus ingresos con una estrategia upsell

Como negocio de comercio electrónico, siempre debes intentar persuadir a los clientes para que adquieran productos de mayor importe y mejores: el upselling es una táctica de ventas popular entre todo tipo de empresas y de cualquier tamaño.

Una vez hayas implementado una estrategia upsell de ventas, tu sitio web animará automáticamente a los visitantes a urgar un poco más en sus bolsillos. Por ejemplo, si un cliente está viendo el MacBook más reciente, tu sitio web podría tentarle a soltar más dinero, mostrando el último modelo de MacBook Pro en la barra lateral. Mucho más aún si destacas el hecho de que el Pro está de oferta, pero ¡únicamente durante esta semana!

Para implementar una estrategia upsell, tendrás que vincular todos tus productos relacionados en el área de administración de WordPress, y luego añadir el widget Upsell de Elementor a la plantilla de la página del producto.

Dado que ya tenemos abierto el editor Elementor, vamos a añadir nuestro widget Upsell:

En el Panel Elementor, busca el widget Upsell.
Arrastra y suelta este widget en la ubicación deseada sobre el lienzo de vista previa en vivo.

Antes de que aparezca cualquier contenido upsell en tu sitio web, tendrás que vincular todos los productos relacionados en el área de administración de WordPress. Una vez hayas publicado la plantilla de página de producto, tendrás que hacer lo siguiente:

En el escritorio de WordPress, selecciona Productos > Todos los productos.
Encuentra el primer producto que desees vincular a su homólogo más caro y, a continuación, abre este producto para editarlo, como haces habitualmente.
Desplázate hasta la sección Datos de producto y, a continuación, selecciona la pestaña Productos vinculados.

You can boost your revenue using WordPress Linked Products feature

En Upsells, introduce el producto que deseas recomendar como alternativa de mayor importe.
Haz clic en Update (actualizar).

Ahora puedes repetir los anteriores pasos para todos los productos que desees vincular.

Ahora, cada vez que alguien ve mi Cama doble contemporánea, WordPress presentará la Cama doble tamaño king contemporánea como posible mejora, ¡y esperamos que nos obtenga algunos ingresos adicionales mediante este proceso!

Whenever you view product WordPress will now display a You may also like section

Al tentar a tus clientes con alternativas más lujosas y de alta gama, te podrías asegurar de obtener los máximos ingresos de todas y cada una de las ventas.

Cómo publicar tu sitio construido con el Kit de plantilla de Elementor

Una vez que estés satisfecho con tu plantilla de página de producto personalizada, es hora de implementarla en tu tienda de comercio electrónico:

En el panel Elementor, selecciona Publish (publicar).
En la ventana emergente siguiente, abre el menú desplegable Include (incluir) y asegúrate de que esté seleccionado Products.
Haz clic en Save and close (Guardar y cerrar).

Todas las páginas de tus productos contarán ahora con este nuevo diseño.

Ir más allá de una sola plantilla: Cómo construir una tienda de comercio electrónico

Los Kits de plantilla de Elementor proporcionan todas las plantillas que necesitas para crear una completa tienda de comercio electrónico.

Si optaste por un kit que fue diseñado específicamente para tiendas de comercio electrónico, como Shoppix, tendrás acceso a plantillas que cubren todas las principales páginas de un eCommerce, incluyendo una plantilla de archivo de productos.

Para crear una apariencia coherente en tu sitio web, normalmente usarás varias plantillas del mismo kit de plantillas. En las siguientes secciones, iremos más allá de una sola página y aplicaremos varias plantillas a nuestro sitio web, incluida una plantilla de cabecera que aparecerá en toda nuestra tienda de comercio electrónico.

Cómo actualizar el archivo de productos de WooCommerce

Para empezar, voy a aplicar a mi sitio la plantilla de archivo de productos de Shoppix:

En el menú de la izquierda de WordPress, selecciona Templates > Theme Builder (Plantillas > Constructor de tema).
Selecciona el botón Add New (añ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 continuación, haz clic en Create Template (Crear plantilla).
Elementor ahora mostrará todas las plantillas disponibles; haz clic para seleccionar la plantilla Product Archive (archivo de productos) que desea utilizar.

Ahora la plantilla elegida se abrirá en el editor Elementor.

En este punto, puedes personalizar la plantilla añadiendo y eliminando widgets, o editando los widgets que vienen integrados en ella.

Una vez estés satisfecho con tu plantilla, es hora de pulsar Publish (publicar):

Haz clic en el botón verde Publish del Panel de Elementor.
En la ventana emergente siguiente, abre el menú 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 implementará ahora en tu sitio web.

Cómo crear una cabecera para tu sitio de comercio electrónico

En este punto, estás usando varias plantillas del mismo Kit de Plantillas de Elementor, que es perfecto para dar a tu sitio web un aspecto consistente. Sin embargo, muchos sitios web utilizan elementos recurrentes como cabeceras y columnas laterales o "sidebars", para cohesionar sus páginas y crear una identidad de marca más sólida.

En las siguientes secciones, usaremos el kit de plantillas elegido para crear una cabecera que aparecerá en tu tienda de comercio electrónico. También te mostraré cómo personalizar la plantilla de cabecera con tu información de contacto y enlaces a las áreas más importantes de tu tienda online.

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, mi tema Shoppix proporciona las plantillas Header Menu - Light y Header Menu - Dark.

En mis capturas de pantalla, estoy usando Header Menu - Dark. Cuando se te solicite, opta por importar los ajustes del documento.

Ahora se abrirá la plantilla de cabecera elegida en el editor de Elementor.

In this section well add a header to our online store

Hay muchas maneras de personalizar una plantilla de cabecera, pero cubriré dos de las más populares: añadiendo informació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 potenciales clientes a ponerse en contacto para consultar cualquier duda que puedan tener. Proporcionar un fácil acceso a tu información de contacto también puede hacer que tu negocio parezca más fiable, ya que los clientes potenciales sabrán cómo ponerse en contacto contigo en caso de que encuentren algún problema.

En Elementor, la información de contacto se muestra normalmente a travé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 información de contacto:

Haz clic para seleccionar el widget Icon List de la plantilla.

You can add your contact details using Elementors Icon List widget

En el Panel de Elementor, haz clic para expandir la sección Icon List.
Haz clic para expandir la sección de texto que desees editar.
Introduce el texto en el campo Text.
Añade un enlace e icono opcionales, si es necesario.
Si desea añadir más información a tu lista de iconos, haz clic en Add Item (añadir elemento) y personaliza este elemento con tu propio texto, además de los iconos o vínculos que desees utilizar.

Si la plantilla elegida aún no cuenta con una lista de iconos, puedes encontrar este widget en el panel de Elementor y, a continuación, arrastrarlo y soltarlo en el lienzo de vista previa en vivo.

Cómo añadir enlaces a la cabecera de tu sitio

Las cabeceras son una excelente forma de proporcionar un acceso fácil a todo el contenido más importante de tu sitio, y muchas plantillas de cabecera contienen ya marcadores de posición para los enlaces.

La plantilla Shoppix de Envato no es una excepción, ya que ya proporciona marcadores de posición para las páginas Chat, Contact Us (contáctenos), Log in (iniciar sesión) y Register (Regístrate), como parte de su widget Icons List integrado. Voy a personalizar estos marcadores de posición para vincularlos a diferentes áreas de mi sitio web.

Si la plantilla no proporciona similares marcadores de posición para enlaces, pero sí cuenta con una lista de iconos, puedes añ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 botón Add Item (añadir elemento).

Como alternativa, puedes añadir una nueva lista de iconos localizando este widget en el Panel de Elementor y, a continuación, soltá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 continuación, haz clic para expandir esta sección.

En el campo Link (enlace), copia y pegue 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 añadir a tu cabecera.

De forma predeterminada, mi cabecera tiene un marcador de posición para una página Contáctenos. Actualmente, mi sitio web no tiene realmente esta página, pero Shoppix tiene una plantilla de contacto dedicada.

Si deseas añadir una página de Contacto a tu tienda de comercio electrónico, puedes utilizar esta plantilla para generar rápida y fácilmente una página de Contacto que complemente el resto de su sitio web.

Want to quickly and easily add a Contact Us form to your page Shoppix has a Contact Us template that you can use with your ecommerce store

A continuación, puedes hacer referencia a esta página Contáctenos en tu cabecera.

La cabecera de Shoppix también contiene marcadores de posición para las páginas Iniciar sesión y Registrate. Si tu sitio no tiene funcionalidad de suscripciones no te preocupes, tenemos una lista de 22 plugins de suscripción gratuitos y premium que puedes añadir a tu sitio web de WordPress. Alternativamente, hemos publicado una guía paso a paso para crear un sitio basado en las suscripciones, usando el plugin Ultimate Membership Pro (UMP).

Perfeccionar la cabecera: Eliminar los enlaces no deseados

Si la cabecera contiene marcadores de posición que no deseas utilizar, es fácil eliminarlos:

Haz clic para seleccionar el widget Icon List.
El Panel de Elementor ahora se actualizará para mostrar todos los elementos incluidos en este widget.
Para eliminar un elemento, haz clic en el icono X que lo acompaña.

Usando estas técnicas, puedes crear una cabecera que contenga enlaces a todas las páginas más importantes de tu sitio web.

Mostrar tu cabecera personalizada en WooCommerce

¿Estás satisfecho con la configuración de tu cabecera? Si es así es el momento de pulsar Publish:

En el Panel de Elementor, haz clic en Publish.
Abre el menú desplegable Include (incluir) y selecciona Entire Site (todo el sitio).
Haz clic en Save & Close (guardar y cerrar)

Tu nueva cabecera está ahora publicada, y debería aparecer en todo tu sitio de comercio electrónico.

Click Publish Entire Site Save Close and your header will appear across your ecommerce website

Diseñar un sitio de comercio electrónico utilizando el generador de temas de Elementor

En este tutorial, hemos visto cómo puedes crear un elegante sitio de comercio electrónico usando una variedad de plantillas ya construidas, incluyendo las docenas de kits de plantillas profesionalmente diseñados que tienes a tu disposición en Envato Elements.

Pero, ¿qué pasa si quieres diseñar un sitio de WooCommerce sin usar una plantilla?

Tal vez tengas un diseño específico en mente; tal vez necesites asegurarte de que tu sitio de comercio electrónico destaque entre la multitud, ¿o tal vez quieras abocetar distintos diseños utilizando un intuitivo constructor de páginas?

Transformar una pizarra en blanco en una plantilla de Elementor requiere algo de tiempo y esfuerzo, especialmente si lo comparamos con el empleo de una plantilla ya hecha. Sin embargo, en gran parte trabajarás con los mismos widgets, por lo que crear una plantilla de comercio electrónico no debería parecer muy diferente a la personalización de una plantilla de comercio electrónico ya creada.

En esta sección final, te mostraré cómo crear una página de producto sin usar una plantilla. Para mantener las cosas interesantes, usaré algunos widgets que no hemos cubierto anteriormente, incluyendo el widget de migas de pan WooCommerce breadcrumbs, que ayudan a mantener a los clientes orientados mientras exploran tus diversas categorías de productos.

Cómo crear tu propia plantilla para Elementor

Para crear una plantilla en blanco:

En el menú izquierdo de WordPress, selecciona Templates (plantillas).
Haz clic sobre el botón Add New (añadir nuevo).
Abre el menú desplegable Template Type (tipo de plantilla) y selecciona Single Product (producto único).
Asigna a la plantilla un nombre descriptivo.
Haga clic en Create template (crear plantilla).
La biblioteca de plantillas de Elementor se abrirá ahora automáticamente. Dado que no estamos usando una plantilla, puedes cerrar esta ventana.

Ahora deberías tener una pizarra completamente en blanco con la que trabajar.

Crear una página de producto, sin usar una plantilla

Comencemos desde arriba, creando un espacio para el título de nuestro producto:

En el Panel de Elementor, toma el widget Product Title (título de producto) y suéltalo en el lienzo de vista previa en vivo.
Ahora puedes utilizar el Panel de Elementor para cambiar la apariencia del título, incluida la modificación del tamaño del texto y su alineación.
En el Panel de Elementor, selecciona la pestaña Style (estilo). Aquí, puedes cambiar el color y la fuente del título del producto, añadir una sombra y realizar otros cambios estilísticos. Pasa algún tiempo experimentando, para ver los efectos que puedes crear.
A continuación, tenemos que mostrar a los clientes potenciales lo que están comprando. En el Panel de Elementor, busca el widget Product Images (imágenes de producto) y arrástralo al lienzo de vista previa en vivo.

Make sure customers can see what theyre purchasing using the Product Images widget

¡Cada producto necesita una descripción! Quiero mostrar la descripción de mi producto junto con la imagen del producto, así que voy a añadir una segunda columna. Para añadir una columna, haz clic en la sección que contiene el widget Product Image. Esta sección ahora debe estar enmarcada en azul. A continuación, en la esquina superior izquierda de la sección, pulsa Control y haz clic en el icono Column (columna).

You can add more columns to any section by Control-clicking the sections Column icon

Selecciona Add New Column (añadir nueva columna). Ahora deberías tener una sección que conste de dos columnas.

Weve added a second column to our section

En el Panel de Elementor, busca el widget Product Data Tabs (pestañas de datos de producto) y arrástralo y suéltalo en la columna que acabas de crear.

You can display information about your product using Elementors Product Data Tabs widget

Ahora tenemos que añadir el precio. En el Panel de Elementor, busca el widget Product Price (precio del producto) y arrástralo y suéltalo sobre el lienzo.
De forma predeterminada, el widget Product Price está en el lado más pequeño, por lo que voy a ajustar el tamaño de su fuente. En el Panel de Elementor, selecciona la pestaña Style.
Busca Typography (tipografía) y haz clic en el icono Edit (Editar) que lo acompaña.
En la ventana emergente siguiente, aumenta el tamaño de la fuente.
El siguiente paso es la función Add to Cart (añadir al carrito). En el Panel de Elementor, busca Add to Cart y arrastra y suelta este widget en el lienzo.

Make sure visitors can purchase your products using the Add to Cart widget

A continuación, quiero añadir migas de pan para que los visitantes puedan ver las categorías y subcategorías a las que pertenece este producto, como Muebles, Electrónica o Jardinería. En el Panel de Elementor, toma el widget WooCommerce breadcrumbs y suéltalo sobre el lienzo.

Help visitors navigate your ecommerce store using the WooCommerce breadcrumbs widget

Por último, quiero animar a los visitantes a comprar artículos adicionales, mediante la creación de un área de productos relacionados. En el Panel de Elementor, toma el widget Product Related (producto relacionado) y suéltalo sobre el lienzo.

Estos son todos los widgets que estoy añadiendo a mi página de producto, pero es posible que desees añadir widgets adicionales, como los widgets Social Sharing (compartir en redes sociales) o Upsell que cubrimos anteriormente.

También puedes aplicar estilo a los widgets seleccionándolos en el lienzo y abriendo a continuación la pestaña Styles en el Panel de Elementor. Por último, puedes cambiar el diseño de la plantilla tomando cualquier widget del lienzo y soltándolo en una nueva ubicación.

Cuando estés satisfecho con tu plantilla, puedes publicarla seleccionando Publish > Include > Products > Save and Close (Publicar > Incluir > Productos > Guardar y cerrar). Cada página de producto de tu sitio web contará ahora con este nuevo diseño.

Puedes repetir este proceso para crear plantillas para cualquier página de comercio electrónico, o incluso diseñar un elemento que aparezca en toda tu tienda online, similar a la cabecera que creamos anteriormente. ¡Las posibilidades son infinitas!

Conclusión

En esta serie, cubrimos tres maneras en las que puedes construir una tienda WooCommerce usando Elementor. Si has estado siguiendo el tutorial, habrás creado varias plantillas de comercio electrónico, incluidos archivos de productos, páginas de productos y cabeceras. También deberías estar familiarizado con todos los widgets de comercio electrónico más importantes de Elementor.

Elementor Template Kits son colecciones temáticas de plantillas, incluyendo kits para comercio electrónico que están diseñados teniendo en cuenta específicamente las tiendas en línea.

Los kits de plantillas pueden evitar el esfuerzo que supone tener que diseñar y construir una tienda online. ¡Simplemente elige tu kit y aplica una plantilla a cada una de tus páginas para conseguir un sitio WooCommerce profesionalmente diseñado!