Los bloques de WooCommerce ayudan a los webmasters a crear páginas de tienda personalizadas, mostrar sus productos y añadir funciones avanzadas de comercio electrónico como filtrado y búsqueda, y mucho más, todo ello sin escribir una sola línea de código. Por defecto, muchos bloques vienen con WooCommerce, pero algunos de los bloques más nuevos no. Se puede acceder a ellos instalando el móduloWooCommerce Bloquea WordPress PluginUtiliza estos nuevos bloques en tu tienda WooCommerce.
Explorar los bloques de WooCommerce
A partir de la versión 5.0 de WordPress, tenemos un editor completamente nuevo, el editor Gutenberg. Este editor utiliza un nuevo sistema basado en bloques que sustituye por completo al anterior editor clásico. Esto significa que incluso si no tienes muchos conocimientos de codificación front-end, puedes construir y personalizar fácilmente contenidos atractivos.
Y WooCommerce Blocks tiene mucho que ver conEditor GutenbergPerfectamente integrados, con operaciones entre ellos tan simples como arrastrar y soltar un juguete, los Bloques de WooCommerce ofrecen una gama de herramientas únicas diseñadas específicamente para la visualización de productos, la gestión del carrito de la compra, los procesos de pago y mucho más.
¡Esta combinación es simplemente perfecta! Permite aprovechar al máximo la flexibilidad y facilidad de uso del editor Gutenberg y, al mismo tiempo, personalizar fácilmente tu sitio web de WordPress para dotarlo de un excelente rendimiento de comercio electrónico. Tanto si eres un novato como un veterano, es fácil empezar y crear tu propio sitio web de comercio electrónico perfecto.
Para utilizar el bloque WooCommerce, primero abre o crea una página o entrada. Haga clic en el botón+ para ver todos los bloques de funciones y, a continuación, navegue hasta el botónWOOCOMMERCE Secciones. A continuación se ofrece un breve resumen de los distintos bloques:
- Búsqueda de productos -Añadir una barra de búsqueda para buscar rápidamente los productos de los clientes.
- Todos los productos - Mostrar todos los productos de la tienda en una cuadrícula.
- Todos los comentarios - Lista de todas las reseñas de productos.
- Pago clásico - Presentamos el clásico shortcode de checkout.
- Cesta de la compra clásica - Presentamos el clásico shortcode de carrito de la compra.
- cuenta de cliente - Habilitar el inicio y cierre de sesión de los clientes.
- Categorías destacadas - Destaque las categorías de productos y los términos de llamada a la acción (CTA) para fomentar una respuesta oportuna.
- Productos destacados - Destaque el producto o variante y la CTA.
- Filtro de actividad - Muestra el filtro activo en ese momento.
- Filtrar por precio - Presentar a los clientes la gama de precios disponible para los productos de filtración.
- Filtrar por inventario - Permite filtrar los productos por estado de las existencias.
- Filtrar por atributo - Filtre los productos por atributos como el tamaño o el color.
- Filtrar por clasificación - Permite a los clientes filtrar los productos por puntuación.
- Productos destacados - Mostrar una gama de productos seleccionados en una cuadrícula.
- Mini carro de la compra - Proporciona un botón de vista rápida de la cesta de la compra.
- Notificaciones de la tienda - Muestra las notificaciones dirigidas al cliente generadas por WooCommerce u otras extensiones.
- Productos más vendidos - Una cuadrícula que muestra los productos más vendidos en el historial de tu tienda.
- Lista de categorías de productos - Muestra todas las categorías de productos en forma de lista o lista desplegable.
- Productos por categoría - Muestra una cuadrícula de productos de la categoría seleccionada.
- Línea de productos (Beta) - Muestra los productos de la serie especificada.
- Nuevos productos - Mostrar los últimos productos en la parrilla.
- Productos de promoción - Muestra los artículos promocionales actuales en una cuadrícula.
- Productos por etiqueta - Muestra los productos con la etiqueta seleccionada en la cuadrícula.
- Productos mejor valorados - Muestre los productos mejor valorados de la parrilla.
- Productos por atributos - Muestra los productos con los atributos seleccionados en una cuadrícula.
- Comentarios por categoría - Muestra las reseñas de los productos de la categoría especificada.
- Comentarios por producto - Muestra las opiniones organizadas por producto.
- Producto único --Demostrar un único producto.
- carro - Mostrar cesta de la compra.
- ajustar cuentas - Muestra los formularios disponibles para que los clientes envíen pedidos.
¿Sabe ahora qué función implementa aproximadamente cada bloque?
Uso de bloques de cuadrícula de productos en WooCommerce
Los bloques de cuadrícula de productos son una herramienta versátil para mostrar los productos de la tienda en un formato de cuadrícula organizada en su sitio web de WordPress. A continuación te explicamos cómo añadir y personalizar los bloques de cuadrícula de productos:
1. Vaya a la página o entrada en la que desea mostrar el producto. 2. Especifique un título, como "Productos".
2. Haga clic en la barra de navegación superior de la pantalla+ para ver todos los bloques. Desplácese hasta el bloqueWOOCOMMERCE y seleccioneTodos los productos. Esta acción muestra sus productos en un diseño de cuadrícula en la página.
3. Para configurar este bloque, utilice el panel Configuración del bloque de la derecha. El bloque puede configurarse haciendo clic en el botón"Ajustes" (el segundo icono más a la derecha de la barra de navegación superior) para acceder a los ajustes.
Aquí se puede personalizar el diseño, el contenido y el estilo de la cuadrícula:
- Configuración del diseño: Ajuste el número de filas y columnas. Por ejemplo, ajuste ambas a 2 para obtener un aspecto equilibrado.
- Ajustes de contenido: Decida si desea añadir un menú desplegable de ordenación para sus clientes. Esta función permite a los clientes clasificar los productos en el orden seleccionado. Puede desactivarlo si lo desea.
- Estilos avanzados: Si lo desea, puede añadir clases CSS para crear estilos más complejos.
4. Previsualice la página después de completar la configuración para asegurarse de que todo se muestra como se espera. A continuación, haga clic en"Liberación". botón . Este paso le permite acceder a la página de forma pública, privada o con protección por contraseña, según prefiera.
Añade bloques de productos destacados a tu página o entrada.
El bloque Productos destacados permite destacar productos en una página o entrada. Los productos se pueden seleccionar, personalizar sus ajustes de visualización y añadirlos al contenido para llamar la atención sobre el artículo específico que se desea mostrar.
Siga los pasos que se indican a continuación para añadir un bloque de producto destacado:
1. En primer lugar, vaya a la página o a la entrada en la que desea destacar el producto. Digamos que usted está diseñando una cuadrícula de productos y desea presentar los productos en la parte superior. Crear un espacio en ese lugar, y te darás cuenta de que en el lado izquierdo hay un+. O, si ya tiene un bloque cerca de la ubicación deseada, haga clic en los tres puntos verticales para que aparezca un menú. Puede seleccionar el bloque"Antes de añadir" tal vez"Después de añadir".
2. Seleccione la barra de navegación superior del+ para mostrar todos los bloques y buscarProductos destacados.
3. Seleccione el producto que desea visualizar. A continuación, haga clic en"Hecho.".
4. Para dar un aspecto único al bloque de productos destacados, haga clic en el botón"Ajustes". En el panel Configuración de bloque:
- Decida si desea mostrar descripciones y precios de los productos.
- Configura cómo se muestran tus medios (imágenes y vídeos).
- Especifica un texto alternativo para la imagen del producto.
- Seleccione el color de superposición del bloque.
- Ajusta la opacidad del bloque.
5. Una vez realizados todos los ajustes necesarios, puede publicar la página o actualizarla (si ya está activa). Puede ver el bloque en ejecución y asegurarse de que tiene el aspecto que desea.
Uso de bloques de filtro en WooCommerce
Los bloques de filtros permiten a sus clientes optimizar las búsquedas de productos en función de criterios específicos, ayudándoles a encontrar rápidamente los productos que se ajustan a sus preferencias o requisitos.
- Navegue hasta la página o entrada en la que desea añadir el bloque. Esta guía utiliza el mismoPágina del producto.
- Seleccione dónde desea añadir el filtro.
- Haga clic en la barra de navegación superior del+ para ver todos los bloques. Desplácese hasta el bloqueWOOCOMMERCEy, a continuación, vea las opciones de filtro para Precio, Inventario, Atributos y Valoraciones. Por ejemplo, si seleccionaFiltrar por precio.
Añadir bloque de filtros por precio
Al seleccionar este bloque, se puede mostrar un campo de rango de precios que permite al usuario filtrar los productos mostrados en la página en función del rango de precios deseado. La configuración del bloque en el panel derecho se puede personalizar para adaptarla a sus necesidades.
Añadir filtro por bloque de atributos
También es posible utilizar"Bloque "Filtrar por atributo .
Se pueden seleccionar atributos específicos, comoColory, a continuación, configure los ajustes en consecuencia. Por ejemplo, puede activar la opciónMostrar el número de productos para mostrar el número de productos disponibles en cada color.
A continuación, puede ver la página en vivo y probar la funcionalidad de los botones de filtro.
Siguiendo estos pasos, los clientes podrán optimizar fácilmente su búsqueda de productos en función de diversos criterios. De este modo, los clientes disfrutarán de una experiencia de compra más fluida y encontrarán más fácilmente los productos que desean, aumentando así su satisfacción. Con unos sencillos pasos, puede hacer que sus clientes estén más contentos y que comprar sea más fácil.
Cesta de la compra y páginas de pago
Para que los clientes de su tienda online puedan comprar sin problemas, la cesta de la compra y el proceso de pago deben ser fáciles de entender y totalmente funcionales. Para que los clientes disfruten de una experiencia de compra increíble, deben poder gestionar fácilmente los artículos de su cesta de la compra y el proceso de pago debe ser sencillo y sin esfuerzo. De este modo, los clientes quedarán más satisfechos y estarán más dispuestos a volver a comprar.
WooCommerce utiliza por defecto el bloque apropiado para crear el archivocarro responder cantandoajustar cuentasPágina. Los clientes pueden añadir productos al carrito y acceder a él a través de la barra de navegación.
Tras confirmar el contenido de la cesta de la compra, el cliente puede elegir"Sigue comprobando". rellene los datos necesarios y haga su pedido.
Cómo crear una página de tienda personalizada
Sabiendo cómo utilizar ciertos bloques de WooCommerce, el siguiente paso consiste en combinarlos para crear páginas de tienda personalizadas y fáciles de usar utilizando los siguientes bloques:
- Búsqueda de productos
- Filtrar por precio
- categoría de productos
- Productos destacados
- Todos los productos
Para crear este diseño de tienda personalizado, cree una nueva página y siga los pasos que se indican a continuación.
1. Introduzca "Tienda" como título de la página.
2. Siguiendo los mismos pasos que antes para añadir bloques, añada el bloque"Búsqueda de productos" Bloquear. No aplique ninguna configuración.
3. AñadirLista de categorías de productos Bloques.
En la pantalla de configuración del bloque, establezca los parámetrosESTILO DE PANTALLAajustado aDesplegable.
4. A continuación, añada"Bloque "Filtrar por precio . No configure nada para este bloque.
5. AñadirProductos destacados y seleccione los productos que desea mostrar. Aplique la misma configuración que el bloque de productos destacados que hizo anteriormente.
6. AñadirTodos los productos Bloques.
Para la configuración de este bloque, establezca el parámetroCOLUMNASresponder cantandoFILAS Ajuste el valor a 2 y anule la selecciónMostrar desplegable de clasificación.
7. Publique la página y vea los resultados.
Vista previa de la página de la tienda.
Este artículo detalla las diversas características de los bloques de WooCommerce, como por ejemplo cómo añadir rejillas de productos y productos destacados, cómo utilizar el potente bloque de filtros y mucho más. También se centra en la importancia de los carritos de la compra y las cajas, ya que son fundamentales para que los clientes tengan una experiencia de compra fluida.
Para que un sitio web tenga un aspecto intuitivo y atractivo se requiere una combinación inteligente de varios bloques de WooCommerce. Este proceso implica seleccionar, configurar y disponer cuidadosamente los distintos bloques para garantizar que satisfacen las necesidades funcionales de la tienda, así como las preferencias de los clientes.
