Guía Completa de Bloques 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 en línea en WordPress. WooCommerce Blocks ayuda a crear páginas de tienda personalizadas, mostrar tus productos y añadir características avanzadas de comercio electrónico como la filtración y búsqueda de productos, todo sin escribir una sola línea de código. 

Debes instalar el plugin de WordPress WooCommerce Blocks para usar estos nuevos bloques. Este plugin es un campo de pruebas para características experimentales que podrían añadirse al núcleo de WooCommerce.

En esta guía práctica, discutiremos 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 agregar fácilmente varias características 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 compras, cajas y más.

En términos más simples, WooCommerce Blocks son componentes pre-construidos que puedes insertar en tu sitio de WordPress utilizando el editor de bloques, lo que proporciona una forma fácil de incorporar funcionalidad de comercio electrónico impulsada por WooCommerce. Esto es parte del núcleo del plugin 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 de arrastrar y soltar familiar. aquí ...

Lista de características del bloque de WooCommerce

Después de entender qué es un bloque de WooCommerce, a continuación, discutiremos cada característica proporcionada una por una:

• Todos los productos: Muestra todos los productos de la tienda en un formato de cuadrícula.
• Filtros de productos activos: Muestra 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 un formato de cuadrícula.
• Pagar: 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 los productos destacados seleccionados.
• Filtrar por precio: Muestra un rango de precios que los clientes pueden utilizar para 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 característica proporciona opciones para mostrar productos en stock, fuera de stock o siendo reordenados.
• Filtrar por calificación: Permite a los clientes filtrar productos según las calificaciones.
• Filtrar por atributo: Filtra productos según tamaño o color.
• Productos seleccionados: Muestra productos seleccionados en un formato de cuadrícula, lo que le permite elegir qué productos mostrar específicamente.
• Mini carrito: Proporciona una vista breve del carrito de compras.
• Nuevos productos: Muestra los productos más recientes organizados en un formato de cuadrícula. Pueden personalizarse añadiendo 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 por productos: Muestra reseñas agrupadas por producto.
• Reseñas 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 productos con las calificaciones más altas en un formato de cuadrícula.

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

Además de aprender sobre las características disponibles en los bloques de WooCommerce, intentemos usar o agregar una cuadrícula de productos en WooCommerce. Asegúrese de tener instalado el plugin de bloques de WooCommerce en su sitio web. Aquí está cómo agregarlo:

1. Abra la página o entrada 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 de WooCommerce > seleccione "cuadrícula de productos".

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

En este panel, puede ajustar varias cosas, incluyendo:

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

Cómo agregar productos destacados a su página

El bloque de producto destacado le permite mostrar productos específicos en su página o entrada. Con este bloque, puede seleccionar productos, personalizar su apariencia y colocarlos en su contenido para atraer a los visitantes a los artículos que desea promocionar.

Para agregar el Bloque de Producto Destacado, siga estos pasos:

1. Abra la página o entrada donde desea agregarlo. 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 del bloque para abrir la lista de bloques, luego busque y seleccione "Producto destacado".

3. Elige los productos que deseas destacar y luego haz clic en "Listo".
4. Para personalizar la apariencia del bloque, haz 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 video).
• Agrega texto alternativo para imágenes de productos.
• Seleccione el color de superposición del bloque.
• Ajustar la opacidad del bloque.

5. Después de ajustar, puede publicar o actualizar la página para ver la visualización del bloque de productos destacados.

Cómo agregar 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 proporcionar opciones de filtrado, los clientes pueden reducir rápidamente los resultados de búsqueda a productos relevantes para ellos.

Para agregar el bloque de filtro, sigue estos pasos:

1. Abre la página o entrada donde deseas 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 precio, filtro de stock, filtro de atributo y filtro de calificación.

Ahora, analicemos cada tipo de filtro disponible. 

Agregar filtro por precio

El Bloque de Producto de Filtrado 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 regular. Puedes añadir botones si lo deseas y ajustar su nivel de encabezado.

Agregar filtro por atributo

El Bloque de Filtro de Atributos de 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 el número de productos, seleccionar el nivel de encabezado, agregar botones y elegir el filtro.

Agregar filtro por stock

El Bloque de Filtro de Producto por Estado de Stock permite a los usuarios mostrar productos según su estado de disponibilidad. Pueden mostrar productos disponibles (en stock), sin stock (agotados) o en pedido pendiente. También puede configurarse para mostrar el número de productos, seleccionar el nivel de encabezado y agregar botones. Este bloque se puede usar con otros bloques de WooCommerce, como Todos los Productos. Desafortunadamente, este bloque no proporciona una vista previa cuando se agrega a la página.

Bloques de carrito y pago

El bloque de carrito de compras agrega una pantalla de carrito de compras a tu página. Puedes incluir una calculadora de costo de envío, seleccionar un enlace para el botón de pago y establecer una pantalla en modo oscuro. Este bloque también proporciona una notificación que puedes 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 retroalimentación.

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 establecer 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 puede personalizar individualmente. Desafortunadamente, este bloque no proporciona una vista previa una vez que se agrega a la página.

Cómo personalizar la página de la tienda 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ígnale el nombre "Tienda".

2. Agrega el bloque de búsqueda de productos.

3. Agrega el bloque de lista de categorías de productos

Luego, establezca el estilo de visualización en el desplegable.

4. Agregue el bloque de filtro de precio.
5. Agregue el bloque de productos destacados y seleccione los productos que desea resaltar. Configure según sea necesario.

6. Agregue el bloque Todos los Productos.

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

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

Construye tu tienda en línea con WooCommerce Block y vende tus productos

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 productos digitales, es crucial agregar un plugin de descarga de archivos como WP File Download Addon.

Este plugin te permite vender productos de descarga digital en WooCommerce. El complemento WP File Download hace que la gestión de archivos y categorías de archivos para productos digitales de WooCommerce sea fácil. Puedes crear rápidamente muchos productos de descarga digital asociados con uno o varios archivos.

Además, este plugin se integra con Dropbox, Google Drive, Microsoft OneDrivey la función Social Locker . Puede 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 su tienda en línea WooCommerce se ha vuelto más accesible y eficiente. Después de construir su tienda con Bloques de WooCommerce, este plugin complementa perfectamente la venta de su contenido digital.

Conclusión

WooCommerce Blocks es un plugin que le permite construir una tienda en línea completa en WordPress sin escribir código. Con varios bloques, como cuadrículas de productos, filtros y visualizaciones 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 desarrollar una tienda en línea sea más rápido y eficiente.

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

WP File Download El complemento está disponible a partir de $49 por año y ha sido utilizado por más de 60,000 miembros. ¿Qué estás esperando? ¡Únete a nosotros para una mejor venta de productos digitales!