Como Criar uma Galeria de Imagens de Produtos WooCommerce (Passo a Passo)

Comprar online significa que os clientes não podem tocar, segurar ou examinar seus produtos pessoalmente.

É exatamente por isso que suas imagens de produtos WooCommerce precisam trabalhar mais para contar a história completa do que você está vendendo.

Uma galeria de imagens de produtos bem projetada faz mais do que exibir seus itens — ela responde a perguntas, gera confiança e ajuda os clientes a visualizarem a posse de seus produtos.

Através do nosso trabalho com inúmeras lojas WooCommerce, vimos como a configuração correta da galeria pode transformar visitantes casuais em clientes satisfeitos.

A melhor parte? Você não precisa de ferramentas caras ou conhecimento técnico para criar galerias.

Mostraremos exatamente como configurar galerias de imagens de produtos que farão sua loja WooCommerce parecer profissional e ajudarão seus produtos a se venderem sozinhos.

Como criar uma galeria de imagens de produtos WooCommerce

Por que você deve criar galerias de produtos WooCommerce?

WooCommerce é o plugin de E-commerce WordPress mais popular do mercado. Ele permite que você venda produtos criando uma loja online.

A maioria dos temas WordPress para WooCommerce vêm com modelos padrão para páginas de loja e categorias de loja. Essas páginas simplesmente listam seus produtos usando o estilo do tema.

E se você quisesse criar uma galeria de produtos e exibi-la dentro de um post de blog ou outra página em seu site? Ao exibir seus produtos em seus posts de blog e páginas populares, você pode aumentar suas vendas e conversões.

Vamos dar uma olhada em como criar facilmente galerias de imagens de produtos WooCommerce. Compartilharemos dois métodos diferentes, e você pode usar os links rápidos abaixo para pular para a opção que melhor lhe convier:

Método 1: Criando Galerias de Produtos WooCommerce com SeedProd (Recomendado)

A melhor maneira de criar uma galeria de imagens de produtos WooCommerce é usando o SeedProd. É o melhor construtor de páginas WordPress com arrastar e soltar do mercado.

Usamos o SeedProd para criar vários designs de páginas em nossos sites de demonstração, e os resultados foram impressionantes — os layouts pareciam profissionais e carregavam rapidamente.

O SeedProd permite que você crie temas WordPress personalizados e landing pages facilmente, sem a necessidade de codificação. Além disso, ele vem com blocos WooCommerce integrados e integração que facilitam a adição de galerias de imagens de produtos a qualquer página ou postagem no WordPress.

Se você quiser ver mais detalhes, temos uma análise aprofundada do SeedProd que cobre todos os seus recursos e benefícios.

Para começar, você precisa instalar e ativar o plugin SeedProd. Se precisar de ajuda, você pode seguir este guia sobre como instalar um plugin WordPress.

Observação: Existe uma versão gratuita do SeedProd que você pode experimentar, mas você precisa do plano Elite do SeedProd para acessar os blocos do WooCommerce.

Assim que o plugin for ativado, vá para SeedProd » Configurações no seu painel do WordPress e insira sua chave de licença.

Inserindo a chave de licença do SeedProd

Você pode encontrar sua chave de licença em sua conta no site do SeedProd. Após inserir sua chave de licença, clique no botão ‘Verificar chave’ para continuar.

Escolhendo um Kit de Modelo WooCommerce

Em seguida, você precisa escolher um kit de modelo WooCommerce para usar em sua loja online. Isso substituirá seu tema WordPress existente por um novo design personalizado.

Simplesmente vá para SeedProd » Theme Builder e clique no botão ‘Kits de Modelo de Tema’.

Instalando um kit de template WooCommerce usando SeedProd

Isso o levará à biblioteca de kits do site do SeedProd.

A partir daqui, você pode clicar na aba ‘WooCommerce’ para ver todos os kits de modelos criados especificamente para lojas online.

Escolha um kit de tema WooCommerce

Você pode passar o mouse sobre qualquer kit de modelo e clicar na lupa para visualizar o design. Quando encontrar um kit de modelo que goste, basta clicar na marca de seleção para usá-lo.

Para este tutorial, usaremos o Tema Inicial WooCommerce, mas você pode usar qualquer kit de modelo que desejar.

Depois de selecionar um kit de modelo, o SeedProd o importará, e você poderá ver uma lista de todas as partes do modelo no painel do tema.

O SeedProd importará todas as partes do modelo do tema

Você pode personalizar cada parte do modelo, incluindo páginas de produtos, página da loja, página de checkout e muito mais, com o construtor de arrastar e soltar fácil do SeedProd. É assim que adicionaremos uma galeria de imagens de produtos WooCommerce.

Primeiro, encontre a parte do modelo que você deseja personalizar. Para este tutorial, escolheremos a parte ‘Post Único’. Este é o modelo que determina a aparência de todos os seus posts individuais de blog.

Simplesmente passe o mouse sobre ele e clique no link ‘Editar Design’.

Clique no link Editar design para personalizar

Isso abrirá o construtor visual de páginas do SeedProd.

A partir daqui, você pode arrastar e soltar blocos prontos em sua página, clicar em qualquer elemento para personalizá-lo e ver uma prévia de como seu design fica em tempo real.

Construtor visual do SeedProd

Vá em frente e faça as personalizações que desejar e adicionaremos a galeria de imagens de produtos na próxima etapa.

Adicionando um Slider de Galeria de Imagens de Produtos WooCommerce no WordPress

Agora que você tem um design de tema WooCommerce personalizado, está pronto para adicionar uma bela galeria de imagens de produtos.

Para fazer isso, clique no bloco de tag de modelo do WooCommerce ‘Imagens da Galeria de Produtos’ no painel esquerdo e arraste-o para qualquer lugar na área de visualização da sua página.

Isso puxará suas informações e imagens de produtos diretamente do WooCommerce.

Arraste o bloco Galeria de Imagens de Produto para sua página

Em seguida, você pode clicar no bloco para personalizar as configurações da galeria de imagens do seu produto.

Primeiro, você verá a opção de zoom da imagem. Isso permite que os visitantes passem o mouse sobre uma imagem para obter uma visão ampliada de um produto.

Configure o zoom da galeria de imagens do produto

Você pode arrastar os controles deslizantes horizontais para controlar a posição do botão de zoom. Você também pode alterar o tamanho da fonte, a cor do ícone, o raio da borda e a cor de fundo.

Se você rolar para baixo, também poderá personalizar as bordas da imagem e das miniaturas. Você pode definir o raio da borda, o estilo, a cor e a largura.

Defina a borda da imagem para sua galeria de produtos

Há também uma aba ‘Avançado’ na qual você pode clicar para ver mais opções de personalização.

Isso inclui espaçamento, ID e classe CSS, visibilidade do dispositivo, efeitos de animação e muito mais.

Configurações avançadas para a galeria de imagens de produtos SeedProd

Quando terminar de personalizar sua galeria de imagens de produtos, não se esqueça de clicar no botão ‘Salvar’.

Publicando Sua Galeria de Imagens de Produtos do WooCommerce

Finalmente, você precisa tornar sua galeria de imagens de produtos ativa em seu site. Para fazer isso, saia do construtor visual e volte para o painel ‘Theme Builder’.

Em seguida, simplesmente alterne o interruptor ‘Ativar Tema SeedProd’ para a posição ‘Sim’.

Habilitar tema SeedProd

É isso!

Você pode visitar seu site e ver sua galeria de imagens de produtos do WooCommerce ativa em ação.

Exemplo de galeria de imagens de produto do SeedProd para WooCommerce

Agora, seus visitantes podem navegar pelas imagens dos produtos em sua galeria como uma apresentação de slides e dar zoom nos detalhes do produto.

Método 2: Criando Galerias de Produtos WooCommerce com Envira Gallery

Envira Gallery é o melhor plugin de galeria de fotos para WordPress e facilita a exibição de produtos em qualquer lugar do seu site.

Testamos extensivamente em nosso site e vimos resultados impressionantes. É uma maneira rápida de criar uma galeria de produtos WooCommerce no WordPress.

Para mais detalhes, você pode conferir nossa análise completa da Envira Gallery para explorar todos os seus recursos e funcionalidades.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Envira Gallery. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, você precisa ir para a página Envira Gallery » Settings para inserir sua chave de licença. Você pode encontrar essas informações em sua conta no site da Envira Gallery.

Insira a chave de licença do Envira

Assim que a chave de licença for verificada, você pode ir para Envira Gallery » Addons para instalar e ativar o addon ‘Featured Content’.

Este addon permitirá que você exiba seus produtos WooCommerce nas galerias Envira. Vá em frente e clique no botão ‘Install’ sob o Featured Content Addon.

Instalar o addon de conteúdo em destaque

Em seguida, você precisa ir para a página Envira Gallery » Add New para criar sua nova galeria de produtos.

A partir daqui, você pode começar adicionando um título para a nova galeria.

Adicione um título para sua galeria de produtos

Após o título, você precisa mudar para a aba ‘External Gallery’ e clicar na opção ‘Featured Content’.

Em seguida, role para baixo até a aba ‘Images’. No campo ‘Select Your Post Type(s)’, você precisa selecionar a opção ‘Product’, que é o tipo de post personalizado para produtos WooCommerce.

Selecione produto como tipo de postagem

Se você tiver centenas de produtos, talvez queira criar várias galerias.

Você pode refinar as listagens da galeria selecionando termos de taxonomia para tags ou categorias de produtos específicas.

Selecionar categorias de produtos

Simplesmente repita este processo com diferentes tags e categorias de produtos cada vez que criar uma nova galeria de produtos. O tipo de post será sempre ‘Product’ em todas as suas galerias de produtos WooCommerce.

Você também pode escolher uma relação de termo de taxonomia para selecionar e exibir produtos específicos em suas galerias.

Escolha uma relação de termos de taxonomia

Para mais detalhes, confira nosso guia sobre como criar uma galeria de imagens no WordPress.

Assim que terminar, você pode publicar sua galeria de produtos, o que a tornará disponível para ser adicionada em qualquer lugar do seu site WordPress.

Publique sua galeria de produtos

Em seguida, você pode adicionar uma nova postagem ou página ou editar uma existente para exibir sua galeria de produtos WooCommerce.

Uma vez no editor de conteúdo, basta clicar no botão '+' e adicionar o bloco Envira Gallery.

Adicionar bloco de galeria Envira

Depois disso, você pode selecionar sua galeria de imagens de produtos no bloco Envira Gallery.

Simplesmente clique no menu suspenso e escolha a galeria que você criou anteriormente.

Selecione sua galeria de produtos no menu suspenso

Agora você verá uma prévia da sua galeria no editor de blocos. Se não carregar, não se preocupe. Você pode simplesmente pré-visualizar sua postagem ou página para ver se está funcionando corretamente.

Em seguida, você pode salvar e publicar sua postagem. Depois disso, visite seu site para ver a galeria de produtos em ação.

Visualização da galeria de imagens do produto

Perguntas Frequentes

Aqui estão algumas perguntas frequentes sobre a criação de galerias de produtos no WooCommerce.

Posso adicionar vídeos à minha galeria de imagens de produtos WooCommerce?

Sim, você pode melhorar sua galeria de imagens de produtos WooCommerce incluindo vídeos. Vídeos oferecem uma maneira dinâmica de exibir seus produtos, proporcionando uma visão detalhada aos potenciais clientes.

Para começar, veja nosso tutorial sobre como adicionar vídeos de produtos às suas galerias WooCommerce.

Como posso otimizar as imagens da galeria para tempos de carregamento mais rápidos?

Otimizar as imagens da sua galeria é importante para melhorar os tempos de carregamento da página e aumentar a experiência do usuário.

Recomendamos começar comprimindo imagens com ferramentas como o EWWW Image Optimizer, que pode reduzir significativamente o tamanho do arquivo sem sacrificar a qualidade.

Além disso, considere usar uma rede de distribuição de conteúdo (CDN) para distribuir imagens rapidamente aos usuários, independentemente de onde eles estejam localizados.

Por fim, use o carregamento preguiçoso (lazy loading) para garantir que as imagens sejam carregadas apenas à medida que os usuários rolam a página.

Para mais informações, você pode consultar nosso guia para iniciantes sobre otimização de imagens para desempenho na web sem perder qualidade.

Esperamos que este artigo tenha ajudado você a aprender como criar uma galeria de imagens de produtos no WooCommerce. Você também pode querer ver nosso guia sobre como fazer upsell de produtos no WooCommerce e nossa seleção especializada dos melhores plugins do WooCommerce para sua loja.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

1 CommentLeave a Reply

  1. Estou muito animado com este artigo! Você descreveu muito bem como criar galerias de imagens facilmente no WooCommerce, o que é perfeito para alguém como eu que ainda está aprendendo a gerenciar uma loja online. Felizmente, não estou sozinho nesta jornada :). Usar o Optin Monster para um CTA no final do artigo é uma ideia brilhante, especialmente porque usamos o Optin Monster (assim como o Seed Prod para landing pages) não apenas no WooCommerce, mas também em nosso blog e site da empresa. Isso expandiu meu conhecimento sobre e-commerce na plataforma Woo mais uma vez.

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.