Procurando uma maneira fácil de personalizar sua página de loja do WooCommerce?
O WooCommerce é responsável por mais de 29,35% de todas as lojas on-line, o que o torna uma plataforma de comércio eletrônico popular para proprietários de sites WordPress. No entanto, tornar sua loja WooCommerce exclusiva não é simples se você não tiver habilidades de desenvolvimento.
Isso se parece com você? Não se preocupe.
Este artigo mostrará como personalizar sua página de loja do WooCommerce sem escrever uma única linha de código.
O que é a página da loja do WooCommerce?
A página da loja do WooCommerce é uma página de arquivo que exibe seus produtos para clientes em potencial. O WooCommerce buscará os detalhes sobre seus produtos, incluindo:
- Imagens do produto
- Títulos de produtos
- Categorias de produtos
Em seguida, ele exibirá essas informações em uma grade ou lista na página da sua loja.
Por que você deve personalizar sua página de loja do WooCommerce?
Imagine entrar em uma loja e só ver fileiras e mais fileiras de produtos desorganizados. É provável que você vá embora porque é difícil encontrar o que está procurando.
O mesmo acontece com as lojas on-line. Se a página de sua loja mostrar uma parede de produtos sem nenhuma organização, os compradores sairão e passarão para o próximo site.
Esse é o problema com o layout padrão da página da loja do WooCommerce. Ele exibe apenas uma lista simples de produtos, o que torna difícil para os visitantes encontrarem os produtos que desejam.
Felizmente, há maneiras de editar a página da loja do WooCommerce, o que pode proporcionar os seguintes benefícios à sua loja:
- Destaque-se de seus concorrentes com um design exclusivo
- Melhore a experiência do cliente organizando os produtos por categoria
- Aumente as vendas exibindo produtos em destaque, em promoção e mais vendidos
- Aprimore seu SEO adicionando conteúdo voltado para palavras-chave altamente pesquisadas
- Aumente a confiança mostrando depoimentos, avaliações com estrelas e conteúdo gerado pelo usuário (UGC)
A chave para projetar uma página de loja do WooCommerce de alta conversão é criar um design amigável que facilite a compra de seus produtos.
Como personalizar a página da loja WooCommerce no WordPress
Há várias maneiras de personalizar sua página de loja no WordPress. Você pode usar um plug-in do WooCommerce, construtores de páginas ou codificar as personalizações do zero.
Como queremos manter este tutorial o mais simples possível, vamos nos concentrar em duas das maneiras mais fáceis de personalizar as páginas do WooCommerce.
O primeiro método usará um poderoso plug-in de criação de sites do WordPress que é fácil de usar e repleto de opções de personalização. Em seguida, mostraremos como usar o personalizador do WooCommerce para alterar o layout da página da sua loja.
Método 1: Criar uma página de loja personalizada com o SeedProd
Usaremos o SeedProd para adicionar personalizações à sua loja on-line para o primeiro método.
O SeedProd é o melhor construtor de sites para WordPress, com mais de 1 milhão de usuários. Ele permite que você crie temas personalizados para WordPress, páginas de destino de alta conversão e layouts de sites responsivos sem código.
Esse poderoso plugin também permite que você crie lojas on-line inteiras com sua integração com o WooCommerce. Como resultado, você pode criar e personalizar sua página de loja do WooCommerce, páginas de produtos, carrinho de compras, checkout e muito mais com apenas alguns cliques.
O SeedProd vem com mais de 150 temas e modelos profissionais para criar seu site. A partir daí, é possível personalizar o design com blocos e seções de conteúdo fáceis de usar.
Siga estas etapas para personalizar sua página de loja do WooCommerce com o SeedProd.
Etapa 1. Instalar o construtor de sites SeedProd
A primeira etapa é fazer o download de uma cópia do plug-in do construtor de sites SeedProd.
Observação: o SeedProd oferece uma versão gratuita para criar páginas de destino simples. No entanto, usaremos o plano SeedProd Elite para os recursos do WooCommerce de que precisamos.
Em seguida, você precisará instalar o SeedProd em seu site WordPress. Você pode seguir estas instruções para instalar um plug-in do WordPress se precisar de ajuda.
Depois de instalar e ativar o SeedProd, vá para SeedProd " Settings e insira sua chave de licença do plug-in.
Você pode encontrar a chave de licença fazendo login no site da SeedProd e copiando-a da seção "Downloads".
Digite sua chave de licença e clique no botão Verify Key (Verificar chave ) antes de passar para a próxima etapa.
Etapa 2. Criar um tema personalizado do WooCommerce
Usaremos o recurso de criação de temas do SeedProd para personalizar sua página de loja do WooCommerce. Ele substituirá seu tema existente do WordPress, substituindo-o por suas personalizações.
Você pode encontrá-lo acessando SeedProd " Theme Builder no painel do WordPress.
Há duas maneiras de criar seu tema de comércio eletrônico com o SeedProd:
- Crie cada parte (modelo) de seu tema individualmente
- Crie todos os seus modelos de tema com um modelo de tema WordPress pré-fabricado
Usaremos a segunda opção para este tutorial porque ela cria automaticamente todas as partes do seu site WooCommerce.
Clique no botão Themes (Temas ) na parte superior da tela para abrir a galeria de modelos de temas do SeedProd. Você pode escolher entre vários temas, inclusive designs para lojas on-line.
Para este tutorial, usaremos o tema "Furniture Store" (Loja de móveis).
Para importar o tema, passe o mouse sobre a miniatura e clique no ícone de marca de seleção.
Como você pode ver na captura de tela abaixo, o SeedProd criará automaticamente todos os modelos para o seu tema, incluindo:
- Navegação do cabeçalho
- Arquivos de produtos
- Página do produto
- Página da loja
- Página única
- Postagem única
- Índice do blog, Arquivos, Pesquisa
- Página inicial
- Barra lateral
- Rodapé
Você pode personalizar cada modelo com o construtor de arrastar e soltar do SeedProd. Mostraremos a você como personalizar o modelo da página da loja na etapa 3.
Etapa 3. Personalizar a página da loja do WooCommerce
Para personalizar sua página de loja do WooCommerce com o SeedProd, passe o mouse sobre o modelo "Shop Page" e clique no link Edit Design.
Depois de clicar no link, seu modelo de página da loja será aberto no construtor de páginas visual de arrastar e soltar do SeedProd.
À esquerda estão os blocos e as seções que podem ser adicionados à sua página. À direita, você pode ver uma prévia da aparência da sua página em tempo real.
Sua página da loja mostrará uma lista de todos os seus produtos por padrão. No entanto, é possível alterar isso facilmente adicionando novos layouts, blocos de conteúdo e seções.
Digamos que você queira adicionar um banner de rolagem que mostre uma venda ou promoção. Nesse caso, você pode arrastar o bloco Image Carousel e carregar imagens de banner personalizadas.
Em seguida, você pode personalizar o carrossel nas configurações do bloco, alterando-o para um tema escuro ou claro, reproduzindo automaticamente o controle deslizante e exibindo as legendas das imagens.
E se você quiser destacar seus produtos em destaque ou os produtos mais vendidos? Para fazer isso, adicione uma nova seção à sua página, role para baixo até o painel de blocos do WooCommerce e arraste o bloco Best Selling Products para a sua página.
Esse bloco exibirá seus produtos mais vendidos em uma grade uniforme.
Você pode fazer com que essa nova seção da página se destaque mais dando a ela uma cor de fundo personalizada.
Em seguida, no bloco Best Selling Products Advanced Settings, você pode alterar a cor, a tipografia e os botões add to cart.
Você também pode exibir produtos por categoria com o bloco WooCommerce do SeedProd. Para fazer isso, arraste o bloco Product Grids, altere o "Query Type" (Tipo de consulta) para Custom Query (Consulta personalizada ) e clique na opção Select by Category (Selecionar por categoria ).
A partir daí, você pode escolher as categorias a serem incluídas na grade de produtos.
Alguns outros blocos que você pode adicionar à sua página da loja incluem:
- Depoimentos para aumentar a confiança e a credibilidade
- Temporizadores de contagem regressiva para criar urgência para sua venda
- Acordeão para exibir perguntas frequentes
- Incorporações do Facebook ou Twitter para exibir conteúdo gerado pelo usuário
Você pode até mesmo alterar facilmente o título da página da loja WooCommerce.
Quando estiver satisfeito com a página da loja, clique no botão verde Save (Salvar ) no canto superior direito da tela.
Agora você pode seguir o mesmo processo para personalizar as outras partes da sua loja WooCommerce. Basta clicar em "Edit Design" em qualquer um dos modelos de tema e personalizar o layout e o estilo de acordo com sua marca.
Etapa 4. Publique sua página da loja personalizada
Quando seu site WooCommerce estiver com a aparência desejada, é hora de torná-lo ativo. Para fazer isso, acesse SeedProd " Theme Builder e, no canto superior direito, coloque a opção "Enable SeedProd Theme" (Ativar tema SeedProd) na posição "Yes" (Sim).
Agora você pode visualizar a página da loja WooCommerce ao vivo em seu site.
Método 2: Personalize a página da sua loja com o WooCommerce Customizer
Se você precisar de uma maneira mais direta de personalizar a página da loja do WooCommerce, poderá fazê-lo com o personalizador integrado do WooCommerce. O personalizador usa o personalizador de tema ao vivo do WordPress para editar sua página da loja em tempo real com uma visualização ao vivo.
As opções de personalização que você vê dependerão do tema do WordPress que você usa em seu site. Estamos usando o tema padrão Twenty Twenty-Two para este guia.
Para personalizar a página da sua loja com o personalizador, clique em Appearance " Customize ( Aparência " Personalizar ) no painel do WordPress. A partir daí, clique em WooCommerce " Product Catalog para ver as opções de personalização.
Em seguida, clique no menu suspenso "Shop page display" (Exibição da página da loja) e escolha um layout.
Por exemplo, você pode escolher "Show categories" (Mostrar categorias) para mostrar apenas as categorias de seus produtos na página da loja.
Ou você pode escolher "Show products" para mostrar apenas os produtos.
Como alternativa, você pode exibir suas categorias de produtos primeiro e, em seguida, uma grade de produtos com a opção "Mostrar categorias e produtos".
Além disso, você pode mostrar os produtos por:
- Popularidade
- Classificação média
- Mais recentes
- Preço
Você também pode escolher quantos produtos por linha e as linhas a serem exibidas em cada página.
Lembre-se de publicar suas alterações quando estiver satisfeito com seu design. Aqui está uma visualização de uma página de loja que estilizamos usando o WooCommerce Customizer.
É isso aí!
Esperamos que este artigo tenha ajudado você a aprender como personalizar a página WooCommerce Shop.
Como você pode ver, o SeedProd facilita muito a criação de um site de WooCommerce exclusivo e fácil de usar, sem a necessidade de qualquer experiência prévia em design ou código. É tão simples quanto apontar e clicar, com resultados impressionantes que os clientes em potencial vão adorar.
Pronto para aumentar suas vendas no WooCommerce?
Você também pode gostar deste guia sobre como configurar o acompanhamento de conversões do WooCommerce enquanto estiver aqui. Ou este sobre os melhores plugins de afiliados do WooCommerce.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
