Guía completa del bloque de WooCommerce

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

Debes instalar el plugin WordPress WooCommerce Blocks para usar estos nuevos bloques. Este plugin es un campo de pruebas para funciones experimentales que podrían añadirse 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 WooCommerce Block?

WooCommerce Blocks es una colección de bloques integrados con el editor de bloques de WordPress (Gutenberg) que te permiten añadir fácilmente diversas funciones y funcionalidades de WooCommerce a tus páginas y entradas. Sin escribir código, estos bloques te permiten mostrar productos, categorías de productos, filtros de búsqueda, carritos de compra, pagos y mucho más.

En términos más simples, los bloques de WooCommerce son componentes preconstruidos que puedes insertar en tu sitio de WordPress usando el editor de bloques, lo que proporciona una forma sencilla de incorporar funcionalidades de comercio electrónico impulsadas por WooCommerce. Esto es parte del plugin principal de WooCommerce, por lo que los obtienes automáticamente cuando instalas y activas WooCommerce en tu sitio de WordPress.

Además, se integran perfectamente con el editor de bloques de WordPress, lo que te 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 here ...

Lista de funciones del bloque de WooCommerce

Después de entender qué es el bloque de WooCommerce, a continuación, analizaremos cada función que ofrece 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 (similar a botones).
• Todas las reseñas: Muestra todas las reseñas de productos.
• Producto más vendido: Muestra los productos más vendidos en formato de cuadrícula.
• Finalizar compra: Muestra un formulario que permite a los clientes completar sus pedidos.
• Carrito: Muestra el carrito de compra.
• Categoría destacada: Destaca categorías de productos específicas junto con botones de llamada a la acción.
• Producto destacado: Muestra los productos destacados seleccionados.
• Filtrar por precio: Muestra un rango de precios para que los clientes puedan filtrar productos. También puedes habilitar un rango de precios editable haciendo clic en un botón o texto aquí.
• Filtrar por stock: Permite filtrar productos según su estado de disponibilidad de stock. Esta función ofrece opciones para mostrar productos en stock, agotados o en proceso de reposición.
• Filtrar por valoración: Permite a los clientes filtrar productos según las valoraciones.
• Filtrar por atributo: Filtra productos según el tamaño o el color.
• Productos seleccionados manualmente: Muestra productos seleccionados manualmente en formato de cuadrícula, lo que te permite elegir específicamente qué productos mostrar.
• Mini carrito: Proporciona una vista breve del carrito de compras.
• Productos más recientes: Muestra los productos más recientes organizados en un formato de cuadrícula. Se pueden personalizar añadiendo/eliminando elementos como el título, el precio, la valoración y el botón de compra.
• Producto en oferta: Muestra los productos actualmente en oferta en formato de cuadrícula y se puede personalizar añadiendo/eliminando elementos como el título, el precio, la valoración y el botón de compra.
• Búsqueda de productos: Añade una barra de búsqueda para facilitar a los clientes la búsqueda de productos.
• Producto por etiqueta: Muestra productos con etiquetas específicas en formato de cuadrícula.
• Producto por atributo: Muestra productos con atributos específicos (color, talla, etc.) en formato de cuadrícula.
• Producto por categoría: Muestra productos según categorías en formato de cuadrícula.
• Reseñas por producto: Muestra las reseñas agrupadas por producto.
• Reseñas por categoría: Muestra las reseñas de productos de categorías específicas.
• Producto individual: Muestra una vista detallada de un solo producto.
• Productos mejor valorados: Muestra los productos con las valoraciones más altas en formato de cuadrícula.

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

Además de aprender sobre las funciones disponibles en los bloques de WooCommerce, vamos a intentar usar o añadir una cuadrícula de productos en WooCommerce. Asegúrate de haber instalado el plugin de bloques de WooCommerce en tu sitio web. Así es como se añade:

1. Abre la página o entrada donde quieras mostrar la cuadrícula de productos, luego introduce el título "Producto".

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

3. A continuación, para configurar el bloque, ve al panel derecho.

En este panel, puedes ajustar varias cosas, entre ellas:

• Ajustes de diseño: Puedes personalizar el número de filas y columnas que se muestran en la cuadrícula de productos. Por ejemplo, estableciendo ambos en 2 para obtener una vista equilibrada.
• Configuración de contenido: Puedes mostrar un menú desplegable para ordenar los productos. Esta función permite a los clientes ordenar los productos según sus preferencias. Puedes desactivarla si no es necesaria.
• Estilo avanzado: Puedes añadir clases CSS para personalizar la apariencia.

Cómo añadir productos destacados a tu página

El bloque de Producto destacado te permite mostrar productos específicos en tu página o entrada. 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 añadir el bloque de Producto destacado, sigue estos pasos:

1. Abre la página o entrada donde quieres añadirlo. Por ejemplo, si lo colocas encima de la cuadrícula de productos, crea espacio en esa área y haz clic en el botón "+" que aparece.

2. Selecciona el botón "+" en la barra de herramientas del bloque para abrir la lista de bloques, luego busca y selecciona "Producto destacado".

3. Elige los productos que quieres destacar y luego haz clic en "Hecho".
4. Para personalizar la apariencia del bloque, haz clic en "Ajustes". En el panel de ajustes, puedes modificar varias cosas, entre ellas:

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

5. Después de ajustar, puedes publicar o actualizar la página para ver la visualización de tu bloque de producto destacado.

Cómo añadir bloques de filtro en WooCommerce

El bloque de filtro de WooCommerce facilita a los clientes encontrar productos que coincidan con sus criterios de búsqueda. Al ofrecer opciones de filtrado, los clientes pueden acotar rápidamente los resultados de búsqueda a los productos que les resultan relevantes.

Para añadir el bloque de filtro, sigue estos pasos:

1. Abre la página o entrada donde quieras colocar el bloque de filtro.
2. Determina la ubicación deseada para colocar el bloque de filtro.
3. En la barra de herramientas del editor de bloques, haz clic en el botón "+" y busca opciones de filtro de WooCommerce como Filtro de precio, Filtro de stock, Filtro de atributos y Filtro de valoraciones.

Ahora, hablemos de cada tipo de filtro disponible. 

Añadir filtro por precio

El bloque de producto de filtro de precio te permite añadir una función de filtrado que permite a los usuarios seleccionar el rango de precio deseado. El rango de precio se puede mostrar como botones editables o texto normal. Puedes añadir botones si lo deseas y ajustar su nivel de encabezado.

Añadir filtro por atributo

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

Añadir filtro por stock

El bloque de filtro de productos por estado de stock permite a los usuarios mostrar productos según su estado de disponibilidad. Pueden mostrar productos disponibles (en stock), agotados (sin stock) o en reserva. También puedes configurarlo para mostrar el número de productos, seleccionar el nivel de encabezado y añadir botones. Este bloque se puede usar con otros bloques de WooCommerce, como Todos los productos. Lamentablemente, este bloque no proporciona una vista previa cuando se añade a la página.

Bloques de carrito y pago

nuestroEl bloque de carrito de compras añade una visualización del carrito de compras a tu página. Puedes 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 puedes establecer la página como la página de carrito de compras predeterminada en los ajustes de WooCommerce. También se incluye un enlace para proporcionar comentarios.

Mientras tanto, el bloque de pago proporciona un formulario de pago para tu carrito de compras. Se te informará que esta página se puede establecer como la página de pago predeterminada en los ajustes 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 añade a la página.

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

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

1. Crea una página nueva y nómbrala "Tienda".

2. Añade el bloque de búsqueda de productos.

3. Añade el bloque Lista de categorías de productos

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

4. Añade el bloque Filtro de precio.
5. Añade el bloque Productos destacados y selecciona los productos que quieres destacar. Configúralo según sea necesario.

6. Añade el bloque Todos los productos .

Establece el número de columnas y filas en 2, y desactiva la opción del menú desplegable de ordenación.

7. Por último, publica la página para ver el diseño final de la página de tienda que has creado.

Crea tu tienda online con WooCommerce Block y vende tus productos

Después de crear con éxito una página de tienda personalizada con WooCommerce Blocks, ya puedes empezar a vender tus productos físicos y digitales. Especialmente para los productos digitales, es crucial añadir un plugin de descarga de archivos como WP File Download Addon.

Este plugin te permite vender productos de descarga digital en WooCommerce. WP File Download Addon facilita la gestión de archivos y categorías de archivos para productos digitales de WooCommerce. Puedes crear rápidamente muchos productos de descarga digital asociados a uno o varios archivos.

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

Con el complemento WP File Download , vender productos digitales en tu tienda online de WooCommerce se ha vuelto más accesible y eficiente. Después de crear tu tienda con WooCommerce Blocks, este plugin complementa perfectamente la venta de tu contenido digital.

Conclusión

WooCommerce Blocks es un plugin que te permite crear una tienda online completa en WordPress sin escribir código. Con diversos bloques, como cuadrículas de productos, filtros y visualizaciones de productos destacados, puedes crear fácilmente una experiencia de compra atractiva y fácil de usar. La conocida interfaz de arrastrar y soltar hace que desarrollar una tienda online sea más rápido y eficiente.

Después de crear tu tienda online, el siguiente paso es vender productos físicos y digitales. Puedes utilizar el plugin WP File Download Addon para vender productos digitales con WooCommerce, como ebooks, software o contenido multimedia.

El complemento WP File Download está disponible desde $49 al año y ha sido utilizado por más de 60.000 miembros. Entonces, ¿a qué estás esperando? ¡Únete a nosotros para mejorar tus ventas de productos digitales!