Cómo crear una página de tienda personalizada de WooCommerce con Elementor

Como probablemente sabías. Elementor Pro presenta una función WooCommerce Builder que le permite crear un sitio web personalizado de comercio electrónico con WooCommerce sin codificar. La función le permite crear páginas de WooCommerce personalizadas utilizando el editor visual elemental, que ofrece una interfaz intuitiva. Al momento de escribir este artículo (8 de junio de 2021), puede crear páginas personalizadas para la página de la tienda, página de producto única y páginas de archivo de productos (etiquetas y categorías). Pronto, podrá crear páginas personalizadas para la página de pago y para la página del carrito de compras. En este artículo, le mostraremos cómo crear una página personalizada de la tienda WooCommerce utilizando el WooCommerce Builder de Elementor Pro.
La tienda de la tienda en sí es uno de los valores predeterminados de WooCommerce. La página juega un papel de exhibición para mostrar sus productos. Puede acceder a la página accediendo al sitio sitio.com/shop. Por defecto, la página de la tienda WooCommerce muestra solo productos de WooCommerce. Al crear una página de tienda personalizada con Elementor Pro, puede agregar elementos para que su ventana sea más convincente. Cómo crear una página de tienda personalizada de WooCommerce con Elementor Hay al menos dos widgets elementales que puede usar para crear una tienda de WooCommerce personalizada: productos y archivo de productos. En este ejemplo, usamos el último.
La función del widget producido es bastante similar al widget de publicaciones. La diferencia es que el producto de widget se usa para mostrar productos de WooCommerce, mientras que las publicaciones de widget se usan para mostrar publicaciones de blog. Tenga en cuenta que puede encontrar el widget producido solo cuando tiene el complemento WooCommerce instalado y activado. Para comenzar a crear una página de tienda WooCommerce personalizada utilizando Elementor Pro, primero, vaya a plantillas -> Builder de temas en el tablero de WordPress. Haga clic en la pestaña Archivo del producto en la página del tema del creador y haga clic en el botón Agregar nuevo producto Achiva. Dé un nombre de plantilla y haga clic en el botón Crear plantilla.

Hay tres patrones de tienda personalizados desde los que puede elegir si desea crear la página de la tienda personalizada desde una plantilla prefabricada. Si desea crear la página de la tienda personalizada desde cero, simplemente puede cerrar la biblioteca de plantillas. En este ejemplo, crearemos la página de la tienda personalizada desde cero. Como se mencionó anteriormente, utilizaremos los productos Widget para mostrar los productos. Antes de agregar el widget producido en el área de lienzo, puede establecer el aspecto agregando secciones y columnas. Si es nuevo en el elemento, puede leer nuestro artículo anterior para averiguar cómo usarlo. Una vez que el aspecto esté listo, simplemente puede dibujar el widget producido en el área de la tela.

Como puede ver, los productos de widget se cargan y muestran automáticamente los últimos productos de WooCommerce. Puede cambiar la consulta abriendo el bloque de consulta en la pestaña de contenido en el panel de configuración. Hay cinco opciones de consulta que puede elegir:

Preguntas Preguntas Productos más nuevos
Rebaja
aconsejable
Selección manual
También puede establecer el pedido del producto o excluir ciertos productos.
Para establecer el número de columnas y filas, puede abrir el bloque de contenido en la pestaña de contenido. Desde este bloque, puede activar y paginar.
Puede jugar con su panel de configuración hasta obtener la mejor configuración del producto de widgets. Una vez que haya terminado con el widget producido, puede agregar otros widgets a su página.

Después de haber terminado de editar la página, puede hacer clic en el botón de publicación en la parte inferior del panel de configuración.

Agregue una condición de visualización haciendo clic en el botón Agregar condición. Debido a que desea crear una página de tienda personalizada, seleccione la opción de la página de la tienda. Haga clic en el botón Guardar y cerrar para guardar su cambio.

Hasta ahora, ha creado con éxito la página personalizada de la tienda WooCommerce usando Elementor Pro. Puede acceder a su sitio.com /tienda para verificar el resultado. Creando el estilo de widget producido antes de publicar su página, puede cambiar los productos de widget para hacerlo más convincente. Para dar a los productos de estilo widget, haga clic en el widget en el área de lienzo y acceda a la pestaña de estilo desde el panel de configuración. Hay cuatro bloques que puede abrir de la siguiente manera:

Productos

Puede abrir este bloque para establecer el espacio entre columnas y filas. Desde este bloque, también puede establecer la tipografía (la familia de fuentes, el tamaño de fuente, etc.), así como el color del texto de los elementos del producto, como el título del producto, el precio del producto, la evaluación del producto, etc. También puede establecer el borde de la imagen del producto,

En este contexto, el cuadro se refiere al contenedor de cada producto. Puede abrir el bloque de caja para establecer el ancho del borde del contenedor, el radio del borde, la sombra de la caja, el color de fondo, el color del borde, etc.
paginación
Si activa la opción de paginación en el bloque de contenido, puede abrir el bloque de paginación en la pestaña de estilo para estresar la paginación. Puede establecer cosas como espaciado, color del borde, color de fondo, etc. Puede establecer diferentes configuraciones para cada condición (normal, desplazada y activa).
Venta express
Cuando agrega un nuevo producto a WooCommerce, puede establecer un atributo de precio de venta para mostrar a los visitantes que se reduce el producto asociado. Para enfatizarlo, puede mostrar en la página de la tienda el atributo de descuento para que los productos de descuento tengan la insignia de reducción. Puede abrir el bloque de ventas flash para estilizar la insignación para la venta. Puede establecer cosas como el color del texto, el color del fondo, el tipografía, el radio del borde, el tamaño (ancho y la altura), la distancia, etc.
La conclusión de WooCommerce Builder es una de las características que ofrece Elementor Pro. La función le permite crear un sitio web de comercio electrónico personalizado y único con WooCommerce sin codificar. No es necesario instalar un tema de WordPress que se evite para WoCommerce. En su lugar, puede crear páginas de WooCommerce personalizadas utilizando el editor visual elemental. Hasta la versión 3.2.2, Elementor Pro le permite crear una página de tienda personalizada, una página de producto única personalizada y páginas de archivo de productos personalizados. Pero Elementor anunció que, en la próxima versión de Elementor Pro, podrá crear una página de carrito personalizada, una página de pago personalizada y una cuenta de cliente personalizada. Puede leer nuestro artículo anterior para descubrir las características ofrecidas por JetWoObuilder y Elementor WooCommerce Builder.