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.
É 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.
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
- Etapa 2. Escolha um modelo de tema de WooCommerce
- Etapa 3. Adicionar a galeria de imagens de produtos do WooCommerce
- Etapa 4. Personalize seu modelo de página de produto do WooCommerce
- Etapa 5. Publique as alterações em sua loja WooCommerce
- Bônus: Adicionar vídeos de produtos ao WooCommerce
- More Ways to Customize 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.
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.
Agora, o SeedProd importará esse modelo e, em alguns segundos, você verá todas as partes do modelo em uma lista no painel do tema:
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.
Etapa 3. Adicionar a galeria de imagens de produtos do WooCommerce
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).
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.
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.
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.
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.
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.
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.
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.
Adição do bloco Product Image Gallery
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.
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.
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.
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
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.
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).
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.
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.
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:
- How to Customize the WooCommerce Additional Information Tab
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como adicionar classificação por estrelas às páginas de produtos do WooCommerce
- How to Display Related Products in WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- Como obter e exibir descrições de produtos no WooCommerce
- How to Display Featured Products in WooCommerce
- Como corrigir o problema de não funcionamento do WooCommerce View Cart
- How to Hide Out of Stock Products in WooCommerce
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.