7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Personaliza tu Tienda Online WooCommerce con Kits de Plantillas para Elementor

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.
WooCommerce generates a Product Archive page automatically you can customize this page using ElementorWooCommerce generates a Product Archive page automatically you can customize this page using ElementorWooCommerce generates a Product Archive page automatically you can customize this page using Elementor
Personaliza tu tienda online fácilmente
  • ¡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.
A product page created with a completely custom Elementor Pro templateA product page created with a completely custom Elementor Pro templateA product page created with a completely custom Elementor Pro template
Crea tu tienda virtual con plantillas para Elementor

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.

Elementor Template KitsElementor Template KitsElementor Template Kits
Existe un kit de Elementor WooCommerce perfecto para tu Tienda Online.

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.

Shoppix template kit Shoppix template kit Shoppix template kit
Las plantillas para Elementor transforman tu tienda en línea.

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.

The Elementor editor will now display your chosen templateThe Elementor editor will now display your chosen templateThe Elementor editor will now display your chosen template
El editor mostrará ahora tus plantillas para 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.
You can add social sharing buttons to your product listing using the Share Buttons widgetYou can add social sharing buttons to your product listing using the Share Buttons widgetYou can add social sharing buttons to your product listing using the Share Buttons widget
Puedes agregar botones para compartir en redes sociales con el plugin WooCommerce
  • 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.
Elementor Pro supports a long list of social media networks including Tumblr Digg and SkypeElementor Pro supports a long list of social media networks including Tumblr Digg and SkypeElementor Pro supports a long list of social media networks including Tumblr Digg and Skype
Elementor Pro admite una larga lista de redes sociales en tu tienda virtual
  • 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.
You can style your social sharing buttons using Elementors Style tabYou can style your social sharing buttons using Elementors Style tabYou can style your social sharing buttons using Elementors Style tab
Dale estilo a tus botones para compartir redes sociales en Elementor WooCommerce.

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.

You can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widgetYou can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widgetYou can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widget
Puedes personalizar tus plantillas para Elementor predeterminadas.

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.

Elementors Custom Add to Cart widget can display an optional Quantity text box Elementors Custom Add to Cart widget can display an optional Quantity text box Elementors Custom Add to Cart widget can display an optional Quantity text box
El widget Add to Cart puede mostrar opcionalmente una cantidad en tu tienda en línea.
  • 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.
You can boost your revenue using WordPress Linked Products feature You can boost your revenue using WordPress Linked Products feature You can boost your revenue using WordPress Linked Products feature
Puedes impulsar tus ingresos usando productos vinculados en WooCommerce Elementor.
  • 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!

Whenever you view product WordPress will now display a You may also like sectionWhenever you view product WordPress will now display a You may also like sectionWhenever you view product WordPress will now display a You may also like section
Cuando veas un producto en tu tienda en línea ahora mostrará productos vinculados.

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.

In this section well add a header to our online storeIn this section well add a header to our online storeIn this section well add a header to our online store
En esta sección agregaremos un encabezado a tu tienda online.

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
You can add your contact details using Elementors Icon List widgetYou can add your contact details using Elementors Icon List widgetYou can add your contact details using Elementors Icon List widget
Agrega tus datos de contacto usando plantillas para Elementor.
  • 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.
You can add links to your websites header using the Icon List widgetYou can add links to your websites header using the Icon List widgetYou can add links to your websites header using the Icon List widget
Agrega enlaces al encabezado de tu tienda online.
  • 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.

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  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  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
Agrega fácilmente un formulario de contacto a tu tienda virtual.

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.

Click Publish  Entire Site  Save  Close and your header will appear across your ecommerce websiteClick Publish  Entire Site  Save  Close and your header will appear across your ecommerce websiteClick Publish  Entire Site  Save  Close and your header will appear across your ecommerce website
Tu encabezado aparecerá en tu sitio WooCommerce Elementor

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. 
Make sure customers can see what theyre purchasing using the Product Images widgetMake sure customers can see what theyre purchasing using the Product Images widgetMake sure customers can see what theyre purchasing using the Product Images widget
Asegúrate que tus clientes puedan ver sus compras en tu tienda en línea.

¡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.

You can add more columns to any section by Control-clicking the sections Column icon You can add more columns to any section by Control-clicking the sections Column icon You can add more columns to any section by Control-clicking the sections Column icon
Añade nuevas columnas a tu tienda WooCoommerce.
  • Selecciona Add New Column (añadir nueva columna). Ahora deberías tener una sección que conste de dos columnas.
Weve added a second column to our sectionWeve added a second column to our sectionWeve added a second column to our section
Agregamos otra columna a nuestra tienda en línea.
  • 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.
You can display information about your product using Elementors Product Data Tabs widgetYou can display information about your product using Elementors Product Data Tabs widgetYou can display information about your product using Elementors Product Data Tabs widget
Muestra información de tu producto usando el plugin WooCommerce.
  • 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.
Make sure visitors can purchase your products using the Add to Cart widget Make sure visitors can purchase your products using the Add to Cart widget Make sure visitors can purchase your products using the Add to Cart widget
Asegúrate que tus visitantes compren tus productos en tu tienda en línea.

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.

Help visitors navigate your ecommerce store using the WooCommerce breadcrumbs widgetHelp visitors navigate your ecommerce store using the WooCommerce breadcrumbs widgetHelp visitors navigate your ecommerce store using the WooCommerce breadcrumbs widget
Ayuda a tus visitantes navegar por tu tienda WooCommerce.

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.

Elementor Template KitsElementor Template KitsElementor Template Kits
Kits de Plantillas para Elementor.

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.