Beaver Builder WooCommerce Integration 2024: ¿cómo usar Beaver Builder para crear páginas de productos y tiendas de WooCommerce?

Puede ser emocionante crear una tienda en línea. Contribuye al éxito de su negocio tener un gran escaparate. Sin embargo, si desea diseñar una tienda que funcione bien, es posible que tenga dificultades.

Se puede crear un sitio de comercio electrónico que sea agradable tanto para usted como para sus clientes con la ayuda de un creador de páginas de WooCommerce. Echemos un vistazo a la WooCommerce enchufar. Nuestro siguiente paso será demostrar lo fácil que es crear tu tienda online con Beaver Builder. ¡Vamos, empecemos!

constructor de castores

Una breve introducción a WooCommerce

Con WooCommerce, puedes añadir funcionalidad de comercio electrónico a su sitio de WordPress para que pueda vender sus productos en línea:

Además, se encontrará en buena compañía, ya que se prevé que WooCommerce tenga una participación de mercado de alrededor del 28 por ciento para 2020.

WooCommerce es una solución de código abierto altamente personalizable, al igual que WordPress. Con él, puede configurar pasarelas de pago y diferentes opciones de envío, y comenzar con su imperio de comercio electrónico de inmediato.

Con WooCommerce, también puede crear, editar y administrar sus productos:

El uso de complementos adicionales de WooCommerce le brinda acceso a muchas otras funciones.  

Creación de páginas de productos y tiendas de WooCommerce con Beaver Builder (en 4 sencillos pasos)

Sin embargo, antes de que pueda familiarizarse con las funciones de WooCommerce, primero necesita un sitio web para iniciar. Comience instalando y activando los complementos de WordPress WooCommerce, Beaver Builder y Beaver Themer. Ahora está listo para crear sus páginas de producto y tienda.

Paso 1: Crea tu tienda agregando productos

Cree listados para sus productos como el primer paso para configurar su tienda. Cuando usa WooCommerce, puede vender productos físicos, productos digitales y artículos con variaciones (como tamaño y color).

Puede instalar un conjunto de productos de muestra proporcionado por WooCommerce para tener una idea de cómo funciona el sistema con diferentes tipos de artículos si es nuevo en WooCommerce. Aquí se explican varias características del producto WooCommerce, incluidas las opciones de variación y venta.

Aprenderá a crear un producto básico, si desea comenzar desde cero. No importa lo que planee vender, las otras secciones de esta publicación lo beneficiarán.

Cree un nuevo producto en su tablero de WordPress. Seleccione Productos > Agregar nuevo en el menú de la izquierda. Complete los siguientes campos para el artículo que desea agregar a su tienda:

Puede configurar la mayoría de los parámetros importantes para su artículo desplazándose hacia abajo hasta el panel de datos del producto, incluidos los precios, los impuestos y el envío. En WooCommerce, tiene la opción de incluir impuestos y opciones de envío para los productos, que se pueden anular de forma individual.

Decide si tu producto es descargable o virtual en la configuración general. Mantenga las casillas sin marcar si el producto es físico:

Además de la gestión de inventario, puede comenzar. La conexión de productos le brinda la opción de realizar ventas cruzadas y adicionales.

También puede agregar una segunda descripción más breve de su artículo en el campo Descripción breve del producto, debajo del panel de datos del producto. Los listados de tiendas suelen contener esta información.

Verá categorías de productos y etiquetas a la derecha de su pantalla. Estos son algunos organizadores útiles:

Su lista de productos debe incluir una imagen o dos. Están disponibles las siguientes opciones: imágenes individuales o grupos de imágenes:

Puede cargar una foto desde su dispositivo o agregar una imagen desde su biblioteca multimedia. De la misma manera, puede agregar imágenes a las galerías de productos. Las imágenes se pueden simplemente arrastrar y soltar para reordenarlas.

Paso 2: diseñar nuevas páginas de productos

Para mostrar sus productos, puede crear páginas de productos. El video tutorial de Beaver Themer proporciona instrucciones paso a paso sobre cómo personalizar las páginas de un solo producto de WooCommerce. 

Beaver Themer es una poderosa herramienta para convertir Beaver Builder en un generador de páginas de WooCommerce. Puede aplicar plantillas a todo su sitio con este complemento.  

 Haga clic en Diseños de temas > Agregar nuevo en Beaver Builder:

Agregar un diseño temático con la configuración del producto para ayudarlo a actuar como un creador de páginas de WooCommerce.

Su diseño debe tener un título. Debe seleccionar su diseño y tipo antes de hacer clic en el botón Agregar diseño Themer.

Continúe asegurándose de que el nuevo diseño se aplique a cada página de producto a medida que avanza a la página siguiente. En el segundo cuadro, elija Todos los productos en Ubicación, luego seleccione Producto:

La configuración correcta de diseño de Themer para usar Beaver Themer como un creador de páginas de WooCommerce.

Puede editar su diseño con Beaver Builder después de guardar su trabajo. Comenzando en la esquina superior derecha, haga clic en el signo más azul. Una vez que haya hecho clic en Plantillas, haga clic en Nuevo:

La ubicación de la plantilla del producto WooCommerce en Beaver Thermer.

Reemplace el diseño existente seleccionando Producto > Reemplazar diseño existente. Ya existen algunos valores predeterminados útiles, que convierten su plantilla en una página de producto:

Plantilla de producto predeterminada de Beaver Builder

Es posible agregar o eliminar módulos de WooCommerce de su diseño básico una vez que lo tenga. Se puede acceder a los módulos de WooCommerce a través de Módulos > Módulos temáticos > WooCommerce. Además de las calificaciones de los productos, las descripciones, las ventas adicionales y muchos otros, tendrá muchas opciones:

Usando módulos de WooCommerce

Mientras edita un diseño, puede cambiar para ver otro producto utilizando la función Vista previa como: en Beaver Builder:

Vista previa de diferentes productos en Beaver Builder

Con esa función, puede ver cómo se ve cada uno de sus productos cuando los ve. Publique la página de su producto una vez que esté satisfecho con el diseño y los módulos que incluye. Sus páginas de productos individuales ahora tendrán el estilo en el nuevo formato.

Paso 3: crea una página de tienda de WooCommerce

Es hora de darle a la página de la tienda el mismo tratamiento que a tus productos de WooCommerce. Un diseño de tienda predeterminado de WooCommerce es muy simple y no muy emocionante:

Diseño de tienda predeterminado de WooCommerce

Al diseñar la página de su tienda, Beaver Themer es una mejor opción. Comience yendo a WooCommerce> Configuración, haga clic en la pestaña del producto y asegúrese de que la página de la Tienda apunte a la Tienda o cualquier otra página personalizada que haya creado. Muestra sus productos como una página de archivo si especifica uno.

Seleccione Diseños temáticos > Agregar nuevo en Beaver Builder > Generador de temas y luego haga clic en Agregar nuevo. Elija la opción Diseño de tema en Tipo en la siguiente pantalla:

Creación de un diseño de página de tienda

La siguiente pantalla le permitirá elegir la ubicación del Archivo de Producto. Los productos de su tienda se mostrarán en la página Tienda y en las páginas de categorías de productos. Si es necesario, puede modificarlo.

Personalización de la página de archivo del producto

Al hacer clic en Iniciar Beaver Builder, podrá personalizar su diseño. La siguiente página aparece cuando hace clic en el signo más en la parte superior de la pantalla y luego hace clic en Plantillas:

Usar una plantilla de Beaver Builder

Se puede crear fácilmente una nueva página de tienda utilizando la plantilla Productos. Usando todas las herramientas que hemos cubierto hasta este punto, puede realizar cambios en la plantilla una vez que se crea. 

Asegúrese de que el diseño de su tienda se ajuste a la configuración de estilo del módulo Publicaciones ajustándolo hasta que encaje. 

En la parte superior de la pantalla, haga clic en Listo > Publicar una vez que los cambios se hayan guardado en el módulo. 

Lo último que debe hacer es asegurarse de que la página que designó como su página de la tienda aparezca en el menú de navegación de su sitio. De lo contrario, puede agregarlo desde la sección Apariencia> Menús del panel de control de WordPress.

Paso 4: personalice aún más la página de su tienda con los diseños de WooCommerce

Un módulo de WooCommerce también es una característica excelente de Beaver Builder que lo convierte en un excelente creador de páginas de WooCommerce. Le permite agregar partes de la funcionalidad de WooCommerce a cualquier estructura de Beaver Builder en su sitio. Las siguientes opciones están disponibles en este módulo:

  • Productos únicos y múltiples: 
  • Puede mostrar productos seleccionados en función de las ID o categorías de productos, o puede mostrar productos que están en oferta, productos recientes, productos mejor calificados o cualquier otra cosa que desee.
  • Carrito: muestra el contenido del carrito de compras de WooCommerce.
  • Pago: muestra la página de pago como aparecería normalmente.
  • Seguimiento de pedidos: ingresa información sobre los pedidos en este formulario.
  • Mi cuenta: esta página contiene la información que normalmente se encuentra en la página Mi cuenta, como información de la cuenta, pedidos anteriores y detalles de la dirección.
Diseños de WooCommerce en Beaver Builder.

Snelle Koppelingen

Conclusión

Crear una tienda en línea que represente su marca de manera efectiva es una tarea desafiante. Sin embargo, el proceso puede simplificarse con la ayuda de Beaver Builder, un complemento para WooCommerce.

Como puede ver, hemos esbozado cuatro pasos importantes para construir su escaparate usando tanto WooCommerce como Beaver Builder:

  1. Crea una tienda añadiendo productos.
  2. Diseñar una nueva página de producto.
  3. Cree una nueva página de tienda de WooCommerce.
  4. Con los diseños de WooCommerce, puede personalizar aún más su sitio de comercio electrónico.

¿Hay algo que desee saber sobre el uso de Beaver Builder para crear páginas de productos y tiendas? ¡Por favor comparta sus pensamientos a continuación en la sección de comentarios!

Aishwar Baber

Aishwar Babber es una bloguera apasionada y una comercializadora digital. Le encanta hablar y bloguear sobre las últimas tecnologías y dispositivos, lo que lo motiva a correr. GizmoBase. Actualmente está practicando su experiencia en marketing digital, SEO y SMO como especialista en marketing a tiempo completo en varios proyectos. Es un inversor activo en Bahía de afiliados y director en ImageStation.

Deja un comentario