Los Bloques de WooCommerce te ayudan a crear páginas de tienda personalizadas, mostrar tus productos y añadir funciones avanzadas de comercio electrónico como filtrado y búsqueda — todo ello sin escribir una sola línea de código.
Muchos bloques vienen con WooCommerce por defecto, pero algunos nuevos no. Puedes utilizar estos nuevos bloques en tu tienda WooCommerce instalando el plugin WooCommerce Blocks WordPress. Este plugin es un campo de pruebas para características experimentales y posibles futuras incorporaciones a los Bloques del core de WooCommerce.
Con Kinsta, integrar los bloques WooCommerce en WordPress es muy sencillo, ya que puedes incluir WooCommerce durante el proceso de configuración marcando una casilla. Esta integración facilita la creación de una tienda online rápida y sin esfuerzo.
Esta guía práctica te enseña a añadir funciones de WooCommerce a tu sitio de WordPress utilizando los Bloques de WooCommerce.
Requisitos Previos
Para seguir esta guía, asegúrate de que tienes:
- WooCommerce instalado y activado en tu panel de WordPress
- Familiaridad con WordPress
Si aún no tienes un sitio de WordPress, puedes crear un sitio de WordPress con el panel de control de Kinsta o localmente a través de DevKinsta. Una vez que tengas tu sitio, importa estos productos de muestra para tu tienda WooCommerce.
Explorar los Bloques de WooCommerce
El editor de bloques por defecto de WordPress, que se introdujo con la versión 5.0, es el editor Gutenberg. Sustituye el editor clásico por un sistema basado en bloques, que permite a los usuarios crear y personalizar contenidos visualmente atractivos sin necesidad de tener grandes conocimientos de programación front-end.
Los Bloques de WooCommerce se integran a la perfección con la intuitiva interfaz de arrastrar y soltar del editor Gutenberg, ofreciendo un conjunto de bloques dedicados diseñados para la visualización de productos, la gestión del carrito, los procesos de pago y mucho más.
Esta integración te permite aprovechar al máximo la flexibilidad y sencillez del editor de bloques, a la vez que adaptas tu sitio de WordPress para un rendimiento óptimo del comercio electrónico.
Para utilizar los Bloques WooCommerce, empieza por abrir o crear una página o entrada. Haz clic en el botón + de la barra superior para ver todos los bloques y, a continuación, navega hasta la sección WOOCOMMERCE. Aquí tienes un breve resumen de los diferentes bloques:
- Búsqueda de Productos — Añade una barra de búsqueda para realizar búsquedas rápidas de productos de los clientes.
- Todos los Productos — Muestra todos los productos de la tienda en una cuadrícula.
- Todas las Opiniones — Muestra todas las opiniones de los productos.
- Pago Clásico — Muestra el shortcode de pago clásico.
- Carrito Clásico — Muestra el shortcode del carrito clásico.
- Cuenta de Cliente — Habilita las funciones de inicio y cierre de sesión del cliente.
- Categoría Destacada — Destaca una categoría de producto y una llamada a la acción (CTA) para fomentar respuestas rápidas.
- Producto Destacado — Destaca un producto o variación y una CTA.
- Filtros Activos — Muestra los filtros activos actualmente.
- Filtrar por Precio — Muestra un rango de precios que los clientes pueden utilizar para filtrar productos.
- Filtrar por Existencias — Permite filtrar productos por estado de inventario.
- Filtrar por Atributo — Filtra los productos en función de atributos como la talla o el color.
- Filtrar por Reseñas — Permite a los clientes filtrar los productos por sus reseñas.
- Producto Seleccionado a Mano — Muestra una selección de productos elegidos a mano en una cuadrícula.
- Mini Carrito — Proporciona un botón de vista rápida del carrito.
- Avisos de la tienda — Muestra notificaciones dirigidas al cliente generadas por WooCommerce u otras extensiones.
- Productos Más Vendidos — Muestra una cuadrícula de los productos más vendidos de tu tienda.
- Lista de Categorías de Productos — Muestra todas las categorías de productos en forma de lista o desplegable.
- Productos por Categoría — Muestra una cuadrícula de productos de las categorías seleccionadas.
- Colección de Productos (Beta) — Muestra los productos de una colección designada.
- Productos Más Nuevos — Muestra los productos más recientes en una cuadrícula.
- Productos en Oferta — Muestra los productos en oferta en una cuadrícula.
- Productos por Etiqueta — Muestra los productos con la etiqueta seleccionada en una cuadrícula.
- Productos Mejor Valorados — Muestra los productos mejor valorados en una cuadrícula.
- Productos por Atributo — Muestra los productos con los atributos seleccionados en una cuadrícula.
- Reseñas por Categoría — Muestra las reseñas de productos de las categorías especificadas.
- Reseñas por Producto — Muestra las reseñas organizadas por producto.
- Producto Único — Muestra un único producto.
- Carrito — Muestra el carrito de la compra.
- Pago — Muestra el formulario que permite a los clientes enviar pedidos.
Ahora ya sabes lo que representa cada bloque. Utilicemos algunos de estos bloques para crear una experiencia de comercio electrónico.
«Usar el bloque de Cuadrícula de Productos en WooCommerce
Un bloque de cuadrícula de productos es una herramienta versátil para mostrar los productos de tu tienda en un formato de cuadrícula organizado en tu sitio de WordPress. A continuación te explicamos cómo añadir y personalizar un bloque de cuadrícula de productos:
- Ve a la página o entrada donde quieres que se muestren los productos. Asigna un título como «Productos»
- Haz clic en el botón + de la barra de navegación superior para mostrar todos los bloques. Desplázate hasta la sección WOOCOMMERCE y selecciona Todos los Productos. Esta acción muestra tus productos en un diseño de cuadrícula en la página.
Utilizar el Bloque WooCommerce Todos los Productos para mostrar los productos en Cuadrícula - Para configurar este bloque, utiliza el panel de configuración del bloque situado en la parte derecha. Puedes acceder a la configuración haciendo clic en el icono Configuración (el segundo icono situado más a la derecha en la barra de navegación superior).
Panel de configuración para ajustar el bloque Todos los productos. Aquí puedes adaptar el diseño, el contenido y el estilo de la cuadrícula:
- Configuración del Diseño: Ajusta el número de filas y columnas. Por ejemplo, establece ambas en 2 para un aspecto equilibrado.
- Configuración del Contenido: Decide si quieres incluir un menú desplegable de clasificación para los clientes. Esta función permite a los clientes clasificar los productos en el orden que elijan. Puedes desactivarlo si lo prefieres.
- Estilo Avanzado: Si es necesario, puedes añadir clases CSS para un estilo más sofisticado.
- Obtén una vista previa de la página una vez que hayas finalizado las configuraciones para asegurarte de que todo aparece según lo previsto. A continuación, haz clic en el botón Publicar. Este paso te permite hacer que la página sea accesible de forma pública, privada o con protección por contraseña, según prefieras.
La página Productos actualizada muestra los productos en una cuadrícula de 2 por 2 y refleja una barra de navegación.
Añade un Bloque de Producto Destacado a tu página o publicación
El bloque Producto Destacado te permite destacar un producto en tu página o publicación. Puedes seleccionar un producto, personalizar su configuración de visualización y añadirlo a tu contenido para llamar la atención sobre un artículo concreto que quieras mostrar.
Sigue estos pasos para añadir un bloque de producto destacado:
- Comienza por navegar hasta la página o entrada en la que quieres mostrar el producto. Imagina que estás diseñando una cuadrícula de productos y quieres colocar el producto destacado en la parte superior. Crea un espacio en ese lugar y verás un botón + a la izquierda.
Alternativamente, si tienes un bloque existente cerca del lugar deseado, haz clic en los tres puntos verticales para que aparezca un menú. Puedes elegir Añadir antes o Añadir después.
Añadir el bloque Producto destacado antes del bloque Todos los productos. - Selecciona el botón + en la barra de navegación superior para mostrar todos los bloques y busca Producto Destacado.
Selecciona un producto como producto destacado con el bloque Producto Destacado - Elige el producto que quieres mostrar. A continuación, haz clic en Listo.
- Para dar a tu bloque Producto Destacado un aspecto único, haz clic en Configuración. Desde el panel de configuración del bloque, puedes:
- Decidir si quieres mostrar la descripción y el precio del producto.
- Configurar cómo deben aparecer tus medios (imágenes y vídeos).
- Especificar el texto alternativo para la imagen del producto.
- Elegir el color de superposición del bloque.
- Ajusta la opacidad del bloque.
Ajustar la configuración del bloque Producto destacado. - Una vez que hayas realizado todos los ajustes necesarios, puedes publicar tu página o actualizarla si ya está activa. Esto te permitirá ver el bloque en acción y asegurarte de que tiene el aspecto que deseas.
Vista previa de la página de Productos actualizada mostrando el artículo de gorro destacado encima de la cuadrícula de productos.
Utilizar bloques de Filtro en WooCommerce
Los bloques de filtro permiten a tus clientes refinar las búsquedas de productos basándose en criterios específicos, ayudándoles a localizar rápidamente los productos que coinciden con sus preferencias o requisitos.
- Navega hasta la página o entrada donde quieras añadir los bloques. Esta guía utiliza la misma página de Productos de los pasos anteriores.
- Elige dónde quieres añadir los filtros.
- Haz clic en el botón + de la barra de navegación superior para mostrar todos los bloques. Desplázate hasta la sección WOOCOMMERCE y verás una opción de filtro por precio, stock, atributo y valoración. Por ejemplo, si eliges Filtrar por Precio.
Añadir el bloque Filtrar por Precio
Al seleccionar este bloque, puedes mostrar una barra de rango de precios que permita a los usuarios filtrar qué productos aparecen en la página en función del rango de precios que deseen. Puedes personalizar la configuración del bloque en el panel derecho para adaptarla a tus necesidades.
Añadir el bloque Filtro por Atributo
También puedes utilizar el bloque Filtro por Atributo.
Puedes elegir un atributo específico, como Color, y luego configurar los ajustes en consecuencia. Por ejemplo, puedes activar Mostrar recuento de productos para mostrar el número de productos disponibles en cada color.
A continuación, puedes ver la página en producción y probar la funcionalidad de los botones de filtro.
Siguiendo estos pasos, puedes ofrecer a tus clientes una experiencia de compra fluida, permitiéndoles refinar fácilmente sus búsquedas de productos en función de varios criterios, lo que en última instancia aumentará su satisfacción y les ayudará a encontrar los productos deseados.
Páginas de carrito y pago
Las funciones de carrito y pago de tu tienda web deben ser intuitivas y totalmente funcionales para que el usuario tenga una experiencia fluida. Garantizar una excelente experiencia del cliente depende de la gestión eficaz de los artículos del carrito y de facilitar un proceso de pago sin esfuerzo.
WooCommerce crea las páginas Carrito y Pago por defecto utilizando los bloques adecuados. Los clientes pueden añadir productos a su carrito y acceder a él a través de la barra de navegación.
Tras confirmar el contenido de su carrito, tu cliente puede seleccionar el botón Proceder al Pago, rellenar los datos necesarios y realizar su pedido.
Cómo crear una página de Tienda personalizada
Ahora que has aprendido a utilizar determinados Bloques de WooCommerce, el siguiente paso consiste en combinarlos para crear una página de tienda personalizada fácil de usar con los siguientes bloques:
- Búsqueda de Productos
- Filtrar por Precio
- Categorías de Productos
- Producto Destacado
- Todos los Productos
Para crear este diseño de tienda personalizado, crea una nueva página y sigue los pasos que se indican a continuación.
- Introduce «Tienda» como título de la página.
La página Tienda en modo edición. - Siguiendo los mismos pasos que antes para añadir un bloque, añade el bloque Búsqueda de Productos. No apliques ninguna configuración.
Añadir el bloque Búsqueda de productos. - Añade el bloque Lista de Categorías de Productos.
Añadir el bloque Lista de categorías de productos. En la página de configuración del bloque, establece el ESTILO DE PANTALLA en Desplegable.
Ajustar la configuración del bloque Lista de categorías de productos. - A continuación, añade el bloque Filtro por Precio. No configures nada para este bloque.
- Añade el bloque Producto Destacado y selecciona el producto a mostrar. Aplica las mismas configuraciones que al bloque Producto Destacado que hiciste antes.
La página Tienda muestra el producto destacado de la gorra con algunas configuraciones para el producto destacado. - Añade el bloque Todos los Productos.
Añadir el bloque Todos los productos. Para la configuración de este bloque, establece los valores COLUMNAS y FILAS en 2 y desmarca el Desplegable Mostrar Orden.
Ajustar la configuración del bloque Todos los productos. - Publica la página y visualiza los resultados.
Vista previa de la página Tienda. 
Vista previa de la página Tienda.
Cómo supervisar y analizar el rendimiento de los bloques
Las sólidas herramientas de Kinsta supervisan y analizan el rendimiento de las páginas que utilizan Bloques de WooCommerce.
Herramienta APM de Kinsta
La herramienta de Monitorización del Rendimiento de la Aplicación (APM, Application Performance Monitoring) de Kinsta te permite monitorizar el rendimiento de las páginas que contienen Bloques de WooCommerce. Captura información con marca de tiempo sobre los procesos PHP, las consultas a la base de datos MySQL y otras métricas cruciales, permitiéndote seguir y analizar las transacciones facilitadas por WooCommerce.
Por ejemplo, puedes analizar la duración y frecuencia de las interacciones y los posibles cuellos de botella asociados a estas páginas. Con esta información, puedes solucionar problemas con precisión y optimizar el rendimiento.
Herramienta de analítica de Kinsta
Evaluar el impacto de los Bloques de WooCommerce en la participación de los usuarios y en las ventas requiere un enfoque polifacético. Las completas herramientas de analítica de Kinsta desempeñan un papel crucial en este sentido. El uso de las funciones de análisis de WordPress en el panel de control de MyKinsta te proporciona información valiosa sobre diversas métricas de rendimiento que influyen directamente en la experiencia del usuario y, en consecuencia, en las ventas.
- La sección Recursos del panel de control de MyKinsta realiza un seguimiento de las visitas totales, el espacio en disco y el uso de ancho de banda de tu sitio. Proporciona una visión cuantitativa del tráfico del sitio y del uso de recursos.
- La sección Rendimiento incluye métricas como el tiempo medio de respuesta PHP + MySQL y el uso de AJAX. Estas estadísticas te ayudan a controlar la capacidad de respuesta y la interactividad de las páginas que utilizan Bloques de WooCommerce.
- La sección Respuesta proporciona desgloses de códigos de respuesta y análisis de errores, que te ayudan a comprender mejor las interacciones de los usuarios y los posibles obstáculos que puedan encontrar.
- La sección Geo & IP te permite rastrear el uso de la red de distribución de contenidos (CDN), la eficacia de la caché y las perspectivas geográficas. Esta información ayuda a perfeccionar tu sitio en función del comportamiento del usuario, su ubicación y los datos de rendimiento.
Controlando de cerca estas analíticas, puedes identificar posibles cuellos de botella y optimizar tus páginas utilizando Bloques de WooCommerce para garantizar una experiencia de usuario fluida y atractiva.
Puedes leer nuestra guía definitiva sobre 18 potentes formas de acelerar tu tienda WooCommerce para conocer más consejos. La velocidad es crucial para las tiendas online, ya que los sitios que se cargan lentamente provocan la frustración del usuario y la pérdida de ventas.
Resumen
Esta guía ha explorado las capacidades de los Bloques de WooCommerce, desde añadir cuadrículas de productos y productos destacados hasta implementar potentes bloques de filtros. También destacaba la importancia de las secciones del carrito y de pago, elementos críticos para guiar a los clientes a través de una experiencia de compra fluida.
Combinar estratégicamente varios bloques de WooCommerce permite crear un diseño intuitivo y visualmente atractivo. El proceso implica una cuidadosa selección, configuración y disposición de los bloques para satisfacer funcionalidades específicas y las preferencias de los clientes.
Elegir el servicio de alojamiento de WordPress de Kinsta mejora significativamente el rendimiento y la fiabilidad de tus sitios de WooCommerce. Con configuraciones de servidor optimizadas, medidas de seguridad robustas y escalabilidad sin fisuras, Kinsta garantiza que tu tienda online funcione con la máxima eficiencia.
Tanto si utilizas bloques de WooCommerce para mostrar productos, filtros o funcionalidades del carrito, la infraestructura de alojamiento de Kinsta proporciona la velocidad y estabilidad necesarias para ofrecer una experiencia de compra excepcional a tus clientes.
¿Tienes experiencia en el uso de bloques de WooCommerce? Si es así, ¿qué bloque es tu favorito y qué nuevo bloque te gustaría que se añadiera? Comparte tus opiniones en la sección de comentarios.
Deja una respuesta