Os Blocos WooCommerce ajudam você a criar páginas de loja personalizadas, destacar seus produtos e adicionar funcionalidades avançadas de eCommerce, como filtragem e pesquisa — tudo isso sem escrever uma única linha de código.
Muitos blocos já acompanham o WooCommerce por padrão. No entanto, existem diversos blocos adicionais que não vêm incluídos. Você pode usar esses novos blocos em sua loja WooCommerce instalando o plugin WooCommerce Blocks para WordPress. Este plugin é um campo de testes para ofertas experimentais e possíveis adições futuras aos Blocos WooCommerce essenciais.
Integrar os Blocos WooCommerce ao WordPress é simples com a Kinsta, onde você pode incluir o WooCommerce durante o processo de configuração marcando uma caixa. Essa integração facilita a criação rápida e sem esforço de lojas on-line.
Este guia prático orienta você na adição de recursos do WooCommerce ao seu site WordPress usando os blocos do WooCommerce.
Pré-requisitos
Para acompanhar este guia, certifique-se de que você tenha:
- O WooCommerce instalado e ativado em seu painel WordPress
- Familiaridade com o WordPress
Se ainda não tiver um site WordPress, você pode criar um site WordPress com o painel de controle da Kinsta ou por meio do DevKinsta localmente. Quando você tiver seu site, importe esses produtos de amostra para sua loja WooCommerce.
Explorando os blocos do WooCommerce
O editor de blocos padrão do WordPress, introduzido na versão 5.0, é o editor Gutenberg. Ele substituiu o editor clássico por um sistema baseado em blocos, permitindo que os usuários criem e personalizem conteúdo visualmente atraente sem um amplo conhecimento de codificação de frontend.
O WooCommerce Blocks se integra perfeitamente à interface intuitiva de drag and drop do editor Gutenberg, oferecendo um conjunto de blocos dedicados projetados para exibição de produtos, gerenciamento de carrinho, processos de checkout e muito mais.
Essa integração permite que você aproveite ao máximo a flexibilidade e a simplicidade do editor de blocos e, ao mesmo tempo, adapte seu site WordPress para obter o desempenho ideal de eCommerce.
Para utilizar os blocos do WooCommerce, comece abrindo ou criando uma página, ou artigo. Clique no botão + na barra superior para visualizar todos os blocos e, em seguida, navegue até a seção WOOCOMMERCE. Aqui está uma breve visão geral dos diferentes blocos:
- Product Search (Pesquisa de produtos) – Adiciona uma barra de pesquisa para você pesquisar rapidamente os produtos dos clientes.
- All Products (Todos os produtos) – Exibe todos os produtos da loja em uma grade.
- All Reviews (Todas as avaliações) – Lista todas as avaliações de produtos.
- Classic Checkout (Checkout clássico) – Renderiza o shortcode de checkout clássico.
- (Classic Cart) Carrinho clássico – Renderiza o shortcode do carrinho clássico.
- Customer Account (Conta do cliente) – Habilita os recursos de login e logout do cliente.
- Featured Category (Categoria em destaque) – Destaca uma categoria de produto e uma Call to Action (CTA) para incentivar respostas rápidas.
- Featured Product (Produto em destaque) – Destaca um produto ou variação e uma CTA.
- Active Filters (Filtros ativos) – Exibe os filtros ativos no momento.
- Filter by Price (Filtrar por preço) – Renderiza uma faixa de preço que os clientes podem usar para filtrar produtos.
- Filter by Stock (Filtrar por estoque) – Permite filtrar produtos por status de estoque.
- Filter by Attribute (Filtrar por atributo) – Filtra produtos com base em atributos como tamanho ou cor, como tamanho ou cor.
- Filter by Rating (Filtrar por classificação) – Permite que os clientes filtrem os produtos por sua classificação.
- Hand-Picked Products (Produtos escolhidos a dedo) – Exibe uma seleção de produtos escolhidos a dedo em uma grade.
- Mini Cart – Fornece um botão de visualização rápida do carrinho.
- Store Notices (Avisos da loja) – Exibe notificações voltadas para o cliente geradas pelo WooCommerce ou outras extensões.
- Best Selling Products (Produtos mais vendidos) – Exibe uma grade com os produtos mais vendidos de todos os tempos da sua loja.
- Products Categories List (Lista de categorias de produtos) – Mostra todas as categorias de produtos como uma lista ou um menu suspenso.
- Products by Category (Produtos por categoria) – Exibe uma grade de produtos das categorias selecionadas.
- Product Collection “Beta” (Coleção de produtos) – Exibe produtos de uma coleção designada.
- Newest Products (Produtos mais recentes) – Exibe os produtos mais recentes em uma grade.
- On Sale Products (Produtos em promoção) – Exibe os itens em promoção atuais em uma grade.
- Products by Tag (Produtos por tag) – Exibe produtos com a tag selecionada em uma grade.
- Top Rated Products (Produtos com melhor classificação) – Exibe os produtos com melhor classificação em uma grade.
- Products by Attribute (Produtos por atributo) – Exibe os produtos com os atributos selecionados em uma grade.
- Reviews by Category (Avaliações por categoria) – Exibe as avaliações de produtos de categorias especificadas.
- Reviews by Product (Avaliações por produto) – Exibe as avaliações organizadas por produto.
- Single Product (Produto único) – Exibe um único produto.
- Cart (Carrinho) – Exibe o carrinho de compras.
- Checkout – Exibe o formulário que permite aos clientes enviar pedidos.
Agora você sabe o que cada bloco representa. Vamos usar alguns desses blocos para criar uma experiência de eCommerce.
Uso do bloco Product Grid no WooCommerce
O bloco Product Grid é uma ferramenta versátil para mostrar os produtos da sua loja em um formato de grade organizado no seu site WordPress. Veja como você pode adicionar e personalizar um bloco de grade de produtos:
- Navegue até a página ou artigo em que você deseja que os produtos sejam exibidos. Atribua um título como “Produtos”
- Clique no botão + na barra de navegação superior para exibir todos os blocos. Role para baixo até a seção WOOCOMMERCE e selecione All Products. Essa ação exibe seus produtos em um layout de grade na página.
Usando o Bloco Todos os Produtos do WooCommerce para exibir produtos em Grade. - Para configurar esse bloco, use o painel de configurações do bloco no lado direito. Você pode acessar as configurações clicando no ícone Settings (o segundo ícone mais à direita na barra de navegação superior).
Painel de configurações para ajustar o bloco All Products. Aqui, você pode personalizar o layout, o conteúdo e o estilo da grade:
- Configurações de layout: Ajuste o número de linhas e colunas. Por exemplo, você pode definir ambos como 2 para obter uma aparência equilibrada.
- Configurações de conteúdo: Decida se você deseja incluir um menu suspenso de classificação para os clientes. Esse recurso permite que os clientes classifiquem os produtos em uma ordem escolhida. Você pode desativá-lo, se preferir.
- Estilo avançado: Se necessário, você pode adicionar classes CSS para obter um estilo mais sofisticado.
- Visualize a página depois que você tiver finalizado as configurações para garantir que tudo apareça como pretendido. Em seguida, clique no botão Publish. Essa etapa permite que você torne a página acessível publicamente, de forma privada ou com proteção por senha, conforme a sua preferência.
A página de Produtos atualizada exibe os produtos em uma grade de 2 por 2 e reflete uma barra de navegação.
Adicione um bloco Featured Product à sua página ou artigo
O bloco Featured Product permite que você destaque um produto em sua página ou artigo. Você pode selecionar um produto, personalizar suas configurações de exibição e adicioná-lo ao seu conteúdo para chamar a atenção para um item específico que deseja exibir.
Siga estas etapas para adicionar um bloco de produto em destaque:
- Comece navegando até a página ou artigo em que você deseja destacar o produto. Imagine que você está projetando uma grade de produtos e deseja colocar o produto em destaque na parte superior. Crie um espaço nesse local e você verá um botão + à esquerda.
Como alternativa, se você tiver um bloco existente próximo ao local desejado, clique nos três pontos verticais para que um menu seja exibido. Você pode escolher Add before ou Add after.
Adicionando o bloco Featured Product antes do bloco All Products. - Selecione o botão + na barra de navegação superior para exibir todos os blocos e procure por Featured Product.
Você pode selecionar um produto como um produto em destaque com o bloco Featured Product. - Escolha o produto que você deseja exibir. Em seguida, clique em Done.
- Para dar ao seu bloco Featured Product uma aparência exclusiva, clique em Settings. No painel de configurações do bloco, você pode:
- Decidir se você deseja exibir a descrição e o preço do produto.
- Configurar como sua mídia (imagens e vídeos) deve ser exibida.
- Especificar o texto alternativo para a imagem do produto.
- Escolher a cor de sobreposição do bloco.
- Ajuste a opacidade do bloco.
Ajuste das configurações do bloco Featured Product. - Após fazer todos os ajustes necessários, você pode publicar sua página ou atualizá-la se ela já estiver ativa. Isso permite que você veja o bloco em ação e garanta que ele tenha a aparência que você deseja.
Visualização da página Produtos atualizada exibindo o item de gorro em destaque acima da grade de produtos.
Utilize blocos de filtro no WooCommerce
Os blocos de filtro possibilitam que os clientes aprimorem suas buscas de produtos utilizando critérios específicos. Isso facilita a rápida localização dos produtos que atendem às suas preferências ou necessidades.
- Navegue até a página ou artigo onde você deseja adicionar os blocos. Neste guia, você utilizará a mesma página Produtos das etapas anteriores.
- Escolha onde você deseja adicionar os filtros.
- Clique no botão + na barra de navegação superior para exibir todos os blocos. Role para baixo até a seção WOOCOMMERCE e veja uma opção de filtro para preço, estoque, atributo e classificação. Por exemplo, se você escolher Filter by Price.
Adicionando o bloco Filter by Price
Ao selecionar esse bloco, você pode exibir uma barra de faixa de preço que permite aos usuários filtrar os produtos que aparecem na página com base na faixa de preço desejada. Você pode personalizar as configurações do bloco no painel à direita para atender às suas necessidades.
Adicionando o bloco Filter by Attribute
Você também pode usar o bloco Filter by Attribute (Filtrar por atributo).
Você pode escolher um atributo específico, como Cor, e depois definir as configurações de acordo. Por exemplo, você pode ativar Exibir contagem de produtos para mostrar o número de produtos disponíveis em cada cor.
Em seguida, você pode visualizar a página ativa e testar a funcionalidade dos botões de filtro.
Seguindo essas etapas, você pode oferecer aos seus clientes uma experiência de compra perfeita, permitindo que eles refinem facilmente suas pesquisas de produtos com base em vários critérios, aumentando a satisfação deles e ajudando a encontrar os produtos desejados.
Cart e páginas de checkout
Os recursos de Cart (carrinho) e checkout da sua loja on-line devem ser intuitivos e totalmente funcionais para que a jornada do usuário seja tranquila. Para garantir uma excelente experiência do cliente, você precisa gerenciar os itens do carrinho com eficiência e facilitar o processo de checkout sem esforço.
O WooCommerce cria as páginas de Cart (carrinho) e Checkout por padrão usando os blocos apropriados. Os clientes podem adicionar produtos ao carrinho e acessá-lo por meio da barra de navegação.
Depois de confirmar o conteúdo do carrinho, seu cliente pode selecionar o botão Proceed to Checkout, preencher os detalhes necessários e fazer o pedido.
Como criar uma página de loja personalizada
Agora que você aprendeu a usar determinados blocos do WooCommerce, a próxima etapa envolve combiná-los para criar uma página de loja personalizada e fácil de usar com os seguintes blocos:
- Pesquisa de produtos
- Filtro por preço
- Categorias de produtos
- Produto em destaque
- Todos os produtos
Para criar esse layout de loja personalizado, crie uma nova página e siga as etapas abaixo.
- Digite “Shop” como o título da página.
A página Shop no modo de edição. - Usando as mesmas etapas anteriores para adicionar um bloco, adicione o bloco Product Search. Não aplique nenhuma configuração.
Adicionando o bloco Product Search. - Adicione o bloco Product Categories List.
Adicionando o bloco Product Categories List. Na página de configuração do bloco, defina o DISPLAY STYLE como Dropdown.
Ajuste das configurações do bloco Product Categories List. - Em seguida, adicione o bloco Filter by Price. Não configure nada para esse bloco.
- Adicione o bloco Featured Product e selecione o produto a ser exibido. Aplique as mesmas configurações do bloco Featured Product que você fez anteriormente.
Na página Shop, você verá o produto de boné em destaque com algumas configurações para o produto em destaque. - Adicione o bloco All Products.
Adicionando o bloco All Products. Para as configurações desse bloco, defina os valores COLUMNS e ROWS como 2 e desmarque a opção Show Sorting Dropdown.
Ajuste das configurações do bloco All Products. - Publique a página e veja os resultados.
Pré-visualização da página Shop. 
Pré-visualização da página Shop.
Como monitorar e analisar o desempenho do bloco
As ferramentas robustas da Kinsta monitoram e analisam o desempenho das páginas que usam os blocos do WooCommerce.
Ferramenta APM da Kinsta
A ferramenta Application Performance Monitoring (APM) da Kinsta permite que você monitore o desempenho das páginas que contêm blocos do WooCommerce. Ela captura informações com registro de data e hora sobre processos PHP, consultas ao banco de dados MySQL e outras métricas cruciais, permitindo que você rastreie e analise as transações facilitadas pelo WooCommerce.
Você pode, por exemplo, analisar a duração e a frequência das interações e os possíveis gargalos associados a essas páginas. Com essas informações, você pode solucionar problemas e otimizar o desempenho com precisão.
Ferramenta de análise da Kinsta
Avaliar o impacto dos blocos do WooCommerce no engajamento do usuário e nas vendas requer uma abordagem multifacetada. As ferramentas de análise abrangentes da Kinsta desempenham um papel crucial aqui. Ao usar os recursos de análise do WordPress no painel MyKinsta, você obtém informações valiosas sobre várias métricas de desempenho que influenciam diretamente a experiência do usuário e, consequentemente, as vendas.
- A seção Recursos do painel MyKinsta rastreia o total de visitas, o espaço em disco e o uso da largura de banda do seu site. Ela fornece uma visão geral quantitativa do tráfego do site e do uso de recursos.
- A seção Desempenho inclui métricas como tempo médio de resposta PHP + MySQL e uso de AJAX. Essas estatísticas ajudam você a acompanhar a capacidade de resposta e a interatividade das páginas que usam os blocos do WooCommerce.
- A seção Resposta fornece detalhamentos de códigos de resposta e análises de erros, ajudando você a entender melhor as interações dos usuários e os possíveis obstáculos que eles podem encontrar.
- A seção Geo & IP permite que você acompanhe o uso da rede de distribuição de conteúdo (CDN), a eficiência do cache e os insights geográficos. Essas informações ajudam a refinar o seu site com base no comportamento do usuário, no local e nos dados de desempenho.
Ao monitorar de perto essas análises, você pode identificar gargalos potenciais e otimizar suas páginas usando Blocos do WooCommerce para garantir uma experiência de usuário contínua e envolvente.
Você pode ler nosso guia definitivo sobre 18 maneiras poderosas de acelerar sua loja WooCommerce para saber mais dicas. A velocidade é crucial para as lojas on-line, pois sites de carregamento lento levam à frustração do usuário e à perda de vendas.
Resumo
Este guia explorou os recursos dos blocos do WooCommerce, desde a adição de grades de produtos e produtos em destaque até a implementação de poderosos blocos de filtros. Ele também destacou a importância das caixas de carrinho e de checkout, elementos essenciais para orientar os clientes em uma experiência de compra perfeita.
A combinação estratégica de vários blocos do WooCommerce permite que você crie um layout intuitivo e visualmente atraente. O processo envolve a seleção, a configuração e a disposição cuidadosas dos blocos para atender a funcionalidades específicas e às preferências dos clientes.
Ao escolher o serviço de hospedagem WordPress da Kinsta, você aumenta significativamente o desempenho e a confiabilidade dos seus sites de WooCommerce. Com configurações de servidor otimizadas, medidas de segurança robustas e escalabilidade contínua, a Kinsta garante que sua loja on-line opere com eficiência máxima.
Se você estiver usando blocos do WooCommerce para exibição de produtos, filtros ou funcionalidades de carrinho, a infraestrutura de hospedagem da Kinsta fornece a velocidade e a estabilidade necessárias para proporcionar uma experiência de compra excepcional aos seus clientes.
Você já experimentou usar os blocos do WooCommerce? Se sim, qual bloco é o seu favorito e qual novo bloco você gostaria de ver adicionado? Compartilhe suas ideias na seção de comentários.
Deixe um comentário