Comprar para mí: Combine Elementor y WooCommerce para una increíble tienda en línea

¿Busca abrir su primera tienda de WooCommerce? O tal vez haya creado tiendas de WooCommerce para los clientes, pero ¿desea construir tiendas de comercio electrónico mejor personalizadas? Tiene productos increíbles que apenas puede esperar para dar a sus clientes. Afortunadamente, puede estar abierto para los negocios en el menor tiempo. En esta publicación, discutiré cómo construir una tienda WooCommerce usando Elementor WooCommerce Builder. Él es un visual WordPress, arrastrando y drogado, que le brinda control total sobre su tienda y páginas de productos.
Las áreas que cubriré son:
¿Qué soy Elementary y WooCommerce?
Ventajas del uso de Elementor WooCommerce Builder
Configurar y configurar WooCommerce
Diseñe las páginas del archivo de su tienda
Diseñe una sola página de producto
Incluir productos de WooCommerce en otros modelos según sea necesario
Ya sea su primera tienda o quinto, descubrirá un flujo de trabajo más simple que elimina la necesidad de editar directamente los archivos de plantilla de WooCommerce o ensuciar sus manos con ganchos. Woo hoo!

Dev Man está bastante entusiasmado con su nueva tienda. Para comenzar las cosas, en caso de que no lo supieras (aunque no podrías?), Aquí hay una breve descripción de lo que soy elemental y wooCommerce.
Elementor es “el creador de páginas supremas y libres de WordPress”. Le permite crear un sitio web increíblemente hermoso de la manera más rápida posible. Puede alcanzar un alto nivel de diseño, proyectando en vivo en el front-end de su sitio de WordPress. Actualmente, es el único (y primero) generador de páginas delanteras que permite posibilidades de diseño ilimitadas. WooCommerce es un complemento gratuito de WordPress que incorpora capacidades comerciales electrónicas para su sitio para que pueda tener una tienda en línea. Integrarse fácilmente con su sitio existente de WordPress, lo que le permite crear tiendas personalizables en unos minutos, obtener pagos seguros, opciones de entrega configurables y más. El comercio electrónico almacena el complemento de elementos básicos gratuitos le permite diseñar su contenido de WordPress utilizando un visual, arrastre- Interfaz de caída. Puede usar widgets para agregar contenido a su sitio y controlar casi todos los aspectos de su diseño y estilos con Elementor Pro, luego obtener acceso a Elemoror WooCommerce Builder, que le permite crear plantillas dinámicas para el archivo de productos y páginas de productos individuales Usando el mismo editor visual. Con WooCommerce Builder, puede construir fácilmente una tienda WooCommerce totalmente personalizada, sin tener que trabajar directamente con los archivos de plantilla PHP o WooCommerce.
Ventajas de usar Elementor WooCommerce Builder
Diseño visual, arrastrar y soltar: puede diseñar su tienda WooCommerce exactamente como verán sus visitantes. Incluso puede obtener una vista previa de diferentes productos para ver cómo se ve su PHP/código. En lugar de trabajar directamente con los archivos. Php y/o plantilla, Puede diseñar todo desde la interfaz elemental.
Widgets dedicados de WooMoCommerce: recibirá widgets dedicados para incluir toda la información importante de WooCommerce, incluso hasta las ventas y productos relacionados.
Visualización condicional de la plantilla: puede crear tantos archivos de productos y plantillas únicas y puede usar reglas condicionales para controlar dónde se utiliza cada plantilla. Por ejemplo, puede crear un solo diseño de productos para los productos en “Categoría A” y otro para los productos en “Categoría B”.
Plantillas previas a la construcción: tiene acceso a archivos de productos previos a la construcción y plantillas únicas que puede personalizar para responder a sus necesidades o construir sus propios modelos desde cero.
¿Hay algo que no puedas diseñar con Elementor WooCommerce Builder? Puede usar Elementor WooCommerce Builder para diseñar su archivo único de productos y plantillas, que incluyen la mayor parte del contenido de su tienda.
Sin embargo, hay dos páginas de WooCommerce con las que no te ayuda en este momento:
Carrito de compras
Échale un vistazo
Puede usar Elementor para agregar contenido a la canasta de WooCommerce y el contenido de pago, pero no puede personalizar el contenido real en sí. Sin embargo, para controlar el diseño de la canasta y el contenido de pago, hay varias opciones. En primer lugar, puede usar un tema básico flexible, que se ajusta bien al Elementor, que le brinda, al mismo tiempo, la configuración para controlar su canasta y páginas de pago. Algunas buenas opciones aquí son: Astra
Océano
Generarpress
Nevé
En segundo lugar, si sabe cómo hacer CSS, puede agregar sus propios estilos para controlar su carrito de compras y páginas de pago.
Finalmente, puede usar un complemento que cambie el proceso de pago. Por ejemplo, el complemento Cartflows le permite construir un proceso de pago personalizado usando Elementor. Sin embargo, Cartflows es más adecuado para vender canales que las tiendas electrónicas “tradicionales”, por lo que no funcionará en todas las situaciones. También puede usar un complemento, como nuestro propio forminador, para crear un proceso de pago personalizado. Para diseñar su tienda con Elementor Pro y WooCommerce Builder.
Vamos paso a paso y creemos una tienda. Estos pasos de configuración básicos no representan el centro principal de este tutorial, por lo que no detallaremos demasiado. Pero generalmente querrás:
Instale y active el complemento gratuito de WooCommerce en wordpress.org.Lut El experto en configuración de WooCommerce para configurar los elementos básicos importantes.
Agregue sus productos.
Configure cualquier otra configuración relevante en el área de configuración de WooCommerce.
Si necesita ayuda para comenzar, se puede encontrar más información sobre cómo hacer esto aquí.
Cree las páginas del archivo de su tienda ahora, está listo para comenzar a construir su tienda, comenzando con la plantilla para los archivos del producto. La página del archivo del producto es la página que enumera todos sus productos de WooCommerce (o productos con una categoría, etiqueta, etc.). Para comenzar, vaya a plantillas> Builder de temas> Archivo de productos. Luego haga clic en Agregar un nuevo archivo de producto.
La plantilla para el generador de temas. Dale un nombre elegante y haga clic en Crear plantilla para continuar. Esto lo iniciará en la interfaz de diseño. Puede importar uno del archivo de productos prefabricados o puede cerrar la biblioteca de plantillas para construir su diseño desde cero.
Interfaz de diseño elemental. A partir de ahí, podrá diseñar su plantilla de archivo utilizando la interfaz visual, arrastrar y soltar. Puede usar los widgets dedicados al archivo del producto para agregar el contenido básico, como una lista de todos sus productos o el título de la página de archivo (por ejemplo, el nombre de la categoría).
Archivos de productos.
Editar uno de los widgets le permite controlar su apariencia y funcionalidad. Puede personalizar todo, desde evaluaciones de estrellas hasta insignias de ventas.

Edite los productos de los archivos.

Cuando haya terminado con el diseño, haga clic en el botón Publicar para controlar cuando use la plantilla. Tenga cinco condiciones de visualización que puede combinar según sea necesario:

Todos los archivos de productos
Página de la tienda


Resultados de la búsqueda
Categorías de Producto
Etiquetas de productos
Por ejemplo, para mostrar la plantilla solo en la página principal de la tienda, elija la página de la tienda. Para ciertas condiciones, recibirá opciones adicionales. Un ejemplo a este respecto es que, si selecciona categorías de productos, puede dirigir la plantilla a todas las páginas de archivo de categorías de productos o solo a una determinada categoría (o conjunto de categorías).
Establezca condiciones para mostrar la plantilla en su sitio. Estas condiciones de visualización son útiles porque le permiten crear cuántas plantillas únicas necesita para presentar todos los diferentes productos que vende. A veces, un enfoque universal no es la mejor solución. WooCommerce Builder facilita la creación de nuevas plantillas sin tener que trabajar directamente con los archivos de plantilla PHP. Una plantilla de producto WooCommerce para productos individuales. Para comenzar, vaya a plantillas> Creador de productos único. Luego haga clic en el botón Agregar un nuevo producto y dale un nombre. Al igual que con el diseño del archivo del producto, tendrá la opción de importar una de las plantillas prefabricadas o crear su propia plantilla de producto desde cero.
Página con productos únicos. Ahora, recibirá otro conjunto de widgets dedicados para toda la información en la página de producto único, incluido todo, desde el título del producto hasta productos conectados y ventas adicionales.
Ingresar la configuración para uno de los widgets le permite configurar su estilo y ubicación.
Configurar la configuración del widget en la página de su producto.
Por defecto, Elementor presentará uno de sus productos reales para la vista previa en vivo de su diseño. Pero si prefiere ver cómo se ve su diseño. Haga clic en el icono de la rueda en la esquina inferior izquierda y edite la vista previa de configuración para usar cualquier producto en tu tienda.

Vista previa de su diseño antes de ser transmitido.

Después de haber terminado, haga clic en el botón Publicar para elegir dónde aplicar esta plantilla de producto única. Aquí tendrás otras cinco opciones:

Todos los productos
En la categoría

En la categoría de niño
En la etiqueta

Productos del autor
Para las últimas opciones, podrá elegir ciertos elementos que se apliquen a esa condición (por ejemplo, una determinada categoría).
Puede establecer condiciones muy específicas para mostrar plantillas.
Como en el caso de las plantillas de archivo de productos, puede repetir el proceso siempre que sea necesario, para asegurarse de que cada tipo de producto tenga un diseño optimizado para un solo producto. Incluya productos de WooCommerce en otros modelos, ya que es necesario más allá de permitirle permitirle. Para diseñar su archivo único de producto y plantilla, Elementor Pro también ofrece widgets de WooCommerce dedicados que puede usar en otros modelos. Por ejemplo, puede usarlos para presentar productos en una publicación de blog que escriba. Puede acceder a estos widgets en cualquier momento en la sección WooCommerce de la interfaz Elementor. Acceda y edite fácilmente los widgets de su sitio en cualquier momento.
Si desea mostrar productos, puede crear sus propias consultas personalizadas para controlar qué productos mostrar. Incluso puede usar la función Elementor PopUp Builder incluida para incluir o promocionar productos en una ventana emergente. Por ejemplo, puede anunciar una oferta especial e incluir un botón de adición en la canasta directamente en la ventana emergente.
Ejemplo de oferta o promoción especial. Es una característica excelente para promover ofertas y promociones especiales. Como puede ver, es un proceso simple. En lugar de trabajar con ganchos o archivos de plantilla, puede usar una interfaz visual, de drag-by-drop. Obtenga widgets dedicados para mostrar información importante de productos de WooCommerce y también puede usar reglas de visualización condicional para crear tantos plantillas de archivos y productos únicos. Su brillo, consulte nuestro artículo sobre 8 artículos obligatorios cuando agrega comercio electrónico en su sitio web de WordPress. Además, si compra WordPress adicional, ofrecemos alojamiento dedicado, administración del sitio y asistencia las 24 horas, los 7 días de la semana. Entonces, comience hoy y construya su propia tienda de WooCommerce personalizada. Luego devuelva ese letrero a “Abrir” y comience a vender sus increíbles productos. ¿Ha abierto una tienda en línea usando WooCommerce y Elementor? Si es así, ¿cuál fue su experiencia? ¡Dinos en los comentarios!