Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Cómo elaborar una tienda WooCommerce con Elementor

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Elementor y WooCommerce facilitan la creación de una tienda online. En este tutorial, te mostraré cómo utilizar WooCommerce, WordPress y Elementor para elaborar una completa tienda online con productos, categorías y un menú desplegable al estilo de Amazon.

¿Por qué WooCommerce?

WordPress es una de las plataformas de blogging más populares, pero un sinfín de negocios también usan WordPress para vender sus productos y servicios.

Con una pequeña ayuda del plugin de comercio electrónico de WooCommerce, puedes utilizar WordPress para vender mercancía digital y física y aceptar pagos mediante pasarelas populares como PayPal y Stripe.

Hoy en día, el 29% de los sitios web que figuran en la lista de los mejores sitios del número uno hasta un millón utilizan WooCommerce y grandes nombres como los All Blacks, L.A. Weekly y AeroPress depositan su confianza en este popular plugin de comercio electrónico para WordPress.

Mientras que WordPress y WooCommerce proporcionan todo lo que necesitas para lanzar una exitosa tienda de comercio electrónico, podrías querer tener mayor control sobre cómo luce tu tienda.

En este serie de dos partes, te mostraré cómo elaborar una tienda online profesionalmente diseñada usando WordPress, WooCommerce y Elementor.

En este artículo, configuraremos Elementor y WooCommerce y crearemos una tienda online completa con productos, categorías y un menú desplegable del estilo de Amazon. Luego, en el siguiente artículo, rediseñaremos el archivo de productos y las páginas de productos de WooCommerce, usando tu elección de kits de plantillas para Elementor de Envato Elements.

Al finalizar este tutorial, estarás listo para publicar una tienda de comercio electrónico diseñada profesionalmente.

Lo que crearás

Elementor es una herramienta flexible que te brinda varias maneras de diseñar tu tienda de comercio electrónico. Podrías usar una de las plantillas integradas en Elementor Pro, cargar plantillas adicionales de terceros o incluso crear tu propia plantilla desde cero. ¡Cubriremos las tres opciones en esta serie!

Al finalizar este tutorial, habrás creado una página de productos y archivo de productos a tu gusto, usando las plantillas incluidas en Elementor Pro.

Navigate to any product to see your new design in actionNavigate to any product to see your new design in actionNavigate to any product to see your new design in action

La página de productos y de archivo de productos son dos páginas que WooCommerce genera automáticamente pero el diseño del inventario deberá adaptarse para cumplir con la marca y características de tu tienda. Te mostraré cómo personalizar rápida y fácilmente estas páginas predeterminadas usando las plantillas integradas en Elementor Pro.

En el artículo siguiente, usaremos una colección de plantillas con una temática para crear páginas de productos originales, un archivo de productos y un encabezado temático que aparezca en toda tu tienda de comercio electrónico.

Si tienes alguna idea, entonces también te mostraré cómo materializarla creando tu propia plantilla de Elementor.

Elementor: elabora una tienda de comercio electrónico sin ningún código

El primer paso es añadir Elementor a tu sitio web de WordPress.

El plugin principal de Elementor es de descarga gratuita y proporciona acceso a más de 40 widgets y más de 30 plantillas. Sin embargo, ya que estamos trabajando con WooCommerce, necesitarás invertir en una suscripción a Elementor Pro.

A diferencia de la versión gratuita de Elementor, Elementor Pro ofrece un constructor de WooCommerce dedicado, además de algunos widgets importantes con temática de comercio electrónico como Agregar al carrito, calificación del producto y productos relacionados.

Si quieres utilizar solo el plugin gratuito de Elementor, entonces este tutorial te ayudará a dominar la interfaz de usuario de Elementor y sus flujos de trabajo principales que necesitarás para crear páginas, sitios web, blogs y tiendas online bellamente diseñadas. Sin embargo, requerirás de una suscripción a Elementor Pro para completar todas las secciones de este tutorial.

Cómo añadir Elementor a tu sitio web de WordPress

Elementor Pro requiere de versión gratuita de Elementor. Si todavía no has instalado este plugin, entonces necesitarás agregarlo a tu sitio web:

  • Inicia sesión en tu cuenta de WordPress si no lo has hecho.
  • En el menú de la izquierda, selecciona Plugins > Añadir nuevo.
  • Busca el plugin Elementor.
  • Cuando aparezca el plugin, selecciona Instalar ahora > Activar.

Ahora podemos subir de nivel a Elementor Pro:

  • Dirígete al sitio web de Elementor y compra Elementor Pro, si no lo has hecho. Deberías recibir un correo de confirmación de la compra.
  • En el sitio web de Elementor, inicia sesión con tu cuenta usando los detalles incluidos en tu correo electrónico de confirmación.
  • Selecciona descargar plugin y Elementor Pro se descargará como un archivo ZIP.
  • Inicia sesión en tu sitio web de WordPress.
  • En el menú de la izquierda, selecciona Plugins > cargar plugin.
  • Haz clic en elegir archivo y luego selecciona el archivo ZIP que acabas de descargar.
  • Selecciona Instalar ahora > Activar.
  • Cuando se te pida, haz clic en Conectar y activar y sigue las instrucciones que aparecen para activar tu licencia de Elementor Pro.

¡Elementor Pro ahora está listo para usarse!

WooCommerce: cómo instalar el plugin gratuito de comercio electrónico de WordPress

A continuación, te mostraré cómo diseñar, elaborar y lanzar una tienda de comercio electrónico usando Elementor y WooCommerce.

Si no has añadido el plugin gratuito de WooCommerce a tu sitio web, entonces ahora es el momento:

  • Inicia sesión en tu sitio web de WordPress.
  • Dirígete a Plugins > Añadir nuevo.
  • Busca WooCommerce. Cuando este plugin aparezca, selecciona Instalar ahora > Activar.
  • Ahora deberías ver en la pantalla Bienvenido a WooCommerce; haz clic en Sí por favor para iniciar el proceso de configuración.
  • En la pantalla siguiente, ingresa tu dirección de correo y luego haz clic en Continuar.
  • WooCommerce ahora te formulará algunas preguntas sobre tu industria y productos y si ya cuentas con una tienda online o física.

Después de responder todas las preguntas de WooCommerce, puedes elegir un tema para tu tienda online. Personalizaremos nuestra tienda usando Elementor, así que solo selecciona cualquier tema gratuito y haz clic en Continuar.

Ahora se te pedirá activar el plugin de Jetpack y servicios de WooCommerce. Este plugin te ayudará a proteger tu sitio web contra ataques y también mejorar el rendimiento, así que se recomienda activar Jetpack a menos que tengas una razón específica para no hacerlo.

¡Felicidades, acabas de instalar con éxito WooCommerce!

WooCommerce tiene muchas configuraciones, incluyendo algunas esenciales para dirigir exitosamente una tienda online, como especificar si aceptas PayPal, Stripe o transferencia bancaria.

La configuración de tu tienda WooCommerce rebasa el alcance de este tutorial, pero puedes explorar todos los ajustes seleccionando WooCommerce > Ajustes del menú que aparece a la izquierda en WordPress.

Para ayuda adicional, también podrías querer consultar nuestro curso gratuito Guía del principiante para el uso de WooCommerce, o nuestra serie Comenzando con WooCommerce.

Llena esos estantes: creando tu primer producto de WooCommerce

En este tutorial, crearemos varios diseños, así que es importante probarlos según los vas realizando.

Si ya tienes un catálogo de productos de WooCommerce, entonces puedes usar estos productos para ver exactamente cómo lucirá tu tienda una vez que ya tenga los productos. Sin embargo, si estás creando tu primera tienda, entonces te recomendaría tomar unos minutos para crear algunos productos que puedes utilizar en tus diseños.

Para crear un producto, selecciona Productos > Añadir nuevo desde el menú de la izquierda en WordPress.

Ahora puedes abrir el menú desplegable de Datos del producto y especificar la clase de producto que quieres crear:

  • Producto sencillo. Es cualquier producto que es enviado y no tiene opciones.
  • Producto combinado. Esta es una colección de productos relacionados que caen en la categoría de producto sencillo.
  • Producto externo/afiliado. Este es un producto que se vende en cualquier otro lado, pero se presenta en tu sitio web.
  • Producto variable. Este es un producto que tiene variantes, como una chaqueta disponible en diferentes tamaños y colores.

Para los fines de este tutorial, crearé un Producto sencillo:

  • Dale un nombre a tu producto y escribe una breve descripción.

Ahora puedes asignar este producto a una categoría de producto. Por ejemplo, si estás creando una tienda de ropa, entonces tus categorías podrían incluir Sudaderas con capucha y sudaderas sencillas, ropa casual y zapatos y botas. Asumiendo que quieres crear una nueva categoría, desplázate hasta la sección de Categorías de productos y selecciona Añadir nueva categoría.

You can assign WooCommerce products to multiple product categoriesYou can assign WooCommerce products to multiple product categoriesYou can assign WooCommerce products to multiple product categories
  • Dale un nombre a tu categoría y luego haz clic en Añadir nueva categoría.
  • En la sección de Categorías de productos, selecciona la categoría que acabas de crear.

¿Ya sabes todas las categorías que quieres presentar en tu sitio web? Puedes implementar todas estas categorías por anticipado repitiendo los pasos mencionados anteriormente. También podrías querer separar tus categorías en padre e hijo. Por ejemplo, voy a crear una categoría padre Cocina y la asignaré a las siguientes categorías hijo: Banqueta para barra, Sillas para comedor y Sillas para cocina.

Im creating a Kitchen parent category and assigning it the following child categories Bar stools Dining chairs and Kitchen stoolsIm creating a Kitchen parent category and assigning it the following child categories Bar stools Dining chairs and Kitchen stoolsIm creating a Kitchen parent category and assigning it the following child categories Bar stools Dining chairs and Kitchen stools
  • En Etiquetas de producto, introduce todas las etiquetas que quieres usar y luego haz clic en Añadir.
  • En seguida, agrega una imagen destacada desplazándote a la Imagen del producto y luego seleccionando Establecer imagen del producto.
  • Elige la imagen que mejor represente a tu producto.

¿Tienes múltiples imágenes que quieres usar para este producto particular? Puedes crear una galería de productos desplazándote a la sección de Galería de producto, seleccionando Añadir imágenes a galería de producto y eligiendo las imágenes que quieres usar.

  • En la sección de Datos del producto, asegúrate de que esté seleccionado General.
To test your Elementor layouts youll need to create at least one product To test your Elementor layouts youll need to create at least one product To test your Elementor layouts youll need to create at least one product
  • En Precio regular, introduce el costo de este producto.
  • A continuación, selecciona la pestaña Inventario.
  • En SKU, introduce el código de producto, que es el número que utilizarás para rastrear este producto en tu inventario.
  • Selecciona la casilla de verificación Habilitar administración de inventario a nivel de producto.
Find the Manage stock checkbox and click to select Find the Manage stock checkbox and click to select Find the Manage stock checkbox and click to select
  • En Cantidad de inventario, introduce el número de unidades que tienes en existencia actualmente.
  • WooCommerce puede enviarte un correo electrónico cuando tienes poco inventario. Si quieres recibir estas notificaciones de inventario bajo, entonces introduce el valor deseado en Umbral de inventario bajo. Ahora recibirás un correo electrónico tan pronto como tu inventario llegue a este umbral.
  • En el menú de la izquierda, selecciona Envío.
  • En Peso, introduce el peso del producto.
  • En Dimensiones, introduce la longitud, la anchura y el peso del producto.
  • Cuando estés satisfecho con la información que ingresaste, haz clic en Publicar.

Para ver el producto que acabas de crear, selecciona Ver producto.

Ive created a simple WooCommerce product using the Single Product settingsIve created a simple WooCommerce product using the Single Product settingsIve created a simple WooCommerce product using the Single Product settings

Repite el proceso para crear múltiples productos. Para poner a prueba verdaderamente tus diseños, deberías intentar crear una variedad de productos, abarcando múltiples categorías.

Organiza tu tienda con categorías de productos

Después de crear todos tus productos, vale la pena que te tomes unos minutos para revisar tus categorías de productos.

Al tomar tomar inventario de todas las categorías que has creado, puedes identificar cualquier categoría que necesites agrupando en una categoría padre o podrías darte cuenta que olvidaste crear algunas categorías importantes.

Para revisar tus categorías, selecciona Producto > Categorías desde el menú de la izquierda en WordPress.

Ya he creado una categoría padre Cocina que presenta mis Banqueta para barra, Sillas para comedor y Sillas para cocina para categorías hijo, pero ahora voy a crear algunas categorías padre adicionales: Oficina, Habitación, Sala, y Jardín.

Para crear una categoría padre:

  • En Agregar nueva categoría, introduce el nombre de la categoría padre que quieres crear.

At this point you may want to review the parent and child categories that youve created At this point you may want to review the parent and child categories that youve created At this point you may want to review the parent and child categories that youve created
  • Asegúrate de que la Categoría padre esté establecida en Ninguna.
  • Haz clic en Agregar nueva categoría.
  • Encuentra la primera categoría hijo que quieres asignar a esta categoría padre y luego selecciona el enlace de Edición que acompaña a hijo.
  • Abre el menú desplegable de la Categoría padre y selecciona la categoría padre que acabas de crear.
You can assign any WooCommerce child category to a parent category You can assign any WooCommerce child category to a parent category You can assign any WooCommerce child category to a parent category
  • Haz clic en Actualizar.

Repite e proceso para cada categoría hijo que quieres asignar y cada categoría padre que quieres crear.

Creando un menú de productos estilo Amazon

A continuación, voy a darles a los clientes la posibilidad de filtrar productos basados en la categoría de producto. En esta sección, crearemos un menú desplegable, donde seleccionando una categoría de adultos muestre todas las categorías hijo asociadas con ese padre.

Help visitors explore your online store with an Amazon-style dropdown menuHelp visitors explore your online store with an Amazon-style dropdown menuHelp visitors explore your online store with an Amazon-style dropdown menu

Esta clase de menú de productos padre/hijo es un elemento básico de cualquier sitio de comercio electrónico, incluyendo pesos pesados como eBay y Amazon. Añadiendo esta clase de menú de productos a tu sitio de comercio electrónico, puedes darles a tus visitantes una manera familiar para explorar todo lo que ofrece tu tienda.

Por defecto, no es posible añadir categorías de producto a un menú de WordPress. Antes de crear nuestro menú, necesitamos editar estos ajustes predeterminados:

  • En el menú de la izquierda en WordPress, selecciona Apariencia > Menús.
  • Hacia la parte superior de la pantalla, encuentra la sección Opciones de pantalla y haz clic en expandir.
  • Encuentra Categorías de productos y selecciónalas.

Ahora puedes añadir categorías de productos a tus menús, así que vamos a crear nuestro menú:

  • Dale un nombre a tu menú y luego haz clic en Crear nuevo menú.
  • Haz clic para expandir la sección Categorías de productos.
You can add product categories to your WordPress dropdown menuYou can add product categories to your WordPress dropdown menuYou can add product categories to your WordPress dropdown menu
  • Selecciona todas las categorías de productos que quieres agregar a tu menú.
  • Haz clic en Añadir al menú. Todas las categorías seleccionadas de padre e hijo ahora se agregarán a la sección de Estructura de menú.
  • Ya que estamos creando un menú desplegable necesitas tomar cada categoría hijo y dejarla debajo de su categoría padre asociada.
  • En seguida, toma cada categoría de hijo y arrástrala ligeramente a la derecha, para que aparezca que está con una indentación debajo de su padre. Suelta la categoría hijo y ahora debería estar permanentemente indentada. 
  • Repite este proceso de indentación para cada categoría hijo.
Drag categories to the right to create an indented effect Drag categories to the right to create an indented effect Drag categories to the right to create an indented effect
  • Si quieres cambiar donde aparece un artículo en tu menú, entonces tómalo en Estructura de menú y suéltalo en una nueva ubicación.
  • Cuando estés satisfecho con la manera en que está configurado tu menú, haz clic en Guardar menú.
  • Para colocar este menú en tu sitio web, haz clic en la pestaña Administrar ubicaciones.
  • Asumiendo que quieres que este menú aparezca en todo tu sitio web, abre el desplegable Menú superior y selecciona el menú que acabas de crear.
  • Haz clic en Guardar cambios.

Este menú padre/hijo ahora aparecerá en toda tu tienda de comercio electrónico, facilitando a tus clientes explorar tus categorías de productos.

Diseñando una tienda de WooCommerce con Elementor Pro

En este punto, tienes todos los elementos que necesitas para una exitosa tienda de comercio electrónico: una instalación de WooCommerce, algunos productos y un menú que los visitantes pueden utilizar para explorar tu tienda.

Sin embargo, hay una parte final de la configuración que necesitamos realizar. Por defecto, únicamente puedes usar Elementor para diseñar publicaciones y páginas y no productos.

Antes que pasemos a la siguiente sección, necesitamos extender las capacidades de Elementor para incluir productos de WooCommerce:

  • En el menú de la izquierda en WordPress, selecciona Elementor > Ajustes.
  • En Tipos de publicación, selecciona Productos.
Give Elementor access to your Products post typesGive Elementor access to your Products post typesGive Elementor access to your Products post types
  • Selecciona Guardar cambios.

Ahora puedes usar Elementor para diseñar páginas de productos personalizadas, así que ¡comencemos!

Usando plantillas de Elementor listas para usarse

Elementor proporciona una variedad de plantillas que pueden darle a tu sitio web una apariencia y sensación completamente nuevas y en ocasiones incluso añaden funcionalidad. Estas plantillas diseñadas profesionalmente pueden ahorrar mucho del trabajo que conlleva la creación de una tienda de comercio electrónico, así que comencemos a explorarlas.

En esta sección, te mostraré cómo personalizar dos páginas que WooCommerce crea de manera automática: tu archivo de productos y páginas de productos.

Rediseñando la página de producto sencillo de WooCommerce

Las páginas de productos son la manera en que los visitantes ven y a la postre compran tus productos, así que es vital que luzcan bien y proporcionen toda la funcionalidad que necesitan tus clientes.

Elementor Pro tiene una gama de plantillas de páginas de productos, así que utilízalas adecuadamente:

  • En el menú de la izquierda en WordPress, selecciona Plantillas > Constructor de tema.
  • Selecciona el botón Añadir nuevo.
  • Abre el menú desplegable Tipo de plantilla y selecciona Producto sencillo.
  • Dale un nombre a tu plantilla y luego haz clic en Crear plantilla.
  • Elementor Pro ahora desplegará todas las plantillas de Producto sencillo; selecciona la plantilla que quieres usar.
Elementor Pro provides a range of professionally-designed single product pages that you can use in your WooCommerce store Elementor Pro provides a range of professionally-designed single product pages that you can use in your WooCommerce store Elementor Pro provides a range of professionally-designed single product pages that you can use in your WooCommerce store

Esta plantilla ahora se abrirá en el editor de Elementor. En este punto puedes realizar cambios a tu plantilla elegida, pero por ahora solo continúa y publica la plantilla seleccionada:

  • En el panel de Elementor, selecciona Publicar.
  • En la ventana emergente siguiente, abre el menú desplegable Incluir y asegúrate de que este seleccionado Productos.
Youll need to apply your chosen single product template to all of your Product pagesYoull need to apply your chosen single product template to all of your Product pagesYoull need to apply your chosen single product template to all of your Product pages
  • Haz clic en Guardar y cerrar.

Esta plantilla ahora será incluida en todas tus páginas de productos.

Creando un archivo de productos de WooCommerce personalizado

El archivo de productos es una lista que contiene todos tus productos en una sola ubicación. Cuando configuraste WooCommerce, este plugin añadió un archivo de producto a tu sitio web automáticamente, aunque la apariencia y la sensación del archivo variarán dependiendo de tu tema de WordPress.

You can also use Elementor to re-design your Product Archive page which WooCommerce creates automatically You can also use Elementor to re-design your Product Archive page which WooCommerce creates automatically You can also use Elementor to re-design your Product Archive page which WooCommerce creates automatically

¿No te gusta este archivo de producto generado automáticamente? Puedes modificarlo rápida y fácilmente, usando cualquiera de las plantillas de archivo de productos de Elementor:

  • En el menú de la izquierda en WordPress, selecciona Plantillas > Constructor de tema.
  • Selecciona el botón Añadir nuevo.
  • Abre el menú desplegable Tipo de plantilla y selecciona Archivo de productos.
  • Dale un nombre a tu plantilla y luego haz clic en Crear plantilla.

Elementor Pro ahora desplegará todas las plantillas de Archivo de productos disponibles; selecciona la plantilla que quieres usar.

If youre using Elementor Pro then youll have access to a range of professionally-designed Product Archive templatesIf youre using Elementor Pro then youll have access to a range of professionally-designed Product Archive templatesIf youre using Elementor Pro then youll have access to a range of professionally-designed Product Archive templates
  • Tu plantilla elegida ahora se abrirá en el editor de Elementor.
  • Si estás satisfecho con tu plantilla elegida, entonces puedes publicarla haciendo clic en el botón verde Publicar.
  • En la ventana emergente, abre el menú desplegable Incluir y selecciona Todos los Archivos de productos.
  • Haz clic en Guardar y cerrar.

Este archivo de productos actualizado ahora aparecerá en tu sitio web.

Conclusión

En este artículo, creamos una tienda online completa. Este sitio de WooCommerce tiene todo lo que necesitas para comenzar a vender productos, y que se incluirá en tus plantillas elegidas de Elementor Pro diseñadas profesionalmente.

Si no estás completamente satisfecho con la apariencia y la sensación de tu sitio, entonces ¿por qué no pruebas otra plantilla de Elementor Pro? O podrías consultar nuestro siguiente artículo, donde te mostraré cómo utilizar los Kits de plantillas para Elementor, y cómo crear tu propia plantilla desde cero.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.