Como adicionar uma barra lateral ao Storefront WooCommerce

WooCommerce alimenta muitos sites de comércio eletrônico, a melhor coisa é que ele é muito flexível e pode ser personalizado através de ganchos e filtros, ele vem com um tema padrão - tema Storefront WooCommerce. Além disso, você pode usar plugins para funcionalidade estendida. Você pode querer adicionar barras laterais personalizadas às suas páginas do WooCommerce, mas implementá-lo é um problema. No entanto, este breve tutorial tenta ajudá-lo a aprender como adicionar a barra lateral ao tema da vitrine. Também já escrevi extensivamente sobre como remover a barra lateral no tema da vitrine ou como adicionar a barra lateral no WordPress.

WooCommerce Storefront Adicionar barra lateral

O WooCommerce permite que você inclua páginas diferentes, como página inicial, página do blog, visualização do artigo, página da loja, visualização do produto único e assim por diante. Mostrar os mesmos widgets em todas essas páginas pode afetar a experiência do usuário, bem como a taxa de conversão de sua loja online . Isso é uma coisa ruim porque você não será capaz de gerar receita.

Um exemplo perfeito é quando um visitante chega à página do blog, você pode querer que ele se inscreva no blog, veja mais artigos relacionados ou pesquise conteúdo útil no site. Adicionar um formulário de inscrição, Postagens Relacionadas e widgets de Pesquisa são bons candidatos para a barra lateral em uma visualização de blog.

Além disso, se um visitante chegar à página da loja, convém convertê-lo em cliente e fazer uma compra. Para que isso aconteça, você gostaria que ele visualizasse os produtos, refine a busca, adicione os produtos ao carrinho e finalize a compra. Neste exemplo, a ideia de incluir um formulário de inscrição, postagens relacionadas e widgets de pesquisa na barra lateral simplesmente falha.

No entanto, existe uma solução para isso. Envolve adicionar barras laterais personalizadas a diferentes páginas e visualizações em seu site de comércio e utilizar os seguintes widgets oferecidos pelo WooCommerce:

• Produtos . Ele exibe uma lista dos produtos da sua loja.
• Pesquisa de produtos. Este é um formulário de pesquisa dedicado para a loja.
• Categorias de Produtos. Ele exibe uma lista ou lista suspensa de categorias de produtos.
• Produtos por classificação. Ele exibe uma lista dos produtos mais bem avaliados da sua loja.
• Nuvem de tags de produtos. Ele exibe uma nuvem de suas tags de produtos mais usadas.
• Ele exibe o carrinho de compras do cliente.
• Filtre produtos por atributo. Ele exibe uma lista de atributos para filtrar produtos em sua loja.
• Filtre produtos por preço. Ele exibe um controle deslizante para filtrar produtos em sua loja por preço.
• Filtre os produtos por classificação . Ele exibe uma lista de classificações por estrelas para filtrar produtos em sua loja.
• Filtros de produtos ativos. Ele exibe uma lista de filtros de produtos ativos.
• Revisão recente do produto. Ele exibe uma lista de avaliações recentes de sua loja.
• Produtos vistos recentemente. Ele exibe uma lista dos produtos visualizados recentemente de um cliente.

Para aprimorar a experiência do usuário e otimizar a taxa de conversão de sua loja WooCommerce, você pode experimentar adicionar barras laterais personalizadas para todas ou cada uma das visualizações em sua loja online. O WooCommerce potencializa essas visualizações e elas incluem:

• Página da loja . Ele exibe todos os produtos.
• Categorias de produtos . Ele exibe todos os produtos em uma determinada categoria de produto.
• Etiquetas de produtos . Ele exibe todos os produtos relacionados à etiqueta de produto específica.
• Produtos . Representa a visão singular de um produto.
• Página do carrinho . Exibe os produtos adicionados ao carrinho.
• Página de checkout . Ele permite que os compradores efetuem o pagamento pela compra dos produtos.
• Páginas da conta . Ele exibe informações do cliente relacionadas à sua conta, pedidos, etc.

Etapas para adicionar uma barra lateral personalizada à página da loja WooCommerce.

Para este breve guia, vou usar o plugin WooSidebars .

Este plugin permite que você substitua qualquer área de widget em seu site WordPress, exibindo widgets diferentes para telas diferentes. Se você não é muito experiente em tecnologia, pode usar este plugin, pois não tocará em nenhuma linha de código.

Aqui estão os passos simples que você deve seguir:

1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
2. Então, vamos instalar o plugin que indicamos anteriormente. Para baixá-lo diretamente no Painel Administrativo, basta navegar até Plugins > Adicionar Novo . Depois disso, você precisará fazer uma busca por palavra-chave para o plugin ' WooSidebars '. Você precisa instalá-lo e ativá-lo conforme mostrado abaixo:
3. Depois que o plug-in for ativado, você poderá visualizar o item de menu “Áreas de widget” no menu Aparência . Vá para Aparência > Áreas de Widget .
4. Para adicionar uma nova área de widget, clique em “ Adicionar novo ”. Após a tela “ Adicionar nova área de widget ” aparecer, você pode definir uma nova área de widget (barra lateral), definir a condição para exibir a área de widget recém-definida em páginas/modelo/visualização específicos e selecionar a barra lateral ou a área de widget que deseja gostaria de substituí-lo por.

Para este tutorial, vou criar uma área de widget e exibi-la apenas na página WooCommerce Shop.

5. Além disso, você pode querer criar uma área de widget para uma postagem de blog específica. Basta ir para Posts > Todos os Posts e clicar na marca de seleção ao lado do post do blog desejado, conforme mostrado abaixo:

Conclusão

Neste tutorial, mostrei como você pode adicionar uma barra lateral personalizada à página WooCommerce usando o plug-in WooSidebars. Este plugin vem com condições para páginas, que são exibidas por padrão. Se você clicar na guia "Avançado" dentro da caixa "Condições", ela abrirá uma variedade de guias extras, para condições adicionais, como modelos de página específicos, tipos de postagem, arquivos de taxonomia, termos de taxonomia, hierarquia de modelos do WordPress e visualizações WooCommerce.

Além disso, para adicionar suporte para outros tipos de postagem, adicione o seguinte ao arquivo “functions.php” do seu tema:

 add_post_type_support( 'post_type', 'woosidebars' );

Lembre-se de substituir “post_type” pelo tipo de postagem desejado.

Além disso, este plugin detecta quais barras laterais estão ativas no tema atual e notifica quais de suas barras laterais personalizadas não se aplicam ao tema atual.

Artigos semelhantes

1. Como definir produtos em destaque no WooCommerce
2. Como ocultar produtos sem preço no WooCommerce
3. Como usar os atributos do produto WooCommerce passo a passo [Guia Completo]
4. Como ocultar o produto WooCommerce dos resultados da pesquisa
5. Como adicionar produto após a configuração da vitrine [Guia para iniciantes]
6. Personalização da página inicial do tema WooCommerce Storefront [Guia definitivo]
7. Como ocultar um produto no WooCommerce ou ocultar produtos por categoria ou funções
8. Como ocultar variações de estoque no WooCommerce
9. Como ocultar o botão Adicionar ao carrinho no WooCommerce
10. Como alterar o texto do botão Adicionar ao carrinho na página da loja WooCommerce
11. Como criar uma área de widget personalizada no WordPress passo a passo
12. Como alterar o URL da página da loja no WooCommerce rapidamente
13. Como encontrar rapidamente o ID do seu produto no WooCommerce
14. Como contar itens adicionados ao carrinho Código de contagem de carrinho WooCommerce
15. Como ocultar todos os produtos da página da loja no WooCommerce