Cómo personalizar una página de productos de WooCommerce usando Beaver Themer

Lanzar un nuevo negocio o poner sus productos en línea puede ser interesante e intimidante. WooCommerce probablemente ha hecho que los carros de gestión de inventario y compras sean mucho más fáciles, pero si no es un programador experto, es posible que se pregunte cómo personalizar aún más sus páginas de productos para adaptarse mejor a sus necesidades. En este artículo, presentaremos el suplemento Beaver Themer Para Beaver Builder, discuta por qué está bien asociado con WooCommerce y describe qué características ofrecen que exceden las capacidades del tema de Beaver Builder y Beaver Builder. Luego seguiremos por los pasos para crear una página de producto de WooCommerce personalizada con Beaver Themer, que sorprenderá a sus clientes con hermosas páginas de productos y diseños temáticos.
¡Vamos a empezar! Una introducción a Beaver Themer Beaver Themer agrega un gran poder al Beaver Builder de varias maneras diferentes. Primero, amplíe las opciones de apariencia de Beaver Builder para aplicar a páginas o partes de páginas que normalmente están controladas por su tema. Estos incluyen:
Páginas generadas por WordPress como los archivos del blog y la página de su tienda
Información sobre una sola publicación fuera del área de contenido, como el título de la publicación, la imagen presentada, los metadatos de publicación, los artículos relacionados y la navegación de la publicación. Las páginas con un solo producto de WooCommerce son un tipo de publicación única.
Cabezas, sótano, 404 páginas, resultados de búsqueda.
Tener un control completo sobre la apariencia de estas áreas es como si tuviera un desarrollador de temas en su bolsillo.
En segundo lugar, Beaver Themer crea efectivamente “plantillas de temas” que puede aplicar en su sitio o en ciertas ubicaciones. Esto significa que puede crear una apariencia (encabezado, sótano, pancarta, etc.) que se aplica a varias publicaciones, páginas o productos de WooCommerce. En tercer lugar, Beaver Themer agrega dos características importantes al Beaver Builder: conexiones de campo y lógica condicional, ambas incluyendo configuraciones especiales de WooCommerce. Con conexiones de campo, en línea, columna o módulo, puede crear conexiones dinámicas a los datos de los campos base para que el contenido cambie de acuerdo con a la página que ve. Las conexiones de campo son las que transforman los aspectos de Themer en plantillas que funcionan en cada página en la que se muestran, pero tendrá la misma funcionalidad en los aspectos estándar de Beaver Builder. Por ejemplo, las conexiones de campo en páginas estáticas le permiten mostrar campos personalizados en sus modelos. Esto significa que puede agregar o editar back-end personalizado sin preocuparse por cómo se mostrará.
Con la lógica condicional, tiene un buen control sobre la visibilidad de las filas, columnas y módulos de los diseños, dependiendo de las condiciones que cree. Por ejemplo, puede mostrar un banner para usuarios con $ 75 en la canasta, que dice que han ganado un regalo gratuito y otro banner para usuarios de menos de 75 USD en el carrito, en el que recibo envío gratis con 75 USD. O puede mostrar un encabezado especial de Themer que solo los clientes se repiten después de conectarse a su cuenta.
Cuarto, Beaver Themer tiene una serie de módulos de WoCommerce específicos que le brindan una funcionalidad completa de WooCommerce en diseños de WooCommerce.Los describiremos más tarde. Finalmente, podrá lograr todo usando la interfaz familiar y fácil de usar con Beaver Builder de arrastrar y soltar.Lo mejor, no tendrá que tocar una línea en el código del tema.Cuando está asociado con un tema aceptado, Beaver Themer le brinda una amplia gama de opciones de modificación para su sitio. Dada la potencia y la eficiencia que tendrá a mano, Beaver Themer tiene un precio razonable de US $ 147 años (con un 40% de descuento cada uno. año a la auto -renovación):
Beaver Themer requiere cualquiera de las versiones premium de Beaver Builder, a partir de $ 99 por año.Al igual que Beaver Builder, puedes usar Beaver Themer en un número ilimitado de sitios.
Beaver Themer se puede pagar fácilmente con el tiempo, el esfuerzo y los costos guardados para personalizaciones, plantillas y mantenimiento.Las integraciones de WooCommerce en el complemento y el tema de Beaver Builder (y la forma en que Beaver Themer es diferente) Beaver Builder y Beaver Builder Teme tienen más integraciones de WooCommerce.En primer lugar, en los aspectos estándar de Beaver Builder, puede enumerar los productos de WooCommerce con un módulo de publicación.Aquí hay una captura de pantalla que muestra todos los productos en la categoría de accesorios.Puede filtrar los productos enumerando o excluyendo categorías de productos o etiquetas de productos o solo puede mostrar ciertos productos.El módulo de publicación es ideal para mostrar los productos de WooCommerce en una página estática, pero para obtener la funcionalidad de WooCommerce de una página de la tienda que se conecta al carrito de compras y las páginas de pago, necesita Beaver Themer.

Este módulo es ideal para la construcción manual de partes de la pantalla de WooCommerce en páginas estáticas o para publicaciones de apariencia de contenido, pero incluso si lo guarda como una mirada y la reutiliza, es posible que tenga que hacer cambios en cada página. Con la capacidad de modelado de Beaver Themer, puede configurar conexiones de campo que muestren los datos que desea en cada página. En tercer lugar, el tema de Beaver Builder tiene una variedad de configuraciones para WooCommerce Shop y Product Pages, como se muestra en esta captura de pantalla. Como con cualquier tema, no importa cuántas configuraciones haya, no puede cambiar el aspecto de aparecer exactamente como desee, pero con Beaver Themer puede obtener un aspecto verdaderamente personalizado y puede agregarle cualquier campo personalizado para hacer las páginas sus páginas Almacene y productos únicos. Cómo personalizar una página de productos de WooCommerce con Beaver (en 5 pasos) Tenemos un video tutorial de paso por paso que puede usarse cómo puede usar Beaver Themer para personalizar sus páginas de productos de WooCommerce o la página de la tienda. Mire el video a continuación … así es como puede crear una apariencia personalizada del producto Themer en solo cinco pasos. Paso 1: Configure su entorno Beaver Builder/Beaver Themer/WooCommerce Este tutorial requiere la instalación del complemento WooCommerce, cualquier versión premium de Beaver Builder y Beaver Themer. Si aún no tiene productos en WooCommerce, cree algunos normalmente o si está impaciente, puede importar los datos de la muestra de WooCommerce. Con un conjunto base de producto, le ayuda a obtener una vista previa de los aspectos de Themer a medida que los construye.
Paso 2: ¡Agregue un nuevo aspecto del tema ahora comienza la diversión! Creemos un aspecto de Themer para mostrar un solo producto. En la barra de administración del lado de WordPress, haga clic en Beaver Builder> Aspectos temáticos, luego haga clic en el botón Agregar nuevo en la parte superior de la pantalla: nombre su aspecto y seleccione Singular en el campo de aspecto, que se aplica a cualquier tipo de publicación única. Haga clic en Agregar el tema Look:

Aplicemos este aspecto para cada página del producto. Para la ubicación, elija el producto y luego todos los productos:

Haga clic en Actualizar cuando haya terminado de seleccionar la ubicación.
Paso 3: seleccione la opción de plantilla del menú Themer Haga clic en Iniciar Beaver Builder para abrir su aspecto en Beaver Builder:

La apariencia inicial está más orientada hacia una publicación que una página de producto. Para cambiar esto, abra el panel contenido haciendo clic en el símbolo más (+) en la esquina superior derecha de la página. Seleccione plantillas, elija la plantilla del producto: y elija la opción para reemplazar la plantilla actual.

Puede hacer clic en la vista previa en la barra superior del editor para elegir una determinada página de producto para obtener una vista previa mientras trabaja en su apariencia.


Es posible que la plantilla no se vea exactamente como lo que tenía en mente, pero muchos de los módulos especiales de WooCommerce de Themer ya están incluidos en la plantilla con sus conexiones de campo para que pueda reorganizar y acostar los módulos en la página, en lugar de construir un aspecto. desde cero. Paso 4: Personalice el aspecto de la página del producto ahora que tiene algo que resolver, puede comenzar a moverse, eliminar y agregar filas, columnas y módulos en su apariencia, como puede ver en esta captura de pantalla, en el grupo de módulos temáticos existe muchos módulos específicos de WooCommerce. Para elegir: muchos de estos módulos ya están incluidos en la plantilla producida y puede pasar con el mouse sobre el icono clave de cualquier módulo para ver qué módulo es:
Para aprovechar al máximo estas herramientas eléctricas de diseño, hay algunos módulos de WooCommerce que es posible que desee probar en su sitio, incluida: evaluación del producto. Este módulo es una hermosa plena que muestra la evaluación promedio del cliente y el número de revisiones para un producto en particular. Ya está en la plantilla producida y, si no hay evaluaciones de productos, verá un sustituto de código:

El botón se suma al carrito. En WooCommerce, la sección agrega en la canasta incluye variaciones y cantidades de los productos, por lo que el botón agrega en la canasta tiene esas configuraciones.

Productos similares. La venta cruzada es una forma efectiva de aumentar los ingresos, y los productos del módulo le permiten usar esta técnica. Utilizando la funcionalidad estándar de WooCommerce, muestre un flujo de productos que tienen las mismas etiquetas y categorías que un artículo determinado.


Ventas de productos adicionales. Si ha configurado productos como “ventas adicionales” en la configuración de su producto WooCommerce, el módulo de ventas de productos los muestra bajo el título que también puede gustar … Esta es una manera simple de mostrar productos más caros que sus clientes podrían estar interesados, precio, título y otros detalles sobre su mercancía, puede consultar la base de conocimiento Beaver Themer para obtener más información sobre los módulos de WooCommerce disponibles. Por supuesto, no se limita a los módulos de WooCommerce. También puede usar cualquiera de los módulos de Beaver Builder, ya sea en el grupo de módulos estándar o en el grupo de módulos temáticos. Paso 5: Guarde y publique su página Aparte de que haya realizado todas las ediciones y ajustes deseados, haga clic en el botón. Luego, puede guardar su look como un boceto o publicarlo para aplicarlo en sus páginas de productos:

También puede ver el menú Beaver Builder en cualquier momento y ajustar la configuración para el nuevo aspecto. Si decide que desea aplicarlo solo a unos pocos artículos en lugar de todos sus productos, aquí hará el cambio:

Si recuerda la plantilla de producto con la que comencé, puede ver cómo solo unos pocos ajustes deslizándose y la colocación con Beaver Themer pueden marcar una gran diferencia en la página de un producto:

¡Es hora de admirar tu trabajo! ¡Listo, ha creado un aspecto personalizado de productos individuales! Y puede ver que no será difícil producir una página que realmente se vea genial y fácil de mantener y modificar en el futuro. El procedimiento es muy similar a la personalización de las páginas de la tienda. Comience con una apariencia de archivo y vaya desde allí. Conclusión Plugin Beaver Builder ofrece varias formas de mostrar subconjuntos del producto WooCommerce en páginas estáticas y en modelos posteriores al concepto. Beaver Builder Theme tiene una serie de configuraciones de personalización para la tienda WooCommerce y las páginas de productos. Pero Beaver Themer le brinda la potencia de personalizar su tienda y páginas de productos exactamente como desee y aplicar estos modelos dinámicamente donde sea que elija. Usando los módulos de WooCommerce disponibles, puede llevar sus páginas de productos a un nivel completamente nuevo. Crear una página de producto personalizada con Beaver Themer es rápida y fácil si sigue estos cinco pasos: compre, descargue e instale Beaver Themer.
Crea un nuevo look singular.
Seleccione la opción de plantilla de producto.
Personaliza tu nuevo look con módulos.

Guarde y publique el aspecto de su página.

¿Tiene alguna pregunta sobre el suplemento de Beaver Themer para Beaver Builder? ¡Compártalos con nosotros en la sección de comentarios a continuación!