Como personalizar a página da loja WooCommerce (sem código)

Procurando uma maneira de personalizar a página da loja WooCommerce? Neste guia passo a passo, você aprenderá três métodos 100% livres de código para personalizar a página da loja de sua loja.

A página da loja da sua loja, também chamada de página do catálogo, é a página que lista vários produtos. Isso pode ser todos os seus produtos (na página “principal” da loja) ou produtos com uma categoria ou etiqueta de produto específica.

Em termos mais técnicos, é o design do arquivo para o tipo de postagem Produtos em uma loja WooCommerce.

Como a página da sua loja é o que ajuda os visitantes a navegar e descobrir seus produtos, é importante acertar. Este post vai te ensinar como!

Abaixo, você aprenderá três maneiras diferentes de personalizar a página da loja WooCommerce sem código , usando nosso tema Botiga como exemplo:

• Opções integradas no personalizador de tema nativo do WordPress
• O editor de blocos nativo do WordPress
• O plug-in do construtor de páginas Elementor (este método permitirá que você use a versão gratuita do Elementor)

Observação — Se você ainda não criou sua loja WooCommerce, pode acessar nosso guia sobre como criar uma loja WooCommerce. Depois de ter uma loja funcionando, volte aqui para começar a personalizar a página da loja!

Uma rápida introdução à personalização da página da loja WooCommerce

Se você deseja personalizar totalmente a página da sua loja WooCommerce, escolha um tema WooCommerce criado para oferecer flexibilidade.

Embora os princípios gerais que você aprende neste tutorial possam ser aplicados a qualquer tema WooCommerce, usaremos o tema Botiga por alguns motivos:

• Ele inclui opções detalhadas no WordPress Customizer para permitir que você personalize a página da loja sem exigir que você crie tudo do zero.
• Se você deseja projetar tudo do zero, o Botiga Pro possui um recurso integrado para permitir que você personalize tudo usando o editor de blocos nativo do WordPress ou a versão gratuita do Elementor.

Além de suas muitas opções de personalização, o Botiga também é um dos temas WooCommerce mais rápidos, portanto, também preparará sua loja para o sucesso em outras áreas.

Com isso dito, você ainda achará este tutorial útil se estiver usando um tema WooCommerce diferente.

Por exemplo, a maioria dos temas WooCommerce oferece pelo menos algumas opções no Personalizador.

Da mesma forma, o método Elementor geral que mostramos funcionará com qualquer tema. A única diferença é que você precisará comprar o Elementor Pro se não estiver usando o Botiga, enquanto o Botiga permite que você faça tudo usando a versão gratuita do Elementor.

Se quiser saber mais sobre o Botiga, pode ir à página temática do Botiga.

Método 1 – Personalização da página da loja com o WordPress Customizer

Para a maioria das pessoas, a maneira mais fácil de editar a página da loja WooCommerce é usando as opções do seu tema no WordPress Customizer.

Com o Botiga, você obtém uma gama detalhada de opções para ajudá-lo a personalizar o layout, o estilo e o conteúdo da página da sua loja.

Um tema diferente pode não oferecer tantas opções, mas você deve encontrar pelo menos algumas no Personalizador.

Veja como usar as opções do tema Botiga para personalizar a página da loja WooCommerce.

1. Escolha o que exibir na página da sua loja

Para começar, você deve escolher qual conteúdo exibir na página da sua loja. O padrão é apenas exibir produtos, mas o Botiga também oferece a opção de exibir categorias.

Para acessar essas configurações, abra o Personalizador do WordPress acessando Aparência → Personalizar no painel do WordPress.

Em seguida, selecione Geral em WooCommerce :

Agora, use o menu suspenso Exibir página da loja para escolher se deseja mostrar apenas produtos, apenas categorias ou ambos.

Você também pode fazer uma escolha semelhante para suas páginas de arquivo de categoria usando o menu suspenso Exibição de categoria . Nesse caso, você está escolhendo se deseja exibir subcategorias.

2. Abra as configurações da página da loja no WordPress Customizer

Em seguida, volte para a lista do menu principal no Personalizador e selecione as opções do Catálogo de produtos para personalizar ainda mais a página da sua loja.

Agora você verá várias opções na barra lateral, divididas em duas guias — Geral e Estilo :

• Geral – Controle o layout e o conteúdo dos elementos na página da sua loja.
• Estilo – Ajuste o design dos elementos na página da sua loja, como alterar cores/fontes ou adicionar bordas.

3. Personalize o layout geral

Para começar, expanda as configurações de Layout para ajustar o layout geral da página da sua loja.

Primeiro, você deve escolher o tipo de layout, que oferece três opções gerais:

• Grade
• Lista
• Alvenaria

Você também pode controlar as opções gerais de layout, como quantas linhas e colunas usar.

Abaixo disso, você pode escolher qual estilo de cabeçalho usar na página da sua loja e qual conteúdo incluir no cabeçalho, como mostrar ou não categorias de produtos.

Mais abaixo no menu Personalizador, você obtém opções para controlar o layout da barra lateral, os elementos da página e a paginação:

• Layout da barra lateral – você pode adicionar uma barra lateral vertical ou horizontal. Você pode então controlar o conteúdo da barra lateral usando widgets. Isso pode ser ótimo para adicionar filtros de produtos para ajudar os visitantes a navegar por seus produtos.
• Elementos da página – Você pode mostrar/ocultar diferentes elementos na página.
• Paginação – Você pode usar paginação normal, rolagem infinita ou um botão 'Carregar mais' com tecnologia Ajax que carrega novos produtos sem recarregar a página.

4. Personalize o cartão do produto

Em seguida, você pode abrir a seção Cartão do produto para personalizar como os produtos individuais aparecem na página da loja.

Primeiro, você pode escolher diferentes layouts de cartão e posicionamentos de botões de adição ao carrinho.

Por exemplo, na captura de tela abaixo, você pode ver que movemos o botão adicionar ao carrinho para flutuar sobre a imagem do produto no canto inferior esquerdo.

Mais abaixo nas configurações, você pode fazer algumas outras escolhas importantes:

• Personalize ou desative o comportamento de visualização rápida do produto.
• Ativar/desativar elementos de conteúdo específicos — por exemplo, mostrar ou não a contagem de avaliações na página da loja.
• Ajuste o alinhamento e o espaçamento.

5. Personalize tags e categorias de vendas

Em seguida, você pode expandir as seções Etiqueta de venda e Categorias para configurar essas áreas da página da sua loja.

As configurações da etiqueta de venda permitem controlar o posicionamento e o texto do crachá de venda. Também existe a opção de mostrar a porcentagem de venda, que inserirá dinamicamente o desconto adequado para cada produto.

As configurações de Categorias permitem controlar o layout dos cartões de categoria se você optou por exibir as categorias na Etapa 1 deste guia:

6. Ajuste as opções de estilo conforme necessário

Quando estiver satisfeito com o layout e o conteúdo da página da sua loja, você pode pular para a guia Estilo para ajustar o estilo de tudo conforme necessário.

Novamente, é aqui que você pode alterar cores, ajustar fontes, adicionar bordas e assim por diante.

Você não precisa mudar nada aqui. Mas se você quiser fazer alguns ajustes, é uma boa área para explorar.

7. Explore outras opções de personalização

Além da área dedicada ao Catálogo de Produtos no Customizador, o Botiga também oferece algumas outras opções que podem afetar a página da sua loja.

Por exemplo, você pode ajustar a cor dos botões adicionar ao carrinho e visualização rápida (assim como todos os outros botões do seu site) abrindo as configurações de botões .

Se houver algum detalhe específico que você deseja alterar, vale a pena explorar essas outras opções. Mas se você já gosta da aparência da página da sua loja, não há necessidade de se aprofundar mais.

8. Publique o layout da página da sua loja

Quando estiver satisfeito com a aparência da página da sua loja, tudo o que você precisa fazer é clicar no botão Publicar para torná-la ativa em sua loja.

Método 2 – Personalização da página da loja com o editor de blocos do WordPress

Para a maioria das lojas, as opções de personalização integradas do Botiga oferecem flexibilidade suficiente quando se trata de criar uma página de loja personalizada no WooCommerce.

No entanto, você pode ter algumas situações em que deseja criar um design verdadeiramente personalizado do zero.

Para ajudá-lo a conseguir isso sem código, você pode usar o recurso Templates Builder no Botiga Pro para personalizar a página da loja usando o editor de blocos nativo do WordPress ou Elementor (mesmo a versão gratuita).

Nesta seção, mostraremos como funciona com o editor de blocos. Em seguida, mostraremos como funciona com Elementor na próxima seção. Se você já sabe que deseja usar o Elementor, clique neste link para pular para essa seção.

1. Ative o módulo Botiga Pro Template Builder

Para habilitar o construtor de modelo, vá para Aparência → Painel de Tema → Recursos de Tema .

Em seguida, role para baixo e habilite o módulo Templates Builder .

Você precisará do Botiga Pro para ativar este módulo — caso ainda não o possua, você pode adquiri-lo clicando aqui.

2. Crie um novo layout de página da loja

Em seguida, vá para Aparência → Modelos do Botiga → Adicionar modelo para criar um novo modelo de página de loja.

Na interface do modelo, dê um nome a ele (por exemplo, “Página da loja”) e escolha Catálogo da loja como o tipo de modelo.

3. Crie a página da sua loja usando blocos

Agora, você pode usar o editor para criar o layout da página da sua loja usando blocos.

Você pode usar qualquer um dos blocos WordPress existentes (ou blocos de outros plugins).

A Botiga também adiciona um monte de seus próprios blocos WooCommerce para conteúdo dinâmico importante, como detalhes do arquivo da loja e detalhes do produto.

Para realmente listar certos tipos de produtos, você pode usar o bloco Product Query .

A princípio, adicionar o bloco Product Query mostrará uma grade de seus produtos.

Você pode usar as configurações do bloco para filtrar diferentes tipos de produtos, personalizar o layout, ajustar o cartão do produto, alterar estilos e muito mais.

Para uma visão mais detalhada, confira este vídeo também:

4. Publique seu modelo

Quando estiver satisfeito com o design da página da sua loja, tudo o que você precisa fazer é clicar no botão Publicar .

Ao abrir a página da loja da sua loja no front-end, você deve ver o modelo de página da sua loja personalizada.

Método 3 – Personalização da página da loja com o plug-in Elementor

Se você preferir usar o Elementor em vez do editor de blocos, também pode seguir uma abordagem semelhante para personalizar a página da loja WooCommerce.

Normalmente, você precisaria do Elementor Pro para personalizar a página da loja da sua loja. No entanto, com o Botiga Pro, você pode personalizar totalmente a página da sua loja usando a versão gratuita do Elementor.

Você pode conseguir isso porque o Botiga Pro adiciona seus próprios widgets Elementor personalizados para permitir que você configure sua página de loja.

Com isso dito, o Botiga Pro ainda é totalmente compatível com o Elementor Pro. Portanto, se você já possui uma licença Elementor Pro, ainda pode se beneficiar de todas as funcionalidades extras de design que ela adiciona.

Veja como editar a página da loja WooCommerce com Elementor e Botiga.

1. Ative o módulo Botiga Pro Template Builder

Para habilitar o construtor de modelo, vá para Aparência → Painel de Tema → Recursos de Tema .

Em seguida, role para baixo e habilite o módulo Templates Builder .

Você precisará do Botiga Pro para ativar este módulo — caso ainda não o possua, você pode adquiri-lo clicando aqui.

2. Crie um novo layout de página de loja e inicie o Elementor

Em seguida, vá para Aparência → Modelos do Botiga → Adicionar modelo para criar um novo modelo de página de loja.

Na interface do modelo:

1. Dê a ele um nome interno — por exemplo, “Página da loja”.
2. Escolha Catálogo da loja como o tipo de modelo.
3. Clique no botão Salvar rascunho para salvá-lo no banco de dados (isso é útil para usar o Elementor).

Depois de fazer isso, você pode clicar no botão Editar com Elementor para iniciar a interface do Elementor.

3. Use os widgets do Botiga para criar o design da página da sua loja

Agora, você pode usar a interface regular do Elementor para criar a página da sua loja.

Para ajudá-lo a configurar o design com a versão gratuita do Elementor, o Botiga adiciona vários widgets próprios na seção Botiga WooCommerce .

Para a página da loja, o widget mais importante é o widget Product Query , que permite exibir uma lista de alguns/todos os seus produtos.

Há também outros widgets úteis, como Archive Title , Archive Description e outros widgets com rótulos de Archive.

Nas configurações do widget Product Query , você pode escolher quais produtos exibir, personalizar o layout, alterar o cartão do produto e muito mais.

Você também pode aproveitar todo o estilo normal e as opções avançadas que o Elementor oferece.

Além de usar os widgets Botiga WooCommerce para criar sua página de loja, você também pode usar qualquer outro widget Elementor, incluindo widgets de complementos Elementor de terceiros.

4. Publique a página da sua loja

Quando estiver satisfeito com o design da página da sua loja, clique no botão Publicar no Elementor para torná-la ativa.

Depois de publicá-lo, você pode abrir a página da sua loja no front-end e deverá ver o design personalizado que criou com o Elementor.

Conclusão: Crie uma página de loja WooCommerce personalizada hoje

Isso encerra nosso guia sobre como personalizar a página da loja WooCommerce sem precisar de nenhum código.

Para a maioria das pessoas, as opções integradas do Botiga no Customizer já oferecem flexibilidade suficiente para criar uma página de loja WooCommerce personalizada.

Se você deseja ainda mais controle, o recurso Template Builder no Botiga Pro permite personalizar totalmente todas as partes da página da sua loja usando o editor de blocos nativo do WordPress ou Elementor (mesmo a versão gratuita).

Se você ainda não estiver usando o Botiga, considere mudar para o Botiga hoje para poder acessar todas essas opções de personalização e muito mais!

Você ainda tem alguma dúvida sobre como personalizar a página da loja WooCommerce? Deixe-nos saber nos comentários.