Quando criei uma loja WooCommerce pela primeira vez, estava animado para começar a vender, mas logo percebi que a página padrão da loja era simples e não combinava nem um pouco com a minha marca. Ela mostrava apenas uma grade básica de produtos, e eu não tinha ideia de como personalizá-la sem contratar um desenvolvedor.
Se você está no mesmo barco, não se preocupe. O WooCommerce é a forma mais popular de adicionar a funcionalidade de comércio eletrônico ao WordPress, e há maneiras fáceis de fazer com que a página da sua loja se destaque sem escrever uma única linha de código.
Neste guia, mostrarei passo a passo como fazer isso:
- Personalize visualmente o layout da sua loja WooCommerce
- Organize os produtos por categoria, popularidade ou tags
- Adicione elementos de design como depoimentos, banners e produtos em destaque
- Use ferramentas como o SeedProd para criar uma vitrine que pareça sua
Esses são os métodos exatos que usei para transformar minha página de loja padrão em algo mais limpo, mais envolvente e muito melhor para converter visitantes em compradores.
O que é a página da loja do WooCommerce?
A página da loja do WooCommerce é a página padrão do arquivo de produtos que exibe todos os produtos de sua loja. Quando você instala o WooCommerce, ele cria automaticamente essa página usando as configurações de layout do seu tema.
Pense nele como o catálogo principal ou a vitrine de sua loja. É onde os clientes normalmente navegam antes de clicar nas páginas de produtos específicos.
Por padrão, a página da loja extrai o conteúdo de suas listagens e exibições de produtos:
- Imagens do produto
- Títulos e descrições curtas
- Preços
- Categorias e tags de produtos
- Avaliações e comentários com estrelas (se ativados)
Ele é gerado dinamicamente usando seu tema do WordPress e os arquivos de modelo do WooCommerce, e pode ser personalizado para corresponder à sua marca e melhorar as conversões.
Uma página de loja bem projetada pode ajudar os visitantes a encontrar rapidamente o que estão procurando, reduzir o atrito no processo de compra e aumentar as vendas. É por isso que a personalização do layout padrão da página da loja do WooCommerce é tão importante.
Por que você deve personalizar a página da loja do WooCommerce?
Imagine entrar em uma loja física onde todos os produtos estão espalhados aleatoriamente nas prateleiras. Sem placas, sem categorias, sem itens em destaque. Você provavelmente sairia rapidamente.
É exatamente isso que muitos compradores experimentam quando chegam a uma página de loja padrão do WooCommerce. Ela mostra todos os seus produtos em uma grade simples, com pouco contexto ou direção. Isso pode levar a altas taxas de rejeição e a oportunidades de vendas perdidas.
A personalização da página da loja ajuda você:
- Melhorar a experiência do usuário (UX), facilitando para os clientes encontrarem o que desejam
- Aumente as conversões destacando os mais vendidos, as vendas ou os produtos de alta margem
- Aprimore o SEO adicionando conteúdo rico em palavras-chave e marcação de esquema
- Reduzir as taxas de rejeição, oferecendo melhor navegação e hierarquia visual
- Crie confiança na marca com depoimentos, avaliações ou conteúdo gerado pelo usuário
Um layout de loja WooCommerce bem otimizado é uma parte essencial para transformar visitantes em compradores.
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 quero manter este tutorial o mais simples possível, vou me 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, mostrarei como usar o personalizador do WooCommerce para alterar o layout da página da sua loja.
Método 1: usar o SeedProd para personalizar a página da loja do WooCommerce
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 neste 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 sua loja WooCommerce ao vivo no seu site.
Método 2: personalizar a página da loja do WooCommerce usando o personalizador de temas
Se você preferir não usar um construtor de terceiros, o WooCommerce inclui opções básicas de personalização por meio do WordPress Customizer.
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.
PERGUNTAS FREQUENTES: Personalização da página da loja WooCommerce
SeedProd - um construtor de arrastar e soltar sem código com integração ao WooCommerce
WooCommerceCustomizer - permite modificar layouts diretamente no WordPress Customizer
Elementor ou Divi (opcional) - outros construtores de páginas visuais com suporte ao WooCommerce
Espero 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 plug-ins de afiliados do WooCommerce.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
