Como personalizar facilmente sua página de loja WooCommerce

Procurando uma maneira fácil de personalizar sua página de loja WooCommerce?

O WooCommerce está presente em mais de 29,35% de todas as lojas online, tornando-se uma plataforma de comércio eletrônico popular para proprietários de sites WordPress. No entanto, tornar sua loja WooCommerce única não é simples se você não tiver habilidades de desenvolvimento.

Isso soa como você? Não se preocupe.

Este artigo mostrará como personalizar sua página de loja WooCommerce sem escrever uma única linha de código.

O que é a página da loja WooCommerce?

A página da loja 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 WooCommerce?

Imagine entrar em uma loja e tudo o que você vê são fileiras e mais fileiras de mercadorias desorganizadas. As chances são de que você vá embora porque é difícil encontrar o que você está procurando.

O mesmo vale para as lojas online. Se a página da sua loja mostrar uma parede de produtos sem organização, os compradores irão se afastar e passar para o próximo site.

Esse é o problema com o layout padrão da página da loja WooCommerce. Ele exibe apenas uma lista simples de produtos, dificultando que os visitantes encontrem os produtos que desejam.

Felizmente, existem maneiras de editar a página da loja WooCommerce, o que pode dar à sua loja os seguintes benefícios:

• Destaque-se de seus concorrentes com um design exclusivo
• Melhore a experiência do cliente organizando produtos por categoria
• Aumente as vendas exibindo produtos em destaque, em promoção e mais vendidos
• Melhore seu SEO adicionando conteúdo que segmente palavras-chave altamente pesquisadas
• Aumente a confiança mostrando depoimentos, classificações por estrelas e conteúdo gerado pelo usuário (UGC)

A chave para projetar uma página de loja 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

Existem várias maneiras de personalizar a página da sua loja no WordPress. Você pode usar um plugin 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 2 das maneiras mais fáceis de personalizar as páginas do WooCommerce.

O primeiro método usará um poderoso plugin construtor de sites WordPress que é fácil de usar e repleto de opções de personalização. Em seguida, mostraremos como usar o personalizador WooCommerce para alterar o layout da página da sua loja.

Método 1: Crie uma página de loja personalizada com o SeedProd

Usaremos o SeedProd para adicionar personalizações à sua loja online para o primeiro método.

SeedProd é o melhor construtor de sites para WordPress, com mais de 1 milhão de usuários . Ele permite que você crie temas personalizados do WordPress, páginas de destino de alta conversão e layouts de sites responsivos sem código.

Este poderoso plugin também permite que você crie lojas online inteiras com sua integração WooCommerce. Como resultado, você pode criar e personalizar sua página de loja 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í, você pode personalizar seu design com blocos e seções de conteúdo fáceis de usar.

Siga estas etapas para personalizar sua página de loja WooCommerce com o SeedProd.

Etapa 1. Instale o Criador de sites SeedProd

O primeiro passo é baixar uma cópia do plugin do construtor de sites SeedProd.

Nota: O SeedProd oferece uma versão gratuita para criar páginas de destino simples. No entanto, usaremos o SeedProd Pro para os recursos do WooCommerce de que precisamos.

Você precisará instalar o SeedProd em seu site WordPress em seguida. Você pode seguir estas instruções para instalar um plugin do WordPress se precisar de ajuda.

Depois de instalar e ativar o SeedProd, vá para SeedProd » Configurações e insira sua chave de licença do plugin.

Você pode encontrar sua chave de licença entrando no site da SeedProd e copiando-a na seção 'Downloads'.

Insira sua chave de licença e clique no botão Verificar chave antes de passar para a próxima etapa.

Etapa 2. Crie um tema personalizado do WooCommerce

Usaremos o recurso de construtor de temas do SeedProd para personalizar sua página de loja WooCommerce. Ele substituirá seu tema WordPress existente, substituindo-o por suas personalizações.

Você pode encontrá-lo acessando SeedProd » Theme Builder no seu painel do WordPress.

Existem 2 maneiras de criar seu tema com o SeedProd:

1. Crie cada parte (modelo) do seu tema individualmente
2. Crie todos os seus modelos de tema com um modelo de tema WordPress pré-fabricado

Usaremos a 2ª opção para este tutorial porque ela cria automaticamente todas as partes do seu site WooCommerce.

Clique no botão Temas na parte superior da tela para iniciar a galeria de modelos de temas do SeedProd. Você pode escolher entre vários temas, incluindo designs para lojas online.

Vamos com o tema 'Loja de móveis' para este tutorial.

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á todos os modelos para o seu tema automaticamente, 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
• Pagina inicial
• Barra Lateral
• Rodapé

Você pode personalizar cada modelo com o construtor de arrastar e soltar do SeedProd. Mostraremos como personalizar o modelo de página da loja na etapa 3.

Etapa 3. Personalize a página da loja WooCommerce

Para personalizar a página da sua loja WooCommerce com o SeedProd, passe o mouse sobre o modelo 'Página da loja' e clique no link Editar design .

Depois de clicar no link, seu modelo de página de loja será aberto no construtor visual de páginas de arrastar e soltar do SeedProd.

À esquerda estão blocos e seções que você pode adicionar à sua página. Você pode ver uma prévia da aparência da sua página em tempo real à direita.

Sua página de loja mostrará uma lista de todos os seus produtos por padrão. No entanto, você pode alterar isso facilmente adicionando novos layouts, blocos de conteúdo e seções.

Digamos que você queira adicionar um banner de rolagem mostrando uma venda ou promoção. Nesse caso, você pode arrastar sobre o bloco Carrossel de imagens e fazer upload de imagens de banner personalizadas.

Você pode personalizar seu carrossel nas configurações do bloco alterando-o para um tema escuro ou claro, reproduzindo automaticamente o controle deslizante e mostrando as legendas das imagens.

E se você quiser destacar seus produtos em destaque ou produtos mais vendidos? Para fazer isso, adicione uma nova seção à sua página, role para baixo até o painel de blocos WooCommerce e arraste o bloco Produtos mais vendidos para sua página.

Este bloco exibirá seus produtos mais vendidos em uma grade uniforme.

Você pode fazer com que esta nova seção da página se destaque mais, dando-lhe uma cor de fundo personalizada.

Em seguida, no bloco de produtos mais vendidos, configurações avançadas, você pode alterar a cor, a tipografia e adicionar botões ao carrinho.

Você também pode exibir produtos por categoria com o bloco WooCommerce da SeedProd. Para isso, arraste sobre o bloco Product Grids , altere o 'Query Type' para Custom Query e clique na opção Select by Category .

A partir daí, você pode escolher quais categorias incluir na grade de produtos.

Alguns outros blocos que você pode adicionar à sua página de loja incluem:

• Testemunhos para aumentar a confiança e 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

Quando estiver satisfeito com a página da sua loja, clique no botão verde 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 'Editar design' em qualquer um dos seus modelos de tema e personalizar o layout e o estilo para se adequar à sua marca.

Etapa 4. Publique sua página de loja personalizada

Quando seu site WooCommerce estiver como você deseja, é hora de torná-lo ativo. Para fazer isso, vá para SeedProd » Theme Builder e, no canto superior direito, gire o botão 'Ativar SeedProd Theme' para a posição 'Sim'.

Agora você pode visualizar sua página de loja WooCommerce ao vivo em seu site.

Método 2: Personalize sua página de loja com o WooCommerce Customizer

Se você precisar de uma maneira mais direta de personalizar a página da loja WooCommerce, poderá fazê-lo com o personalizador WooCommerce integrado. O personalizador usa o personalizador de tema ao vivo do WordPress para editar sua página de 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 Aparência » Personalizar no painel do WordPress. A partir daí, clique em WooCommerce » Catálogo de produtos para ver as opções de personalização.

Em seguida, clique no menu suspenso 'Exibir página da loja' e escolha um layout.

Por exemplo, você pode escolher 'Mostrar categorias' para mostrar apenas suas categorias de produtos na página da loja.

Ou você pode escolher 'Mostrar produtos' para mostrar apenas 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 produtos por:

• Popularidade
• Classificação média
• Mais recente
• Preço

Você também pode escolher quantos produtos por linha e linhas serão exibidos em cada página.

Lembre-se de publicar suas alterações quando estiver satisfeito com seu design. Aqui está uma prévia de uma página de loja que estilizamos usando o WooCommerce Customizer.

É isso!

Esperamos que este artigo tenha ajudado você a aprender como personalizar a página WooCommerce Shop.

Como você pode ver, o SeedProd torna super fácil criar um site WooCommerce exclusivo e fácil de usar, sem precisar de nenhuma experiência ou código de design anterior. É 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.

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.