Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

Como criar uma impressionante galeria de imagens de produtos no WooCommerce

Como criar uma impressionante galeria de imagens de produtos no WooCommerce 

Escrito por: imagem do autor Stacey Corrin
imagem do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: Turner John
imagem do revisor Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Procurando uma maneira fácil de criar uma galeria de imagens de produtos para seu site WooCommerce?

As galerias de imagens de produtos podem impulsionar as vendas e melhorar a experiência do cliente em sua loja on-line. Felizmente, adicioná-las ao seu site WooCommerce é relativamente fácil e requer apenas algumas etapas simples.

Neste artigo, vamos orientá-lo na configuração de uma galeria de imagens de produtos do WooCommerce, desde o upload das imagens dos produtos até a personalização da exibição da galeria, passo a passo.

Por que criar uma galeria de imagens de produtos do WooCommerce?

A criação de galerias de imagens de produtos no WooCommerce pode ajudar a mostrar seus produtos da melhor maneira possível. Isso dá aos clientes em potencial uma ideia melhor do que eles estão comprando e os ajuda a tomar decisões de compra informadas.

Além disso, uma galeria de imagens visualmente atraente pode aprimorar a experiência geral do usuário de sua loja on-line, tornando-a mais envolvente e mais fácil de navegar. Isso pode levar a uma maior satisfação do cliente e ao aumento das vendas.

Ao fornecer aos clientes imagens claras e detalhadas de seus produtos, você pode criar confiança e credibilidade com sua marca, o que leva a taxas de conversão mais altas e mais vendas. Melhor ainda, elas podem diferenciar sua loja on-line dos concorrentes, dando-lhe uma vantagem em um mercado lotado.

Por que usar o SeedProd para criar uma galeria de imagens de produtos?

Ao considerar maneiras de criar uma galeria de produtos para o seu site WordPress, você pode imediatamente procurar um plugin de galeria de produtos do WooCommerce. Afinal de contas, eles facilitam a personalização dos recursos padrão do WooCommerce.

No entanto, nem todos os plugins de controle deslizante de galeria de imagens têm os principais recursos de que você precisa para uma loja on-line. Como resultado, é possível que você instale mais plug-ins do WordPress do que o pretendido, o que pode adicionar inchaço desnecessário ao seu site.

É por isso que nossa opção favorita para adicionar uma galeria de imagens de produtos ao WooCommerce é o SeedProd.

Construtor de sites WordPress SeedProd

É o melhor construtor de sites e páginas de destino para WordPress, permitindo que você personalize facilmente cada parte do seu site WooCommerce sem código.

Seja para criar um site inteiro de WooCommerce do zero ou personalizar páginas de produtos individuais, você pode fazer tudo isso com o construtor de arrastar e soltar do SeedProd.

Aqui está uma amostra de algumas das opções de personalização do WooCommerce do SeedProd:

  • Kits de sites: Modelos de temas pré-fabricados do WooCommerce que você pode instalar com um único clique.
  • Construtor de arrastar e soltar: Crie páginas personalizadas para sua loja, incluindo checkout, carrinho de compras, página da loja e muito mais, sem código.
  • Tags do modelo WooCommerce: Galeria de produtos, imagem em destaque do produto, guias de dados do produto, meta do produto, conteúdo do produto e muito mais.
  • Blocos do WooCommerce: Botão Adicionar ao carrinho, ícone do carrinho de compras no menu, grade de produtos, produtos com melhor classificação, produtos recentes, produtos em destaque e muito mais.
  • Modos de página: Crie uma página do WooCommerce para breve ou coloque sua loja de comércio eletrônico em modo de manutenção.
Blocos do SeedProd WooCommerce

Além disso, você pode usar qualquer um dos outros blocos e recursos do SeedProd, como o controle deslizante de carrossel, formulários de adesão, cronômetros de contagem regressiva, avaliações, depoimentos e muito mais.

Devido à facilidade de uso e às infinitas opções de personalização, faz sentido gerenciar o design e o layout de sua loja on-line com o SeedProd.

Criação de uma galeria de imagens de produtos do WooCommerce com o SeedProd

Antes de nos aprofundarmos neste guia passo a passo, primeiro é preciso garantir que você tenha o WooCommerce instalado no seu site WordPress. Se ainda estiver configurando sua loja, siga este guia sobre como criar uma loja on-line primeiro.

Depois de fazer isso, siga estas etapas para adicionar uma galeria de imagens impressionante ao WooCommerce.

Etapa 1. Instalar e ativar o SeedProd

Primeiro, você precisará fazer o download do SeedProd Elite, instalá-lo e ativá-lo em seu site WordPress. O plano Elite lhe dá acesso a todos os melhores recursos e funcionalidades do WooCommerce.

Se precisar de ajuda com a instalação, consulte nossa documentação sobre a instalação do SeedProd. Ela o orienta no carregamento e na ativação do plug-in e na ativação da chave de licença do SeedProd.

Etapa 2. Escolha um modelo de tema de WooCommerce

Quando o plug-in estiver ativo em seu site, navegue até SeedProd " Theme Builder no painel do WordPress. Em seguida, clique no botão Theme Template Kits.

Kits de modelos do tema SeedProd

Na tela seguinte, você verá uma biblioteca de modelos que pode instalar com um clique. Cada modelo vem com todas as páginas que você vê na demonstração. Por exemplo, se você visualizar um modelo com uma página "Sobre nós" ou "Depoimentos", o SeedProd criará automaticamente essas páginas para você.

Para ver apenas os modelos compatíveis com o WooCommerce, clique na guia WooCommerce. A partir daí, navegue pelos designs até encontrar um que corresponda às suas necessidades, passe o mouse sobre ele e clique no ícone de marca de seleção.

Escolha um kit de modelo do WooCommerce

Agora, o SeedProd importará esse modelo e, em alguns segundos, você verá todas as partes do modelo em uma lista no painel do tema:

Peças de modelo do WooCommerce SeedProd

O construtor de páginas de arrastar e soltar do SeedProd permite que você personalize facilmente cada parte do modelo, inclusive as páginas de checkout, carrinho, loja e produto individual. É assim que adicionaremos um controle deslizante de galeria de produtos responsivo.

Mas, primeiro, você precisará adicionar imagens de galeria aos seus produtos do WooCommerce, o que mostraremos como fazer a seguir.

Adicionar fotos extras aos seus produtos é uma maneira fantástica de fornecer mais informações aos clientes em potencial. Por exemplo, você pode usar uma galeria para carregar imagens de variações adicionais se um produto tiver diferentes opções de cores ou variações de produtos.

Para adicionar mais fotos de produtos, navegue até Products " All Products (Produtos " Todos os produtos ) em seu administrador do WordPress. Em seguida, localize o produto ao qual você deseja adicionar uma galeria de produtos e clique em Edit (Editar).

Editar um produto do WooCommerce

Dentro do editor de produtos, você verá um painel chamado "Product Gallery" (Galeria de produtos) no lado direito. Nesse painel, clique no link "Add product gallery images" (Adicionar imagens da galeria de produtos) para adicionar as miniaturas da galeria.

Adicionar imagens da galeria de produtos

Clicar nesse link abrirá a biblioteca de mídia do WordPress, onde você poderá fazer upload de imagens do seu computador ou diretamente da biblioteca.

Adicionar imagens à galeria de produtos

Mantenha a tecla Shift pressionada no teclado para selecionar várias imagens e, em seguida, clique no botão Add to Gallery.

O WooCommerce agora adicionará novas imagens ao seu editor de produtos. Você deverá ver sua imagem principal e, em seguida, a galeria de imagens em miniatura extras abaixo.

Galeria de produtos do WooCommerce

Certifique-se de clicar no botão Update (Atualizar ) para salvar suas alterações.

Etapa 4. Personalize seu modelo de página de produto do WooCommerce

Agora que você adicionou imagens de galeria à sua loja WooCommerce, pode personalizar as páginas de produtos com o SeedProd.

Portanto, vá mais uma vez ao Theme Builder do SeedProd e procure o modelo "Product Page" (Página do produto). Esse modelo determina a aparência de todas as suas páginas de produtos individuais.

Para personalizá-lo, basta passar o mouse sobre ele e clicar no link Edit Design.

Editar uma única página de produto com o SeedProd

Na próxima tela, você verá o construtor de páginas visuais do SeedProd. É aqui que você pode arrastar e soltar novos elementos de design em sua página e personalizar o design geral.

Criador de páginas de produtos SeedProd

Como você pode ver, esse modelo usa a Product Featured Image como a imagem padrão do produto. Essa é uma das tags de modelo do WooCommerce do SeedProd, que extrai as informações do produto diretamente do WooCommerce.

Bloco de imagens em destaque do produto SeedProd

Vamos substituir esse bloco pelo bloco Product Gallery do SeedProd.

Para fazer isso, passe o mouse sobre a imagem em destaque do produto até ver uma borda laranja e, em seguida, clique no ícone da lixeira.

Excluir o bloco de imagens em destaque do produto

Em seguida, clique no bloco Product Gallery Images no painel esquerdo e arraste-o para a visualização da página para incorporar o layout da galeria.

Adicionar bloco de imagem da galeria de produtos no SeedProd

Ao clicar no bloco da galeria, você verá várias configurações que podem ser personalizadas.

A primeira é a opção de zoom de imagem, que aumenta o tamanho de uma imagem sempre que você passa o mouse sobre ela.

Personalizações de zoom da galeria de imagens do produto

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

Em seguida, há personalizações para a borda da imagem principal. Por exemplo, você pode adicionar uma borda sólida, pontilhada ou tracejada e alterar o raio, a cor e a largura da borda.

configurações de borda da galeria de imagens de produtos

Personalizações semelhantes estão disponíveis para as miniaturas da galeria.

Ao mudar para a guia Advanced, você verá outras opções de estilo, incluindo:

  • Raio, cor, largura e estilo da borda
  • Espaçamento para as margens e o preenchimento do bloco
  • Opções de classe CSS
  • Alternância de visibilidade do dispositivo para celular e desktop
  • Efeitos de animação
configurações avançadas da galeria de imagens de produtos

Continue customizing your product page until you’re happy with the design. For instance, you may want to add the related products block to cross-sell other products.

Ou, você pode incorporar um botão Tweet para incentivar os usuários a compartilhar seu produto nas mídias sociais.

Botão Tweet em uma única página de produto do WooCommerce

Não se esqueça de clicar no botão Salvar quando estiver satisfeito com seu design.

Etapa 5. Publique as alterações em sua loja WooCommerce

A etapa final é fazer as alterações no site do WooCommerce. Para fazer isso, você precisará sair do construtor de páginas e voltar para a tela do Theme Builder.

A partir daí, localize o botão de alternância "Enable SeedProd Theme" (Ativar tema do SeedProd) e coloque-o na posição Yes (Sim).

ativar o tema seedprod

Agora você pode visitar a página do produto para ver a nova galeria de imagens do produto.

Como você pode ver, é possível clicar em cada imagem e ampliar vários detalhes. Além disso, se você clicar no botão de zoom, a imagem será aberta em um pop-up de lightbox em tela cheia.

Exemplo de galeria de imagens de produtos do WooCommerce com SeedProd

A partir daí, você pode clicar em cada imagem em um formato de apresentação de slides.

Bônus: Adicionar vídeos de produtos ao WooCommerce

Os vídeos de produtos são outra ótima maneira de aumentar o envolvimento em sua loja on-line. De acordo com a pesquisa, 88% das pessoas compraram um produto ou serviço depois de assistir a um vídeo.

Há várias maneiras de adicionar vídeos ao seu site WordPress a partir de plataformas como YouTube, Vimeo e outras. Mas nossa solução favorita é o plug-in YouTube Feed do Smash Balloon.

Esse plug-in tem uma versão gratuita e uma versão profissional, permitindo que você incorpore galerias incríveis do YouTube em qualquer lugar do seu site. Ele tem vários layouts de galeria e opções de reprodução automática, e você pode incorporar seus feeds de vídeo com um bloco ou shortcode do WordPress.

Exemplo de galeria de vídeos do YouTube

Dessa forma, você pode exibir conteúdo gerado pelo usuário, como análises de produtos, vídeos de desembalagem, tutoriais e muito mais.

Siga este guia sobre como criar uma galeria de vídeos no WordPress para conhecer todas as etapas.

Aí está!

More Ways to Customize WooCommerce

Creating a product image gallery is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:

We hope this guide has helped you learn to create a stunning product image gallery in 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.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.