Guía completa del bloque WooCommerce

WooCommerce es uno de los complementos populares para crear sitios de comercio electrónico en WordPress. WooCommerce Blocks es uno de los complementos de WooCommerce, diseñado para facilitar a los usuarios la creación de tiendas en línea en WordPress. WooCommerce Blocks ayuda a crear páginas de tienda personalizadas, mostrar sus productos y agregar funciones avanzadas de comercio electrónico, como filtrado y búsqueda de productos, todo sin escribir una sola línea de código.  

Debe instalar el complemento WordPress WooCommerce Blocks para utilizar estos nuevos bloques. Este complemento es un campo de pruebas para funciones experimentales que podrían agregarse al núcleo de WooCommerce.

En esta guía práctica, analizaremos las características de los bloques de WooCommerce y cómo personalizarlos. 

¿Qué es el bloque WooCommerce?

Los bloques WooCommerce son una colección de bloques integrados con el editor de bloques de WordPress (Gutenberg) que le permiten agregar fácilmente varias características y funcionalidades de WooCommerce a sus páginas y publicaciones. Sin escribir código, estos bloques le permiten mostrar productos, categorías de productos, filtros de búsqueda, carritos de compras, pagos y más.

En términos más simples, los bloques WooCommerce son componentes prediseñados que puede insertar en su sitio de WordPress usando el editor de bloques, lo que proporciona una manera fácil de incorporar la funcionalidad de comercio electrónico impulsada por WooCommerce. Este es el complemento principal de WooCommerce, por lo que los obtiene automáticamente cuando instala y activa WooCommerce en su sitio de WordPress.

Además, se integran perfectamente con el editor de bloques de WordPress, lo que le permite crear páginas de productos personalizadas, diseños de categorías y experiencias de compra utilizando una interfaz familiar de arrastrar y soltar.ext aquí...

Función de lista del bloque WooCommerce

Después de comprender qué es el bloque WooCommerce, a continuación analizaremos cada característica proporcionada una por una:

• Todos los productos: muestra todos los productos de la tienda en formato de cuadrícula.
• Filtros de productos activos: muestra los filtros de productos activos en forma de lista o como chips (similares a botones).
• Todas las reseñas: muestra todas las reseñas de productos.
• Producto más vendido: muestra los productos más vendidos en un formato de cuadrícula.
• Pago: muestra un formulario que permite a los clientes completar sus pedidos.
• Carrito: Muestra el carrito de compras.
• Categoría destacada: destaca categorías de productos específicas junto con botones de llamada a la acción.
• Producto destacado: muestra productos destacados seleccionados.
• Filtrar por precio: muestra un rango de precios en el que los clientes pueden filtrar productos. También puede habilitar un rango de precios editable haciendo clic en un botón o texto aquí.
• Filtrar por stock: Permite filtrar productos según el estado de disponibilidad de stock. Esta función proporciona opciones para mostrar productos en stock, agotados o en proceso de reordenación.
• Filtrar por calificación: permite a los clientes filtrar productos según las calificaciones.
• Filtrar por atributo: filtra productos según el tamaño o el color.
• Productos seleccionados personalmente: muestra los productos seleccionados personalmente en un formato de cuadrícula, lo que le permite elegir qué productos mostrar específicamente.
• Mini carrito: Proporciona una breve vista del carrito de compras.
• Productos más nuevos: muestra los productos más recientes organizados en una cuadrícula. formato. Se pueden personalizar agregando o eliminando elementos como título, precio, calificación y botón de compra.
• Producto en oferta: muestra los productos actualmente en oferta en un formato de cuadrícula y se puede personalizar agregando o eliminando elementos como título, precio, calificación y botón de compra.
• Búsqueda de productos: agrega una barra de búsqueda para facilitar a los clientes la búsqueda de productos.
• Producto por etiqueta: muestra productos con etiquetas/etiquetas específicas en un formato de cuadrícula.
• Producto por atributo: muestra productos con atributos específicos (color, tamaño, etc.) en un formato de cuadrícula.
• Producto por categoría: muestra productos basados ​​en categorías en un formato de cuadrícula.
• Reseñas de subproductos: muestra reseñas agrupadas por producto.
• Revisión por categoría: muestra reseñas de productos de categorías específicas.
• Producto único: muestra una vista detallada de un solo producto.
• Productos mejor calificados: muestra los productos con las calificaciones más altas en un formato de cuadrícula.

Cómo utilizar el bloque de cuadrícula de productos en WooCommerce

Además de conocer las funciones disponibles en los bloques de WooCommerce, intentemos usar o agregar una cuadrícula de productos en WooCommerce. Asegúrese de haber instalado el complemento de bloques de WooCommerce en su sitio web. Aquí se explica cómo agregarlo:

1. Abra la página o publicación donde desea mostrar la cuadrícula de productos, luego ingrese el título "Producto".

2. En la navegación izquierda , haga clic en el botón (+) > desplácese hacia abajo hasta la sección WooCommerce > seleccione "cuadrícula de productos".

3. A continuación, para configurar el bloque , dirígete al panel derecho.

En este panel, puedes ajustar varias cosas, incluyendo:

• Configuración de diseño: puede personalizar la cantidad de filas y columnas que se muestran en la cuadrícula del producto. Por ejemplo, configurar ambos en 2 para obtener una vista equilibrada.
• Configuración de contenido: puede mostrar un menú desplegable para ordenar productos. Esta función permite a los clientes clasificar los productos según sus preferencias. Puede desactivarlo si no es necesario.
• Estilo avanzado: puede agregar clases de CSS para personalizar la apariencia.

Cómo agregar productos destacados a su página

El bloque Producto destacado le permite mostrar productos específicos en su página o publicación. Con este bloque, puedes seleccionar productos, personalizar su apariencia y colocarlos en tu contenido para atraer visitantes a los artículos que deseas promocionar.

Para agregar el bloque de productos destacados, siga estos pasos:

1. Abra la página o publicación donde desea agregarla. Por ejemplo, si lo coloca encima de la cuadrícula de productos, cree espacio en esa área y haga clic en el botón "+" que aparece.

2. Seleccione el botón "+" en la barra de herramientas de bloqueo para abrir la lista de bloqueo, luego busque y seleccione "Producto destacado".

3. Elija los productos que desea resaltar y luego haga clic en "Listo".
4. Para personalizar la apariencia del bloque, haga clic en "Configuración". En el panel de configuración, puedes ajustar varias cosas, incluyendo:

• Mostrar u ocultar la descripción y el precio del producto.
• Configurar la visualización de medios (imagen y vídeo).
• Agregue texto alternativo para las imágenes de productos.
• Seleccione el color de superposición del bloque.
• Ajusta la opacidad del bloque.

5. Después de realizar el ajuste, puede publicar o actualizar la página para ver el bloque de productos destacados.

Cómo agregar bloques de filtros en WooCommerce

El bloque de filtro de WooCommerce facilita a los clientes encontrar productos que coincidan con sus criterios de búsqueda. Al proporcionar opciones de filtrado, los clientes pueden limitar rápidamente los resultados de búsqueda a productos relevantes para ellos.

Para agregar el bloque de filtro, siga estos pasos:

1. Abra la página o publicación donde desea colocar el bloque de filtro.
2. Determine la ubicación deseada para colocar el bloque de filtro.
3. En la barra de herramientas del editor de bloques, haga clic en el botón "+" y busque opciones de filtro de WooCommerce, como Filtro de precios, Filtro de acciones, Filtro de atributos y Filtro de calificaciones.

Ahora, analicemos cada tipo de filtro disponible. 

Agregar filtro por precio

El bloque de productos de filtro de precios le permite agregar una función de filtrado que permite a los usuarios seleccionar el rango de precios deseado. El rango de precios se puede mostrar como botones editables o texto normal. Puede agregar botones si lo desea y ajustar su nivel de título.

Agregar filtro por atributo

El bloque de filtro de atributos del producto permite a los usuarios filtrar productos según atributos como el color y el tamaño. Puede elegir los atributos que desea utilizar de la lista disponible. Su visualización puede ser en forma de lista o menú desplegable. También puede configurar el tipo de consulta para que sea AND u OR. Otras características incluyen mostrar la cantidad de productos, seleccionar el nivel de encabezado, agregar botones y elegir el filtro.

Agregar filtro por stock

El bloque de filtro de productos de estado de existencias permite a los usuarios mostrar productos según su estado de disponibilidad. Pueden mostrar productos disponibles (en stock), agotados (agotado) o en pedidos pendientes. También puede configurarlo para mostrar la cantidad de productos, seleccionar el nivel de encabezado y agregar botones. Este bloque se puede utilizar con otros bloques de WooCommerce, como Todos los productos. Lamentablemente, este bloque no proporciona una vista previa cuando se agrega a la página.

Bloques de carrito y pago

nuestroEl bloque del carrito de compras agrega una visualización del carrito de compras a su página. Puede incluir una calculadora de costos de envío, seleccionar un enlace para el botón de pago y configurar una visualización en modo oscuro. Este bloque también proporciona una notificación de que puede configurar la página como la página predeterminada del carrito de compras en la configuración de WooCommerce. También se incluye un enlace para proporcionar comentarios.

Mientras tanto, el bloque de pago proporciona un formulario de pago para su carrito de compras. Se le informará que esta página se puede configurar como la página de pago predeterminada en la configuración de WooCommerce. También hay una opción para la visualización en modo oscuro. Este bloque consta de varios elementos que puedes personalizar individualmente. Lamentablemente, este bloque no proporciona una vista previa una vez que se agrega a la página.

Cómo personalizar la página de compra en WooCommerce

Después de aprender a usar varios bloques de WooCommerce, puede combinar varios para crear una página de tienda personalizada fácil de usar. Para crear este diseño de página de tienda específico, siga estos pasos.

1. Cree una nueva página y asígnele el nombre "Tienda".

2. Agregue el bloque Búsqueda de productos .

3. Agregue el bloque Lista de categorías de productos

Luego, configure el estilo de visualización en el menú desplegable.

4. Agregue el Filtro de precios .
5. Agregue el Productos destacados y seleccione los productos que desea resaltar. Configure según sea necesario.

6. Agregue el Todos los productos .

Establezca el número de columnas y filas en 2 y desactive la opción desplegable de clasificación.

7. Finalmente, publique la página para ver el diseño final de la página de la tienda que ha creado.

Construya su tienda en línea con WooCommerce Block y venda su producto

Después de crear con éxito una página de tienda personalizada con WooCommerce Blocks, ahora puede comenzar a vender sus productos físicos y digitales. Especialmente para los productos digitales, es fundamental agregar un complemento de descarga de archivos como WP File Download Addon.

Este complemento le permite vender productos de descarga digital en WooCommerce. El complemento WP File Download facilita la administración de archivos y categorías de archivos para productos digitales de WooCommerce. Puede crear rápidamente muchos productos de descarga digital asociados con uno o varios archivos.

Además, este complemento se integra con Dropbox, Google Drive, Microsoft OneDrive y la función Social Locker . Puede proporcionar archivos de estos servicios en la nube como descargas digitales de WooCommerce con acceso altamente restringido a través de conectores API en la nube.

Con el complemento WP File Download , la venta de productos digitales en su tienda en línea WooCommerce se ha vuelto más accesible y eficiente. Después de construir su tienda con WooCommerce Blocks, este complemento complementa perfectamente la venta de su contenido digital.

Conclusión

WooCommerce Blocks es un complemento que le permite crear una tienda en línea completa en WordPress sin escribir código. Con varios bloques, como cuadrículas de productos, filtros y exhibiciones de productos destacados, puede crear fácilmente una experiencia de compra atractiva y fácil de usar. La familiar interfaz de arrastrar y soltar hace que el desarrollo de una tienda en línea sea más rápido y eficiente.

Después de construir tu tienda online, el siguiente paso es vender productos físicos y digitales. Puede utilizar el complemento WP File Download vender productos digitales con WooCommerce , como libros electrónicos, software o contenido multimedia.

El complemento WP File Download está disponible a partir de $49 por año y ha sido utilizado por más de 60.000 miembros. ¿Entonces, Qué esperas? ¡Únase a nosotros para mejorar las ventas de productos digitales!