{"id":66536,"date":"2024-01-23T15:27:17","date_gmt":"2024-01-23T18:27:17","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=66536&#038;preview=true&#038;preview_id=66536"},"modified":"2024-01-26T07:51:53","modified_gmt":"2024-01-26T10:51:53","slug":"blocos-woocommerce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/","title":{"rendered":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress"},"content":{"rendered":"<p>Os Blocos WooCommerce ajudam voc\u00ea a criar p\u00e1ginas de loja personalizadas, destacar seus produtos e adicionar funcionalidades avan\u00e7adas de eCommerce, como filtragem e pesquisa \u2014 tudo isso sem escrever uma \u00fanica linha de c\u00f3digo.<\/p>\n<p>Muitos blocos j\u00e1 acompanham o WooCommerce por padr\u00e3o. No entanto, existem diversos blocos adicionais que n\u00e3o v\u00eam inclu\u00eddos. Voc\u00ea pode usar esses novos blocos em sua loja WooCommerce instalando o <a href=\"https:\/\/wordpress.org\/plugins\/woo-gutenberg-products-block\/\">plugin WooCommerce Blocks para WordPress<\/a>. Este plugin \u00e9 um campo de testes para ofertas experimentais e poss\u00edveis adi\u00e7\u00f5es futuras aos Blocos WooCommerce essenciais.<\/p>\n<p>Integrar os Blocos WooCommerce ao WordPress \u00e9 simples com a Kinsta, onde voc\u00ea pode incluir o WooCommerce durante o processo de configura\u00e7\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/como-comecar-wordpress\/novo-site\/#install-woocommerce\">marcando uma caixa<\/a>. Essa integra\u00e7\u00e3o facilita a cria\u00e7\u00e3o r\u00e1pida e sem esfor\u00e7o de lojas on-line.<\/p>\n<p>Este guia pr\u00e1tico orienta voc\u00ea na adi\u00e7\u00e3o de recursos do WooCommerce ao seu site WordPress usando os blocos do 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>Pr\u00e9-requisitos<\/h2>\n<p>Para acompanhar este guia, certifique-se de que voc\u00ea tenha:<\/p>\n<ul>\n<li>O <a href=\"https:\/\/en-ca.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a> instalado e ativado em seu painel WordPress<\/li>\n<li><a href=\"https:\/\/kinsta.com\/wordpress\/\">Familiaridade com o WordPress<\/a><\/li>\n<\/ul>\n<p>Se ainda n\u00e3o tiver um site WordPress, voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/como-comecar-wordpress\/novo-site\/\">criar um site WordPress com o painel de controle da Kinsta<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/construir-um-site-wordpress-offline\/\">por meio do DevKinsta localmente<\/a>. Quando voc\u00ea tiver seu site, importe <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">esses produtos de amostra<\/a> para sua loja WooCommerce.<\/p>\n<h2>Explorando os blocos do WooCommerce<\/h2>\n<p>O editor de blocos padr\u00e3o do WordPress, introduzido na vers\u00e3o 5.0, \u00e9 o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor Gutenberg<\/a>. Ele substituiu o editor cl\u00e1ssico por um sistema baseado em blocos, permitindo que os usu\u00e1rios criem e personalizem conte\u00fado visualmente atraente sem um amplo conhecimento de codifica\u00e7\u00e3o de frontend.<\/p>\n<p>O WooCommerce Blocks se integra perfeitamente \u00e0 interface intuitiva de drag and drop do editor Gutenberg, oferecendo um conjunto de blocos dedicados projetados para exibi\u00e7\u00e3o de produtos, gerenciamento de carrinho, processos de checkout e muito mais.<\/p>\n<p>Essa integra\u00e7\u00e3o permite que voc\u00ea aproveite ao m\u00e1ximo a flexibilidade e a simplicidade do editor de blocos e, ao mesmo tempo, adapte seu site WordPress para obter o desempenho ideal de eCommerce.<\/p>\n<p>Para utilizar os blocos do WooCommerce, comece abrindo ou criando uma p\u00e1gina, ou artigo. Clique no bot\u00e3o <strong>+<\/strong> na barra superior para visualizar todos os blocos e, em seguida, navegue at\u00e9 a se\u00e7\u00e3o <strong>WOOCOMMERCE<\/strong>. Aqui est\u00e1 uma breve vis\u00e3o geral dos diferentes blocos:<\/p>\n<ul>\n<li><strong>Product Search (Pesquisa de produtos<\/strong>) &#8211; Adiciona uma barra de pesquisa para voc\u00ea pesquisar rapidamente os produtos dos clientes.<\/li>\n<li><strong>All Products (Todos os produtos<\/strong>) &#8211; Exibe todos os produtos da loja em uma grade.<\/li>\n<li><strong>All Reviews<\/strong> <strong>(Todas as avalia\u00e7\u00f5es)<\/strong> &#8211; Lista todas as avalia\u00e7\u00f5es de produtos.<\/li>\n<li><strong>Classic Checkout (Checkout cl\u00e1ssico)<\/strong> &#8211; Renderiza o shortcode de checkout cl\u00e1ssico.<\/li>\n<li><strong>(Classic Cart) Carrinho cl\u00e1ssico<\/strong> &#8211; Renderiza o shortcode do carrinho cl\u00e1ssico.<\/li>\n<li><strong>Customer <span id=\"urn:enhancement-a8f756e4-ba97-41b1-9eb0-7d4317aacc9a\" class=\"textannotation\">Account (<\/span>Conta do cliente)<\/strong> &#8211; Habilita os recursos de login e logout do cliente.<\/li>\n<li><strong>Featured Category (Categoria<\/strong> <strong>em destaque)<\/strong> &#8211; Destaca uma categoria de produto e uma Call to Action (CTA) para incentivar respostas r\u00e1pidas.<\/li>\n<li><strong>Featured Product (Produto em<\/strong> <strong>destaque)<\/strong> &#8211; Destaca um produto ou varia\u00e7\u00e3o e uma CTA.<\/li>\n<li><strong>Active Filters (Filtros ativos)<\/strong> &#8211; Exibe os filtros ativos no momento.<\/li>\n<li><strong>Filter by Price (Filtrar por pre\u00e7o<\/strong>) &#8211; Renderiza uma faixa de pre\u00e7o que os clientes podem usar para filtrar produtos.<\/li>\n<li><strong>Filter by Stock (Filtrar por estoque<\/strong>) &#8211; Permite filtrar produtos por status de estoque.<\/li>\n<li><strong>Filter by Attribute (Filtrar por atributo<\/strong>) &#8211; Filtra produtos com base em atributos como tamanho ou cor, como tamanho ou cor.<\/li>\n<li><strong>Filter by Rating (Filtrar por classifica\u00e7\u00e3o<\/strong>) &#8211; Permite que os clientes filtrem os produtos por sua classifica\u00e7\u00e3o.<\/li>\n<li><strong>Hand-Picked Products (Produtos escolhidos a<\/strong> <strong>dedo)<\/strong> &#8211; Exibe uma sele\u00e7\u00e3o de produtos escolhidos a dedo em uma grade.<\/li>\n<li><strong>Mini Cart<\/strong> &#8211; Fornece um bot\u00e3o de visualiza\u00e7\u00e3o r\u00e1pida do carrinho.<\/li>\n<li><strong>Store Notices (Avisos da loja<\/strong>) &#8211; Exibe notifica\u00e7\u00f5es voltadas para o cliente geradas pelo WooCommerce ou outras extens\u00f5es.<\/li>\n<li><strong>Best Selling Products (Produtos mais vendidos<\/strong>) &#8211; Exibe uma grade com os produtos mais vendidos de todos os tempos da sua loja.<\/li>\n<li><strong><span id=\"urn:enhancement-1f9bf03c-ae5a-41e5-b1c0-00d5e5186b47\" class=\"textannotation\">Products<\/span> Categories <span id=\"urn:enhancement-21b45da1-9f3f-43e7-a524-ac38ca28dca1\" class=\"textannotation\">List (<\/span>Lista de categorias de produtos)<\/strong> &#8211; Mostra todas as categorias de produtos como uma lista ou um menu suspenso.<\/li>\n<li><strong>Products by Category (Produtos por categoria<\/strong>) &#8211; Exibe uma grade de produtos das categorias selecionadas.<\/li>\n<li><strong>Product Collection &#8220;Beta&#8221; (Cole\u00e7\u00e3o de produtos)<\/strong> &#8211; Exibe produtos de uma cole\u00e7\u00e3o designada.<\/li>\n<li><strong>Newest Products (Produtos mais recentes<\/strong>) &#8211; Exibe os produtos mais recentes em uma grade.<\/li>\n<li><strong>On Sale Products (Produtos em promo\u00e7\u00e3o<\/strong>) &#8211; Exibe os itens em promo\u00e7\u00e3o atuais em uma grade.<\/li>\n<li><strong>Products by Tag (Produtos por tag<\/strong>) &#8211; Exibe produtos com a tag selecionada em uma grade.<\/li>\n<li><strong>Top Rated <span id=\"urn:enhancement-3505b4b6-9a11-4627-89cb-1cc19665bcea\" class=\"textannotation\">Products<\/span> (Produtos com melhor classifica\u00e7\u00e3o)<\/strong> &#8211; Exibe os produtos com melhor classifica\u00e7\u00e3o em uma grade.<\/li>\n<li><strong>Products by Attribute (Produtos por atributo<\/strong>) &#8211; Exibe os produtos com os atributos selecionados em uma grade.<\/li>\n<li><strong>Reviews by Category (Avalia\u00e7\u00f5es por categoria)<\/strong> &#8211; Exibe as avalia\u00e7\u00f5es de produtos de categorias especificadas.<\/li>\n<li><strong>Reviews by Product (Avalia\u00e7\u00f5es por produto)<\/strong> &#8211; Exibe as avalia\u00e7\u00f5es organizadas por produto.<\/li>\n<li><strong>Single <span id=\"urn:enhancement-ef1c80d7-9578-47af-8f58-f2114bd529cd\" class=\"textannotation\">Product (<\/span>Produto \u00fanico)<\/strong> &#8211; Exibe um \u00fanico produto.<\/li>\n<li><strong>Cart (Carrinho) <\/strong>&#8211; Exibe o carrinho de compras.<\/li>\n<li><strong>Checkout<\/strong> &#8211; Exibe o formul\u00e1rio que permite aos clientes enviar pedidos.<\/li>\n<\/ul>\n<p>Agora voc\u00ea sabe o que cada bloco representa. Vamos usar alguns desses blocos para criar uma experi\u00eancia de eCommerce.<\/p>\n<h2>Uso do bloco Product Grid no WooCommerce<\/h2>\n<p>O bloco Product Grid \u00e9 uma ferramenta vers\u00e1til para mostrar os produtos da sua loja em um formato de grade organizado no seu site WordPress. Veja como voc\u00ea pode adicionar e personalizar um bloco de grade de produtos:<\/p>\n<ol start=\"1\">\n<li>Navegue at\u00e9 a p\u00e1gina ou artigo em que voc\u00ea deseja que os produtos sejam exibidos. Atribua um t\u00edtulo como &#8220;Produtos&#8221;<\/li>\n<li>Clique no bot\u00e3o <strong>+<\/strong> na barra de navega\u00e7\u00e3o superior para exibir todos os blocos. Role para baixo at\u00e9 a se\u00e7\u00e3o <strong>WOOCOMMERCE<\/strong> e selecione <strong>All Products<\/strong>. Essa a\u00e7\u00e3o exibe seus produtos em um layout de grade na 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=\"Using the All Products WooCommerce Block to display products in Grid\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Usando o Bloco Todos os Produtos do WooCommerce para exibir produtos em Grade.<\/figcaption><\/figure><\/li>\n<li>Para configurar esse bloco, use o painel de configura\u00e7\u00f5es do bloco no lado direito. Voc\u00ea pode acessar as configura\u00e7\u00f5es clicando no \u00edcone <strong>Settings<\/strong> (o segundo \u00edcone mais \u00e0 direita na barra de navega\u00e7\u00e3o 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=\"Settings panel to adjust the All Products block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Painel de configura\u00e7\u00f5es para ajustar o bloco All Products.<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode personalizar o layout, o conte\u00fado e o estilo da grade:<\/p>\n<ul>\n<li><strong>Configura\u00e7\u00f5es de layout:<\/strong> Ajuste o n\u00famero de linhas e colunas. Por exemplo, voc\u00ea pode definir ambos como 2 para obter uma apar\u00eancia equilibrada.<\/li>\n<li><strong>Configura\u00e7\u00f5es de conte\u00fado:<\/strong> Decida se voc\u00ea deseja incluir um menu suspenso de classifica\u00e7\u00e3o para os clientes. Esse recurso permite que os clientes classifiquem os produtos em uma ordem escolhida. Voc\u00ea pode desativ\u00e1-lo, se preferir.<\/li>\n<li><strong>Estilo avan\u00e7ado:<\/strong> Se necess\u00e1rio, voc\u00ea pode adicionar classes CSS para obter um estilo mais sofisticado.<\/li>\n<\/ul>\n<\/li>\n<li>Visualize a p\u00e1gina depois que voc\u00ea tiver finalizado as configura\u00e7\u00f5es para garantir que tudo apare\u00e7a como pretendido. Em seguida, clique no bot\u00e3o <strong><span id=\"urn:enhancement-58e2f318-bfb5-4d55-8b8b-b0f75cd6592a\" class=\"textannotation selected\">Publish<\/span><\/strong>. Essa etapa permite que voc\u00ea torne a p\u00e1gina acess\u00edvel publicamente, de forma privada ou com prote\u00e7\u00e3o por senha, conforme a sua prefer\u00eancia.\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=\"Updated Products page displays products in a 2-by-2 grid and reflects a navigation bar\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A p\u00e1gina de Produtos atualizada exibe os produtos em uma grade de 2 por 2 e reflete uma barra de navega\u00e7\u00e3o.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Adicione um bloco Featured Product \u00e0 sua p\u00e1gina ou artigo<\/h2>\n<p>O bloco Featured Product permite que voc\u00ea destaque um produto em sua p\u00e1gina ou artigo. Voc\u00ea pode selecionar um produto, personalizar suas configura\u00e7\u00f5es de exibi\u00e7\u00e3o e adicion\u00e1-lo ao seu conte\u00fado para chamar a aten\u00e7\u00e3o para um item espec\u00edfico que deseja exibir.<\/p>\n<p>Siga estas etapas para adicionar um bloco de produto em destaque:<\/p>\n<ol start=\"1\">\n<li>Comece navegando at\u00e9 a p\u00e1gina ou artigo em que voc\u00ea deseja destacar o produto. Imagine que voc\u00ea est\u00e1 projetando uma grade de produtos e deseja colocar o produto em destaque na parte superior. Crie um espa\u00e7o nesse local e voc\u00ea ver\u00e1 um bot\u00e3o <strong>+<\/strong> \u00e0 esquerda.<br \/>\nComo alternativa, se voc\u00ea tiver um bloco existente pr\u00f3ximo ao local desejado, clique nos tr\u00eas pontos verticais para que um menu seja exibido. Voc\u00ea pode escolher <strong>Add before<\/strong> ou <strong>Add after<\/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=\"The Products page displays a menu with the options to Copy, Add before, Add after, Group, Lock, Create pattern, and Delete\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Adicionando o bloco Featured Product antes do bloco All Products.<\/figcaption><\/figure><\/li>\n<li>Selecione o bot\u00e3o <strong>+<\/strong> na barra de navega\u00e7\u00e3o superior para exibir todos os blocos e procure por <strong>Featured Product<\/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=\"Select a product as a featured product with the Featured Product block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Voc\u00ea pode selecionar um produto como um produto em destaque com o bloco Featured Product.<\/figcaption><\/figure><\/li>\n<li>Escolha o produto que voc\u00ea deseja exibir. Em seguida, clique em <strong>Done<\/strong>.<\/li>\n<li>Para dar ao seu bloco Featured Product uma apar\u00eancia exclusiva, clique em <strong>Settings.<\/strong>\u00a0No painel de configura\u00e7\u00f5es do bloco, voc\u00ea pode:\n<ul>\n<li>Decidir se voc\u00ea deseja exibir a descri\u00e7\u00e3o e o pre\u00e7o do produto.<\/li>\n<li>Configurar como sua m\u00eddia (imagens e v\u00eddeos) deve ser exibida.<\/li>\n<li>Especificar o texto alternativo para a imagem do produto.<\/li>\n<li>Escolher a cor de sobreposi\u00e7\u00e3o do bloco.<\/li>\n<li>Ajuste a opacidade do bloco.<\/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=\"The block settings panel with the Overlay option and the Opacity\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajuste das configura\u00e7\u00f5es do bloco Featured Product.<\/figcaption><\/figure><\/li>\n<li>Ap\u00f3s fazer todos os ajustes necess\u00e1rios, voc\u00ea pode publicar sua p\u00e1gina ou atualiz\u00e1-la se ela j\u00e1 estiver ativa. Isso permite que voc\u00ea veja o bloco em a\u00e7\u00e3o e garanta que ele tenha a apar\u00eancia que voc\u00ea deseja.\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=\"Preview of the updated Products page displaying the featured beanie item above the product grid\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Visualiza\u00e7\u00e3o da p\u00e1gina Produtos atualizada exibindo o item de gorro em destaque acima da grade de produtos.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Utilize blocos de filtro no WooCommerce<\/h2>\n<p>Os blocos de filtro possibilitam que os clientes aprimorem suas buscas de produtos utilizando crit\u00e9rios espec\u00edficos. Isso facilita a r\u00e1pida localiza\u00e7\u00e3o dos produtos que atendem \u00e0s suas prefer\u00eancias ou necessidades.<\/p>\n<ol start=\"1\">\n<li>Navegue at\u00e9 a p\u00e1gina ou artigo onde voc\u00ea deseja adicionar os blocos. Neste guia, voc\u00ea utilizar\u00e1 a mesma p\u00e1gina <strong>Produtos<\/strong> das etapas anteriores.<\/li>\n<li>Escolha onde voc\u00ea deseja adicionar os filtros.<\/li>\n<li>Clique no bot\u00e3o <strong>+<\/strong> na barra de navega\u00e7\u00e3o superior para exibir todos os blocos. Role para baixo at\u00e9 a se\u00e7\u00e3o <strong>WOOCOMMERCE<\/strong> e veja uma op\u00e7\u00e3o de filtro para pre\u00e7o, estoque, atributo e classifica\u00e7\u00e3o. Por exemplo, se voc\u00ea escolher <strong>Filter by Price<\/strong>.<\/li>\n<\/ol>\n<h3>Adicionando o bloco Filter by Price<\/h3>\n<p>Ao selecionar esse bloco, voc\u00ea pode exibir uma barra de faixa de pre\u00e7o que permite aos usu\u00e1rios filtrar os produtos que aparecem na p\u00e1gina com base na faixa de pre\u00e7o desejada. Voc\u00ea pode personalizar as configura\u00e7\u00f5es do bloco no painel \u00e0 direita para atender \u00e0s suas necessidades.<\/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=\"Adding a filter for price with the Filter by Price block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Adicionando o bloco Filter by Price.<\/figcaption><\/figure>\n<h3>Adicionando o bloco Filter by Attribute<\/h3>\n<p>Voc\u00ea tamb\u00e9m pode usar o bloco <strong>Filter by <\/strong>Attribute (Filtrar por atributo).<\/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=\"Adding a filter for attribute with the Filter by Attribute block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Selecionando os atributos do produto.<\/figcaption><\/figure>\n<p>Voc\u00ea pode escolher um atributo espec\u00edfico, como <strong>Cor<\/strong>, e depois definir as configura\u00e7\u00f5es de acordo. Por exemplo, voc\u00ea pode ativar <strong>Exibir contagem de produtos<\/strong> para mostrar o n\u00famero de produtos dispon\u00edveis em cada cor.<\/p>\n<p>Em seguida, voc\u00ea pode visualizar a p\u00e1gina ativa e testar a funcionalidade dos bot\u00f5es 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=\"The top of the updated product page displays an adjustable slider bar for price filtering by price and an option to filter by the color attribute with options for blue, gray, green, red, and yellow\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o da funcionalidade do filtro.<\/figcaption><\/figure>\n<p>Seguindo essas etapas, voc\u00ea pode oferecer aos seus clientes uma experi\u00eancia de compra perfeita, permitindo que eles refinem facilmente suas pesquisas de produtos com base em v\u00e1rios crit\u00e9rios, aumentando a satisfa\u00e7\u00e3o deles e ajudando a encontrar os produtos desejados.<\/p>\n<h2>Cart e p\u00e1ginas de checkout<\/h2>\n<p>Os recursos de Cart (carrinho) e checkout da sua loja on-line devem ser intuitivos e totalmente funcionais para que a jornada do usu\u00e1rio seja tranquila. Para garantir uma excelente experi\u00eancia do cliente, voc\u00ea precisa gerenciar os itens do carrinho com efici\u00eancia e facilitar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/woocommerce-checkout\/\">processo de checkout sem esfor\u00e7o<\/a>.<\/p>\n<p>O WooCommerce cria as p\u00e1ginas de <strong>Cart (carrinho)<\/strong> e <strong>Checkout<\/strong> por padr\u00e3o usando os blocos apropriados. Os clientes podem adicionar produtos ao carrinho e acess\u00e1-lo por meio da barra de navega\u00e7\u00e3o.<\/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=\"Cart page with t-shirt, coupon code option, subtotal, total, and checkout button\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A p\u00e1gina do carrinho.<\/figcaption><\/figure>\n<p>Depois de confirmar o conte\u00fado do carrinho, seu cliente pode selecionar o bot\u00e3o <strong>Proceed to Checkout<\/strong>, preencher os detalhes necess\u00e1rios e fazer o 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=\"The Checkout form contains fields for the customer's contact information, billing address, and payment option\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A p\u00e1gina de checkout.<\/figcaption><\/figure>\n<h2>Como criar uma p\u00e1gina de loja personalizada<\/h2>\n<p>Agora que voc\u00ea aprendeu a usar determinados blocos do WooCommerce, a pr\u00f3xima etapa envolve combin\u00e1-los para criar uma p\u00e1gina de loja personalizada e f\u00e1cil de usar com os seguintes blocos:<\/p>\n<ul>\n<li>Pesquisa de produtos<\/li>\n<li>Filtro por pre\u00e7o<\/li>\n<li>Categorias de produtos<\/li>\n<li>Produto em destaque<\/li>\n<li>Todos os produtos<\/li>\n<\/ul>\n<p>Para criar esse layout de loja personalizado, crie uma nova p\u00e1gina e siga as etapas abaixo.<\/p>\n<ol start=\"1\">\n<li>Digite &#8220;Shop&#8221; como o t\u00edtulo da 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=\"Shop page editor with text, color, typography, dimensions, and advanced options\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">A p\u00e1gina Shop no modo de edi\u00e7\u00e3o.<\/figcaption><\/figure><\/li>\n<li>Usando as mesmas etapas anteriores para adicionar um bloco, adicione o bloco <strong>Product Search<\/strong>. N\u00e3o aplique nenhuma configura\u00e7\u00e3o.\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=\"The block selection with the Product Search option selected\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Adicionando o bloco Product Search.<\/figcaption><\/figure><\/li>\n<li>Adicione o bloco <strong>Product Categories List<\/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=\"The block selection with the Product Categories List option selected\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Adicionando o bloco Product Categories List.<\/figcaption><\/figure>\n<p>Na p\u00e1gina de configura\u00e7\u00e3o do bloco, defina o <strong>DISPLAY STYLE <\/strong>como <strong>Dropdown<\/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=\"The Product Categories List block editor pane contains a toggle for the block's display style, set to dropdown\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajuste das configura\u00e7\u00f5es do bloco Product Categories List.<\/figcaption><\/figure><\/li>\n<li>Em seguida, adicione o bloco <strong>Filter by Price<\/strong>. N\u00e3o configure nada para esse bloco.<\/li>\n<li>Adicione o bloco <strong>Featured Product<\/strong> e selecione o produto a ser exibido. Aplique as mesmas configura\u00e7\u00f5es do bloco Featured Product que voc\u00ea fez anteriormente.\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=\"The Shop page shows the featured cap product with some settings for the featured product\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Na p\u00e1gina Shop, voc\u00ea ver\u00e1 o produto de bon\u00e9 em destaque com algumas configura\u00e7\u00f5es para o produto em destaque.<\/figcaption><\/figure><\/li>\n<li>Adicione o bloco <strong>All Products<\/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=\"The All Product block is used to add product grid to the shop page\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Adicionando o bloco All Products.<\/figcaption><\/figure>\n<p>Para as configura\u00e7\u00f5es desse bloco, defina os valores <strong>COLUMNS <\/strong>e <strong>ROWS<\/strong> como 2 e desmarque a op\u00e7\u00e3o <strong>Show Sorting Dropdown<\/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=\"Apply settings to the All Products block to change it's view\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ajuste das configura\u00e7\u00f5es do bloco All Products.<\/figcaption><\/figure><\/li>\n<li>Publique a p\u00e1gina e veja os 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=\"Previewing shop page after adding all WooCommerce blocks\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o da p\u00e1gina Shop.<\/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=\"The Shop page lists the products in a 2-by-2 grid. Below each item is a button to add to cart or view the products\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o da p\u00e1gina Shop.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Como monitorar e analisar o desempenho do bloco<\/h2>\n<p>As ferramentas robustas da Kinsta monitoram e analisam o desempenho das p\u00e1ginas que usam os blocos do WooCommerce.<\/p>\n<h3>Ferramenta APM da Kinsta<\/h3>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/monitoramento-wordpress\/ferramenta-apm\/\">ferramenta Application Performance Monitoring (APM)<\/a> da Kinsta permite que voc\u00ea monitore o desempenho das p\u00e1ginas que cont\u00eam blocos do WooCommerce. Ela captura informa\u00e7\u00f5es com registro de data e hora sobre processos PHP, consultas ao banco de dados MySQL e outras m\u00e9tricas cruciais, permitindo que voc\u00ea rastreie e analise as transa\u00e7\u00f5es facilitadas pelo WooCommerce.<\/p>\n<p>Voc\u00ea pode, por exemplo, analisar a dura\u00e7\u00e3o e a frequ\u00eancia das intera\u00e7\u00f5es e os poss\u00edveis gargalos associados a essas p\u00e1ginas. Com essas informa\u00e7\u00f5es, voc\u00ea pode solucionar problemas e otimizar o desempenho com precis\u00e3o.<\/p>\n<h3>Ferramenta de an\u00e1lise da Kinsta<\/h3>\n<p>Avaliar o impacto dos blocos do WooCommerce no engajamento do usu\u00e1rio e nas vendas requer uma abordagem multifacetada. As ferramentas de an\u00e1lise abrangentes da Kinsta desempenham um papel crucial aqui. Ao usar os recursos de an\u00e1lise do WordPress no painel MyKinsta, voc\u00ea obt\u00e9m informa\u00e7\u00f5es valiosas sobre v\u00e1rias m\u00e9tricas de desempenho que influenciam diretamente a experi\u00eancia do usu\u00e1rio e, consequentemente, as vendas.<\/p>\n<ul>\n<li>A se\u00e7\u00e3o <strong>Recursos<\/strong> do painel MyKinsta rastreia o total de visitas, o espa\u00e7o em disco e o uso da largura de banda do seu site. Ela fornece uma vis\u00e3o geral quantitativa do tr\u00e1fego do site e do uso de recursos.<\/li>\n<\/ul>\n<ul>\n<li>A se\u00e7\u00e3o <strong>Desempenho<\/strong> inclui m\u00e9tricas como tempo m\u00e9dio de resposta PHP + MySQL e uso de AJAX. Essas estat\u00edsticas ajudam voc\u00ea a acompanhar a capacidade de resposta e a interatividade das p\u00e1ginas que usam os blocos do WooCommerce.<\/li>\n<\/ul>\n<ul>\n<li>A se\u00e7\u00e3o <strong>Resposta<\/strong>\u00a0fornece detalhamentos de c\u00f3digos de resposta e an\u00e1lises de erros, ajudando voc\u00ea a entender melhor as intera\u00e7\u00f5es dos usu\u00e1rios e os poss\u00edveis obst\u00e1culos que eles podem encontrar.<\/li>\n<\/ul>\n<ul>\n<li>A se\u00e7\u00e3o <strong>Geo &#038; IP<\/strong> permite que voc\u00ea acompanhe o uso da rede de distribui\u00e7\u00e3o de conte\u00fado (CDN), a efici\u00eancia do cache e os insights geogr\u00e1ficos. Essas informa\u00e7\u00f5es ajudam a refinar o seu site com base no comportamento do usu\u00e1rio, no local e nos dados de desempenho.<\/li>\n<\/ul>\n<p>Ao monitorar de perto essas an\u00e1lises, voc\u00ea pode identificar gargalos potenciais e otimizar suas p\u00e1ginas usando Blocos do WooCommerce para garantir uma experi\u00eancia de usu\u00e1rio cont\u00ednua e envolvente.<\/p>\n<p>Voc\u00ea pode ler nosso guia definitivo sobre <a href=\"https:\/\/kinsta.com\/pt\/blog\/acelerar-sua-loja-woocommerce\/\">18 maneiras poderosas de acelerar sua loja WooCommerce<\/a> para saber mais dicas. A velocidade \u00e9 crucial para as lojas on-line, pois sites de carregamento lento levam \u00e0 frustra\u00e7\u00e3o do usu\u00e1rio e \u00e0 perda de vendas.<\/p>\n<h2>Resumo<\/h2>\n<p>Este guia explorou os recursos dos blocos do WooCommerce, desde a adi\u00e7\u00e3o de grades de produtos e produtos em destaque at\u00e9 a implementa\u00e7\u00e3o de poderosos blocos de filtros. Ele tamb\u00e9m destacou a import\u00e2ncia das caixas de carrinho e de checkout, elementos essenciais para orientar os clientes em uma experi\u00eancia de compra perfeita.<\/p>\n<p>A combina\u00e7\u00e3o estrat\u00e9gica de v\u00e1rios blocos do WooCommerce permite que voc\u00ea crie um layout intuitivo e visualmente atraente. O processo envolve a sele\u00e7\u00e3o, a configura\u00e7\u00e3o e a disposi\u00e7\u00e3o cuidadosas dos blocos para atender a funcionalidades espec\u00edficas e \u00e0s prefer\u00eancias dos clientes.<\/p>\n<p>Ao escolher o servi\u00e7o de <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem WordPress<\/a> da Kinsta, voc\u00ea aumenta significativamente o desempenho e a confiabilidade dos seus sites de WooCommerce. Com configura\u00e7\u00f5es de servidor otimizadas, medidas de seguran\u00e7a robustas e escalabilidade cont\u00ednua, a Kinsta garante que sua loja on-line opere com efici\u00eancia m\u00e1xima.<\/p>\n<p>Se voc\u00ea estiver usando blocos do WooCommerce para exibi\u00e7\u00e3o de produtos, filtros ou funcionalidades de carrinho, a infraestrutura de hospedagem da Kinsta fornece a velocidade e a estabilidade necess\u00e1rias para proporcionar uma experi\u00eancia de compra excepcional aos seus clientes.<\/p>\n<p><em>Voc\u00ea j\u00e1 experimentou usar os blocos do WooCommerce? Se sim, qual bloco \u00e9 o seu favorito e qual novo bloco voc\u00ea gostaria de ver adicionado? Compartilhe suas ideias na se\u00e7\u00e3o de coment\u00e1rios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os Blocos WooCommerce ajudam voc\u00ea a criar p\u00e1ginas de loja personalizadas, destacar seus produtos e adicionar funcionalidades avan\u00e7adas de eCommerce, como filtragem e pesquisa \u2014 tudo &#8230;<\/p>\n","protected":false},"author":287,"featured_media":66537,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1027,1023],"class_list":["post-66536","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-ecommerce-no-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>Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.\" \/>\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\/pt\/blog\/blocos-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress\" \/>\n<meta property=\"og:description\" content=\"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T18:27:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-26T10:51:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/blocos-woocommerce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress\",\"datePublished\":\"2024-01-23T18:27:17+00:00\",\"dateModified\":\"2024-01-26T10:51:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\"},\"wordCount\":3124,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\",\"name\":\"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"datePublished\":\"2024-01-23T18:27:17+00:00\",\"dateModified\":\"2024-01-26T10:51:53+00:00\",\"description\":\"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress - Kinsta\u00ae","description":"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.","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\/pt\/blog\/blocos-woocommerce\/","og_locale":"pt_PT","og_type":"article","og_title":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress","og_description":"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.","og_url":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-01-23T18:27:17+00:00","article_modified_time":"2024-01-26T10:51:53+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress","datePublished":"2024-01-23T18:27:17+00:00","dateModified":"2024-01-26T10:51:53+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/"},"wordCount":3124,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/","url":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/","name":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","datePublished":"2024-01-23T18:27:17+00:00","dateModified":"2024-01-26T10:51:53+00:00","description":"Aprenda como criar p\u00e1ginas de loja personalizadas, destacar produtos e adicionar recursos avan\u00e7ados de eCommerce, como filtragem, ao seu site de WooCommerce.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/01\/woocommerce-blocks-tutorial.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinsta.com\/pt\/topicos\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"Blocos WooCommerce: Adicione Funcionalidades do WooCommerce ao seu Site WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=66536"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66536\/revisions"}],"predecessor-version":[{"id":66598,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/66536\/revisions\/66598"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/66536\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/66537"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=66536"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=66536"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=66536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}