{"id":73091,"date":"2024-01-23T19:21:23","date_gmt":"2024-01-23T18:21:23","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=73091&#038;preview=true&#038;preview_id=73091"},"modified":"2024-01-25T09:45:33","modified_gmt":"2024-01-25T08:45:33","slug":"bloques-woocommerce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/","title":{"rendered":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress"},"content":{"rendered":"<p>Los Bloques de WooCommerce te ayudan a crear p\u00e1ginas de tienda personalizadas, mostrar tus productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como filtrado y b\u00fasqueda \u2014 todo ello sin escribir una sola l\u00ednea de c\u00f3digo.<\/p>\n<p>Muchos bloques vienen con WooCommerce por defecto, pero algunos nuevos no. Puedes utilizar estos nuevos bloques en tu tienda WooCommerce instalando el <a href=\"https:\/\/wordpress.org\/plugins\/woo-gutenberg-products-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugin WooCommerce Blocks WordPress<\/a>. Este plugin es un campo de pruebas para caracter\u00edsticas experimentales y posibles futuras incorporaciones a los Bloques del core de WooCommerce.<\/p>\n<p>Con Kinsta, integrar los bloques WooCommerce en WordPress es muy sencillo, ya que puedes incluir WooCommerce durante el proceso de configuraci\u00f3n <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/como-empezar-con-wordpress\/sitio-nuevo\/#install-woocommerce\">marcando una casilla<\/a>. Esta integraci\u00f3n facilita la creaci\u00f3n de una tienda online r\u00e1pida y sin esfuerzo.<\/p>\n<p>Esta gu\u00eda pr\u00e1ctica te ense\u00f1a a a\u00f1adir funciones de WooCommerce a tu sitio de WordPress utilizando los Bloques de WooCommerce.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Requisitos Previos<\/h2>\n<p>Para seguir esta gu\u00eda, aseg\u00farate de que tienes:<\/p>\n<ul>\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a> instalado y activado en tu panel de WordPress<\/li>\n<li><a href=\"https:\/\/kinsta.com\/wordpress\/\">Familiaridad con WordPress<\/a><\/li>\n<\/ul>\n<p>Si a\u00fan no tienes un sitio de WordPress, puedes <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/como-empezar-con-wordpress\/sitio-nuevo\/\">crear un sitio de WordPress con el panel de control de Kinsta<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/construir-sitio-wordpress-sin-conexion\/\">localmente a trav\u00e9s de DevKinsta<\/a>. Una vez que tengas tu sitio, importa <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">estos productos de muestra<\/a> para tu tienda WooCommerce.<\/p>\n<h2>Explorar los Bloques de WooCommerce<\/h2>\n<p>El editor de bloques por defecto de WordPress, que se introdujo con la versi\u00f3n 5.0, es el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor Gutenberg<\/a>. Sustituye el editor cl\u00e1sico 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\u00f3n front-end.<\/p>\n<p>Los Bloques de WooCommerce se integran a la perfecci\u00f3n con la intuitiva interfaz de arrastrar y soltar del editor Gutenberg, ofreciendo un conjunto de bloques dedicados dise\u00f1ados para la visualizaci\u00f3n de productos, la gesti\u00f3n del carrito, los procesos de pago y mucho m\u00e1s.<\/p>\n<p>Esta integraci\u00f3n te permite aprovechar al m\u00e1ximo la flexibilidad y sencillez del editor de bloques, a la vez que adaptas tu sitio de WordPress para un rendimiento \u00f3ptimo del comercio electr\u00f3nico.<\/p>\n<p>Para utilizar los Bloques WooCommerce, empieza por abrir o crear una p\u00e1gina o entrada. Haz clic en el bot\u00f3n <strong>+<\/strong> de la barra superior para ver todos los bloques y, a continuaci\u00f3n, navega hasta la secci\u00f3n <strong>WOOCOMMERCE<\/strong>. Aqu\u00ed tienes un breve resumen de los diferentes bloques:<\/p>\n<ul>\n<li><strong>B\u00fasqueda de Productos<\/strong> \u2014 A\u00f1ade una barra de b\u00fasqueda para realizar b\u00fasquedas r\u00e1pidas de productos de los clientes.<\/li>\n<li><strong>Todos los Productos<\/strong> \u2014 Muestra todos los productos de la tienda en una cuadr\u00edcula.<\/li>\n<li><strong>Todas las Opiniones<\/strong> \u2014 Muestra todas las opiniones de los productos.<\/li>\n<li><strong>Pago Cl\u00e1sico<\/strong> \u2014 Muestra el shortcode de pago cl\u00e1sico.<\/li>\n<li><strong>Carrito Cl\u00e1sico<\/strong> \u2014 Muestra el shortcode del carrito cl\u00e1sico.<\/li>\n<li><strong>Cuenta de Cliente<\/strong> \u2014 Habilita las funciones de inicio y cierre de sesi\u00f3n del cliente.<\/li>\n<li><strong>Categor\u00eda Destacada<\/strong> \u2014 Destaca una categor\u00eda de producto y una llamada a la acci\u00f3n (CTA) para fomentar respuestas r\u00e1pidas.<\/li>\n<li><strong>Producto Destacado<\/strong> \u2014 Destaca un producto o variaci\u00f3n y una CTA.<\/li>\n<li><strong>Filtros Activos<\/strong> \u2014 Muestra los filtros activos actualmente.<\/li>\n<li><strong>Filtrar por Precio<\/strong> \u2014\u00a0Muestra un rango de precios que los clientes pueden utilizar para filtrar productos.<\/li>\n<li><strong>Filtrar por Existencias<\/strong> \u2014 Permite filtrar productos por estado de inventario.<\/li>\n<li><strong>Filtrar por Atributo<\/strong> \u2014 Filtra los productos en funci\u00f3n de atributos como la talla o el color.<\/li>\n<li><strong>Filtrar por Rese\u00f1as<\/strong> \u2014 Permite a los clientes filtrar los productos por sus rese\u00f1as.<\/li>\n<li><strong>Producto Seleccionado a Mano<\/strong> \u2014\u00a0Muestra una selecci\u00f3n de productos elegidos a mano en una cuadr\u00edcula.<\/li>\n<li><strong>Mini Carrito<\/strong> \u2014 Proporciona un bot\u00f3n de vista r\u00e1pida del carrito.<\/li>\n<li><strong>Avisos de la tienda<\/strong> \u2014 Muestra notificaciones dirigidas al cliente generadas por WooCommerce u otras extensiones.<\/li>\n<li><strong>Productos M\u00e1s Vendidos<\/strong> \u2014 Muestra una cuadr\u00edcula de los productos m\u00e1s vendidos de tu tienda.<\/li>\n<li><strong>Lista de Categor\u00edas de Productos<\/strong> \u2014 Muestra todas las categor\u00edas de productos en forma de lista o desplegable.<\/li>\n<li><strong>Productos por Categor\u00eda<\/strong> \u2014 Muestra una cuadr\u00edcula de productos de las categor\u00edas seleccionadas.<\/li>\n<li><strong>Colecci\u00f3n de Productos (Beta)<\/strong> \u2014 Muestra los productos de una colecci\u00f3n designada.<\/li>\n<li><strong>Productos M\u00e1s Nuevos<\/strong> \u2014\u00a0Muestra los productos m\u00e1s recientes en una cuadr\u00edcula.<\/li>\n<li><strong>Productos en Oferta<\/strong> \u2014 Muestra los productos en oferta en una cuadr\u00edcula.<\/li>\n<li><strong>Productos por Etiqueta<\/strong> \u2014 Muestra los productos con la etiqueta seleccionada en una cuadr\u00edcula.<\/li>\n<li><strong>Productos Mejor Valorados<\/strong> \u2014 Muestra los productos mejor valorados en una cuadr\u00edcula.<\/li>\n<li><strong>Productos por Atributo<\/strong> \u2014 Muestra los productos con los atributos seleccionados en una cuadr\u00edcula.<\/li>\n<li><strong>Rese\u00f1as por Categor\u00eda<\/strong> \u2014 Muestra las rese\u00f1as de productos de las categor\u00edas especificadas.<\/li>\n<li><strong>Rese\u00f1as por Producto<\/strong> \u2014 Muestra las rese\u00f1as\u00a0organizadas por producto.<\/li>\n<li><strong>Producto \u00danico<\/strong> \u2014 Muestra un \u00fanico producto.<\/li>\n<li><strong>Carrito<\/strong> \u2014 Muestra el carrito de la compra.<\/li>\n<li><strong>Pago<\/strong> \u2014 Muestra el formulario que permite a los clientes enviar pedidos.<\/li>\n<\/ul>\n<p>Ahora ya sabes lo que representa cada bloque. Utilicemos algunos de estos bloques para crear una experiencia de comercio electr\u00f3nico.<\/p>\n<h2>\u00abUsar el bloque de Cuadr\u00edcula de Productos en WooCommerce<\/h2>\n<p>Un bloque de cuadr\u00edcula de productos es una herramienta vers\u00e1til para mostrar los productos de tu tienda en un formato de cuadr\u00edcula organizado en tu sitio de WordPress. A continuaci\u00f3n te explicamos c\u00f3mo a\u00f1adir y personalizar un bloque de cuadr\u00edcula de productos:<\/p>\n<ol start=\"1\">\n<li>Ve a la p\u00e1gina o entrada donde quieres que se muestren los productos. Asigna un t\u00edtulo como \u00abProductos\u00bb<\/li>\n<li>Haz clic en el bot\u00f3n <strong>+<\/strong> de la barra de navegaci\u00f3n superior para mostrar todos los bloques. Despl\u00e1zate hasta la secci\u00f3n <strong>WOOCOMMERCE<\/strong> y selecciona <strong>Todos los Productos<\/strong>. Esta acci\u00f3n muestra tus productos en un dise\u00f1o de cuadr\u00edcula en la p\u00e1gina.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/all-products-woocommerce-block.png\" alt=\"Utilizar el Bloque WooCommerce Todos los Productos para mostrar los productos en Cuadr\u00edcula\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Utilizar el Bloque WooCommerce Todos los Productos para mostrar los productos en Cuadr\u00edcula<\/figcaption><\/figure><\/li>\n<li>Para configurar este bloque, utiliza el panel de configuraci\u00f3n del bloque situado en la parte derecha. Puedes acceder a la configuraci\u00f3n haciendo clic en el icono <strong>Configuraci\u00f3n<\/strong> (el segundo icono situado m\u00e1s a la derecha en la barra de navegaci\u00f3n superior).\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/all-products-setting.png\" alt=\"Panel de configuraci\u00f3n para ajustar el bloque Todos los Productos\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Panel de configuraci\u00f3n para ajustar el bloque Todos los productos.<\/figcaption><\/figure>\n<p>Aqu\u00ed puedes adaptar el dise\u00f1o, el contenido y el estilo de la cuadr\u00edcula:<\/p>\n<ul>\n<li><strong>Configuraci\u00f3n del Dise\u00f1o:<\/strong> Ajusta el n\u00famero de filas y columnas. Por ejemplo, establece ambas en 2 para un aspecto equilibrado.<\/li>\n<li><strong>Configuraci\u00f3n del Contenido:<\/strong> Decide si quieres incluir un men\u00fa desplegable de clasificaci\u00f3n para los clientes. Esta funci\u00f3n permite a los clientes clasificar los productos en el orden que elijan. Puedes desactivarlo si lo prefieres.<\/li>\n<li><strong>Estilo Avanzado:<\/strong> Si es necesario, puedes a\u00f1adir clases CSS para un estilo m\u00e1s sofisticado.<\/li>\n<\/ul>\n<\/li>\n<li>Obt\u00e9n una vista previa de la p\u00e1gina una vez que hayas finalizado las configuraciones para asegurarte de que todo aparece seg\u00fan lo previsto. A continuaci\u00f3n, haz clic en el bot\u00f3n <strong>Publicar<\/strong>. Este paso te permite hacer que la p\u00e1gina sea accesible de forma p\u00fablica, privada o con protecci\u00f3n por contrase\u00f1a, seg\u00fan prefieras.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-page.png\" alt=\"La p\u00e1gina Productos actualizada muestra los productos en una cuadr\u00edcula de 2 por 2 y refleja una barra de navegaci\u00f3n\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La p\u00e1gina Productos actualizada muestra los productos en una cuadr\u00edcula de 2 por 2 y refleja una barra de navegaci\u00f3n.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>A\u00f1ade un Bloque de Producto Destacado a tu p\u00e1gina o publicaci\u00f3n<\/h2>\n<p>El bloque Producto Destacado te permite destacar un producto en tu p\u00e1gina o publicaci\u00f3n. Puedes seleccionar un producto, personalizar su configuraci\u00f3n de visualizaci\u00f3n y a\u00f1adirlo a tu contenido para llamar la atenci\u00f3n sobre un art\u00edculo concreto que quieras mostrar.<\/p>\n<p>Sigue estos pasos para a\u00f1adir un bloque de producto destacado:<\/p>\n<ol start=\"1\">\n<li>Comienza por navegar hasta la p\u00e1gina o entrada en la que quieres mostrar el producto. Imagina que est\u00e1s dise\u00f1ando una cuadr\u00edcula de productos y quieres colocar el producto destacado en la parte superior. Crea un espacio en ese lugar y ver\u00e1s un bot\u00f3n <strong>+<\/strong> a la izquierda.<br \/>\nAlternativamente, si tienes un bloque existente cerca del lugar deseado, haz clic en los tres puntos verticales para que aparezca un men\u00fa. Puedes elegir <strong>A\u00f1adir antes<\/strong> o <strong>A\u00f1adir despu\u00e9s<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/menu-dialog.png\" alt=\"La p\u00e1gina Productos muestra un men\u00fa con las opciones Copiar, A\u00f1adir antes, A\u00f1adir despu\u00e9s, Agrupar, Bloquear, Crear patr\u00f3n y Eliminar\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A\u00f1adir el bloque Producto destacado antes del bloque Todos los productos.<\/figcaption><\/figure><\/li>\n<li>Selecciona el bot\u00f3n <strong>+<\/strong> en la barra de navegaci\u00f3n superior para mostrar todos los bloques y busca <strong>Producto Destacado<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/featured-product-block.png\" alt=\"Selecciona un producto como producto destacado con el bloque Producto Destacado\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Selecciona un producto como producto destacado con el bloque Producto Destacado<\/figcaption><\/figure><\/li>\n<li>Elige el producto que quieres mostrar. A continuaci\u00f3n, haz clic en <strong>Listo<\/strong>.<\/li>\n<li>Para dar a tu bloque Producto Destacado un aspecto \u00fanico, haz clic en <strong>Configuraci\u00f3n<\/strong>. Desde el panel de configuraci\u00f3n del bloque, puedes:\n<ul>\n<li>Decidir si quieres mostrar la descripci\u00f3n y el precio del producto.<\/li>\n<li>Configurar c\u00f3mo deben aparecer tus medios (im\u00e1genes y v\u00eddeos).<\/li>\n<li>Especificar el texto alternativo para la imagen del producto.<\/li>\n<li>Elegir el color de superposici\u00f3n del bloque.<\/li>\n<li>Ajusta la opacidad del bloque.<\/li>\n<\/ul>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/block-settings-featured-product.png\" alt=\"El panel de ajustes del bloque con la opci\u00f3n Superposici\u00f3n y la Opacidad\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajustar la configuraci\u00f3n del bloque Producto destacado.<\/figcaption><\/figure><\/li>\n<li>Una vez que hayas realizado todos los ajustes necesarios, puedes publicar tu p\u00e1gina o actualizarla si ya est\u00e1 activa. Esto te permitir\u00e1 ver el bloque en acci\u00f3n y asegurarte de que tiene el aspecto que deseas.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-page-1.png\" alt=\"Vista previa de la p\u00e1gina actualizada de Productos mostrando el art\u00edculo de gorro destacado encima de la cuadr\u00edcula de productos\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vista previa de la p\u00e1gina de Productos actualizada mostrando el art\u00edculo de gorro destacado encima de la cuadr\u00edcula de productos.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Utilizar bloques de Filtro en WooCommerce<\/h2>\n<p>Los bloques de filtro permiten a tus clientes refinar las b\u00fasquedas de productos bas\u00e1ndose en criterios espec\u00edficos, ayud\u00e1ndoles a localizar r\u00e1pidamente los productos que coinciden con sus preferencias o requisitos.<\/p>\n<ol start=\"1\">\n<li>Navega hasta la p\u00e1gina o entrada donde quieras a\u00f1adir los bloques. Esta gu\u00eda utiliza la misma p\u00e1gina de <strong>Productos<\/strong> de los pasos anteriores.<\/li>\n<li>Elige d\u00f3nde quieres a\u00f1adir los filtros.<\/li>\n<li>Haz clic en el bot\u00f3n <strong>+<\/strong> de la barra de navegaci\u00f3n superior para mostrar todos los bloques. Despl\u00e1zate hasta la secci\u00f3n <strong>WOOCOMMERCE<\/strong> y ver\u00e1s una opci\u00f3n de filtro por precio, stock, atributo y valoraci\u00f3n. Por ejemplo, si eliges <strong>Filtrar por Precio<\/strong>.<\/li>\n<\/ol>\n<h3>A\u00f1adir el bloque Filtrar por Precio<\/h3>\n<p>Al seleccionar este bloque, puedes mostrar una barra de rango de precios que permita a los usuarios filtrar qu\u00e9 productos aparecen en la p\u00e1gina en funci\u00f3n del rango de precios que deseen. Puedes personalizar la configuraci\u00f3n del bloque en el panel derecho para adaptarla a tus necesidades.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-by-price.png\" alt=\"A\u00f1adir un filtro por precio con el bloque Filtro por Precio\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A\u00f1adir el bloque Filtro por precio.<\/figcaption><\/figure>\n<h3>A\u00f1adir el bloque Filtro por Atributo<\/h3>\n<p>Tambi\u00e9n puedes utilizar el bloque <strong>Filtro por Atributo<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-by-attribute.png\" alt=\"A\u00f1adir un filtro por atributo con el bloque Filtro por Atributo\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Seleccionando los atributos del producto.<\/figcaption><\/figure>\n<p>Puedes elegir un atributo espec\u00edfico, como <strong>Color<\/strong>, y luego configurar los ajustes en consecuencia. Por ejemplo, puedes activar <strong>Mostrar recuento de productos<\/strong> para mostrar el n\u00famero de productos disponibles en cada color.<\/p>\n<p>A continuaci\u00f3n, puedes ver la p\u00e1gina en producci\u00f3n y probar la funcionalidad de los botones de filtro.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/filter-output.png\" alt=\"La parte superior de la p\u00e1gina de producto actualizada muestra una barra deslizante ajustable para filtrar por precio y una opci\u00f3n para filtrar por el atributo de color con opciones para azul, gris, verde, rojo y amarillo\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vista previa de la funcionalidad del filtro.<\/figcaption><\/figure>\n<p>Siguiendo estos pasos, puedes ofrecer a tus clientes una experiencia de compra fluida, permiti\u00e9ndoles refinar f\u00e1cilmente sus b\u00fasquedas de productos en funci\u00f3n de varios criterios, lo que en \u00faltima instancia aumentar\u00e1 su satisfacci\u00f3n y les ayudar\u00e1 a encontrar los productos deseados.<\/p>\n<h2>P\u00e1ginas de carrito y pago<\/h2>\n<p>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\u00f3n eficaz de los art\u00edculos del carrito y de facilitar un <a href=\"https:\/\/kinsta.com\/es\/blog\/woocommerce-checkout\/\">proceso de pago sin esfuerzo<\/a>.<\/p>\n<p>WooCommerce crea las p\u00e1ginas <strong>Carrito<\/strong> y <strong>Pago<\/strong> por defecto utilizando los bloques adecuados. Los clientes pueden a\u00f1adir productos a su carrito y acceder a \u00e9l a trav\u00e9s de la barra de navegaci\u00f3n.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/cart-page.png\" alt=\"P\u00e1gina del carrito con camiseta, opci\u00f3n de c\u00f3digo de cup\u00f3n, subtotal, total y bot\u00f3n de pago\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La p\u00e1gina del carrito.<\/figcaption><\/figure>\n<p>Tras confirmar el contenido de su carrito, tu cliente puede seleccionar el bot\u00f3n <strong>Proceder al Pago<\/strong>, rellenar los datos necesarios y realizar su pedido.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/checkout-page.png\" alt=\"El formulario de Pago contiene campos para la informaci\u00f3n de contacto del cliente, la direcci\u00f3n de facturaci\u00f3n y la opci\u00f3n de pago\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La p\u00e1gina de pago.<\/figcaption><\/figure>\n<h2>C\u00f3mo crear una p\u00e1gina de Tienda personalizada<\/h2>\n<p>Ahora que has aprendido a utilizar determinados Bloques de WooCommerce, el siguiente paso consiste en combinarlos para crear una p\u00e1gina de tienda personalizada f\u00e1cil de usar con los siguientes bloques:<\/p>\n<ul>\n<li>B\u00fasqueda de Productos<\/li>\n<li>Filtrar por Precio<\/li>\n<li>Categor\u00edas de Productos<\/li>\n<li>Producto Destacado<\/li>\n<li>Todos los Productos<\/li>\n<\/ul>\n<p>Para crear este dise\u00f1o de tienda personalizado, crea una nueva p\u00e1gina y sigue los pasos que se indican a continuaci\u00f3n.<\/p>\n<ol start=\"1\">\n<li>Introduce \u00abTienda\u00bb como t\u00edtulo de la p\u00e1gina.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/shop-page.png\" alt=\"Editor de p\u00e1ginas de tienda con texto, color, tipograf\u00eda, dimensiones y opciones avanzadas\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La p\u00e1gina Tienda en modo edici\u00f3n.<\/figcaption><\/figure><\/li>\n<li>Siguiendo los mismos pasos que antes para a\u00f1adir un bloque, a\u00f1ade el bloque <strong>B\u00fasqueda de Productos<\/strong>. No apliques ninguna configuraci\u00f3n.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-search-block.png\" alt=\"La selecci\u00f3n de bloques con la opci\u00f3n B\u00fasqueda de Productos seleccionada\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A\u00f1adir el bloque B\u00fasqueda de productos.<\/figcaption><\/figure><\/li>\n<li>A\u00f1ade el bloque <strong>Lista de Categor\u00edas de Productos<\/strong>.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/products-categories.png\" alt=\"La selecci\u00f3n de bloques con la opci\u00f3n Lista de Categor\u00edas de Productos seleccionada\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A\u00f1adir el bloque Lista de categor\u00edas de productos.<\/figcaption><\/figure>\n<p>En la p\u00e1gina de configuraci\u00f3n del bloque, establece el <strong>ESTILO DE PANTALLA <\/strong>en <strong>Desplegable<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-categories-drop-down.png\" alt=\"El panel del editor del bloque Lista de Categor\u00edas de Productos contiene un conmutador para el estilo de visualizaci\u00f3n del bloque, configurado como desplegable\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajustar la configuraci\u00f3n del bloque Lista de categor\u00edas de productos.<\/figcaption><\/figure><\/li>\n<li>A continuaci\u00f3n, a\u00f1ade el bloque <strong>Filtro por Precio<\/strong>. No configures nada para este bloque.<\/li>\n<li>A\u00f1ade el bloque <strong>Producto Destacado<\/strong> y selecciona el producto a mostrar. Aplica las mismas configuraciones que al bloque Producto Destacado que hiciste antes.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/featured-product-shop-page.png\" alt=\"La p\u00e1gina Tienda muestra la gorra del producto destacado con algunos ajustes para el producto destacado\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">La p\u00e1gina Tienda muestra el producto destacado de la gorra con algunas configuraciones para el producto destacado.<\/figcaption><\/figure><\/li>\n<li>A\u00f1ade el bloque <strong>Todos los Productos<\/strong>.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/product-grid-shop-page.png\" alt=\"El bloque Todos los Productos se utiliza para a\u00f1adir una cuadr\u00edcula de productos a la p\u00e1gina de la tienda\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A\u00f1adir el bloque Todos los productos.<\/figcaption><\/figure>\n<p>Para la configuraci\u00f3n de este bloque, establece los valores <strong>COLUMNAS<\/strong> y <strong>FILAS<\/strong> en 2 y desmarca el <strong>Desplegable Mostrar Orden<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/set-all-products-block.png\" alt=\"Aplica ajustes al bloque Todos los Productos para cambiar su vista\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajustar la configuraci\u00f3n del bloque Todos los productos.<\/figcaption><\/figure><\/li>\n<li>Publica la p\u00e1gina y visualiza los resultados.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/preview-shop-page.png\" alt=\"Vista previa de la p\u00e1gina de la tienda despu\u00e9s de a\u00f1adir todos los bloques de WooCommerce\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vista previa de la p\u00e1gina Tienda.<\/figcaption><\/figure>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/01\/shop-page-view.png\" alt=\"La p\u00e1gina de la Tienda muestra los productos en una cuadr\u00edcula de 2 por 2. Debajo de cada art\u00edculo hay un bot\u00f3n para a\u00f1adir al carrito o ver los productos\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vista previa de la p\u00e1gina Tienda.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>C\u00f3mo supervisar y analizar el rendimiento de los bloques<\/h2>\n<p>Las s\u00f3lidas herramientas de Kinsta supervisan y analizan el rendimiento de las p\u00e1ginas que utilizan Bloques de WooCommerce.<\/p>\n<h3>Herramienta APM de Kinsta<\/h3>\n<p>La herramienta de <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/monitorizacion-wordpress\/herramienta-apm\/\">Monitorizaci\u00f3n del Rendimiento de la Aplicaci\u00f3n (APM, Application Performance Monitoring)<\/a> de Kinsta te permite monitorizar el rendimiento de las p\u00e1ginas que contienen Bloques de WooCommerce. Captura informaci\u00f3n con marca de tiempo sobre los procesos PHP, las consultas a la base de datos MySQL y otras m\u00e9tricas cruciales, permiti\u00e9ndote seguir y analizar las transacciones facilitadas por WooCommerce.<\/p>\n<p>Por ejemplo, puedes analizar la duraci\u00f3n y frecuencia de las interacciones y los posibles cuellos de botella asociados a estas p\u00e1ginas. Con esta informaci\u00f3n, puedes solucionar problemas con precisi\u00f3n y optimizar el rendimiento.<\/p>\n<h3>Herramienta de anal\u00edtica de Kinsta<\/h3>\n<p>Evaluar el impacto de los Bloques de WooCommerce en la participaci\u00f3n de los usuarios y en las ventas requiere un enfoque polifac\u00e9tico. Las completas herramientas de anal\u00edtica de Kinsta desempe\u00f1an un papel crucial en este sentido. El uso de las funciones de an\u00e1lisis de WordPress en el panel de control de MyKinsta te proporciona informaci\u00f3n valiosa sobre diversas m\u00e9tricas de rendimiento que influyen directamente en la experiencia del usuario y, en consecuencia, en las ventas.<\/p>\n<ul>\n<li>La secci\u00f3n <strong>Recursos<\/strong> 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\u00f3n cuantitativa del tr\u00e1fico del sitio y del uso de recursos.<\/li>\n<\/ul>\n<ul>\n<li>La secci\u00f3n <strong>Rendimiento<\/strong> incluye m\u00e9tricas como el tiempo medio de respuesta PHP + MySQL y el uso de AJAX. Estas estad\u00edsticas te ayudan a controlar la capacidad de respuesta y la interactividad de las p\u00e1ginas que utilizan Bloques de WooCommerce.<\/li>\n<\/ul>\n<ul>\n<li>La secci\u00f3n <strong>Respuesta<\/strong> proporciona desgloses de c\u00f3digos de respuesta y an\u00e1lisis de errores, que te ayudan a comprender mejor las interacciones de los usuarios y los posibles obst\u00e1culos que puedan encontrar.<\/li>\n<\/ul>\n<ul>\n<li>La <strong>secci\u00f3n Geo &#038; IP<\/strong> te permite rastrear el uso de la red de distribuci\u00f3n de contenidos (CDN), la eficacia de la cach\u00e9 y las perspectivas geogr\u00e1ficas. Esta informaci\u00f3n ayuda a perfeccionar tu sitio en funci\u00f3n del comportamiento del usuario, su ubicaci\u00f3n y los datos de rendimiento.<\/li>\n<\/ul>\n<p>Controlando de cerca estas anal\u00edticas, puedes identificar posibles cuellos de botella y optimizar tus p\u00e1ginas utilizando Bloques de WooCommerce para garantizar una experiencia de usuario fluida y atractiva.<\/p>\n<p>Puedes leer nuestra gu\u00eda definitiva sobre <a href=\"https:\/\/kinsta.com\/es\/blog\/acelerar-woocommerce\/\">18 potentes formas de acelerar tu tienda WooCommerce<\/a> para conocer m\u00e1s consejos. La velocidad es crucial para las tiendas online, ya que los sitios que se cargan lentamente provocan la frustraci\u00f3n del usuario y la p\u00e9rdida de ventas.<\/p>\n<h2>Resumen<\/h2>\n<p>Esta gu\u00eda ha explorado las capacidades de los Bloques de WooCommerce, desde a\u00f1adir cuadr\u00edculas de productos y productos destacados hasta implementar potentes bloques de filtros. Tambi\u00e9n destacaba la importancia de las secciones del carrito y de pago, elementos cr\u00edticos para guiar a los clientes a trav\u00e9s de una experiencia de compra fluida.<\/p>\n<p>Combinar estrat\u00e9gicamente varios bloques de WooCommerce permite crear un dise\u00f1o intuitivo y visualmente atractivo. El proceso implica una cuidadosa selecci\u00f3n, configuraci\u00f3n y disposici\u00f3n de los bloques para satisfacer funcionalidades espec\u00edficas y las preferencias de los clientes.<\/p>\n<p>Elegir el servicio de <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">alojamiento de WordPress<\/a> 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\u00e1xima eficiencia.<\/p>\n<p>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.<\/p>\n<p><em>\u00bfTienes experiencia en el uso de bloques de WooCommerce? Si es as\u00ed, \u00bfqu\u00e9 bloque es tu favorito y qu\u00e9 nuevo bloque te gustar\u00eda que se a\u00f1adiera? Comparte tus opiniones en la secci\u00f3n de comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los Bloques de WooCommerce te ayudan a crear p\u00e1ginas de tienda personalizadas, mostrar tus productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como filtrado y b\u00fasqueda &#8230;<\/p>\n","protected":false},"author":287,"featured_media":73092,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1346,1345,1342],"class_list":["post-73091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-comercio-electronico-wordpress","topic-desarrollo-wordpress","topic-woocommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T18:21:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-25T08:45:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress\",\"datePublished\":\"2024-01-23T18:21:23+00:00\",\"dateModified\":\"2024-01-25T08:45:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\"},\"wordCount\":3137,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\",\"name\":\"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"datePublished\":\"2024-01-23T18:21:23+00:00\",\"dateModified\":\"2024-01-25T08:45:33+00:00\",\"description\":\"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress - Kinsta\u00ae","description":"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/","og_locale":"es_ES","og_type":"article","og_title":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress","og_description":"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.","og_url":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-01-23T18:21:23+00:00","article_modified_time":"2024-01-25T08:45:33+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress","datePublished":"2024-01-23T18:21:23+00:00","dateModified":"2024-01-25T08:45:33+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/"},"wordCount":3137,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/","url":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/","name":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","datePublished":"2024-01-23T18:21:23+00:00","dateModified":"2024-01-25T08:45:33+00:00","description":"Aprende a crear p\u00e1ginas de tienda personalizadas, mostrar productos y a\u00f1adir funciones avanzadas de comercio electr\u00f3nico como el filtrado a tu sitio de comercio electr\u00f3nico.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/01\/woocommerce-blocks-tutorial.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/bloques-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinsta.com\/es\/secciones\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"Bloques de WooCommerce: A\u00f1ade Funciones de WooCommerce a tu sitio de WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73091","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=73091"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73091\/revisions"}],"predecessor-version":[{"id":73108,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/73091\/revisions\/73108"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/73091\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/73092"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=73091"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=73091"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=73091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}