Como personalizar a galeria de produtos WooCommerce
Publicados: 2022-01-25Personalizar uma galeria de produtos em sua loja online pode ser uma ótima maneira de melhorar a experiência do visitante, a visibilidade do produto e as taxas de conversão. Para ajudá-lo a fazer isso, trouxemos nosso guia sobre como personalizar a galeria de produtos no WooCommerce .
Mas antes de irmos para o processo de fazer isso, vamos dar uma olhada em por que você precisa personalizar a galeria de produtos no WooCommerce em breve.
Por que personalizar a galeria de produtos no WooCommerce?
Um dos principais pontos de venda de um negócio online são as imagens dos produtos. E se você adicionar e personalizar a galeria de produtos, melhorará a aparência da sua loja online . Quando você atualiza a aparência visual, atrai mais compradores em potencial .
Da mesma forma, um cliente pode querer avaliar um produto de vários ângulos também. Eles podem querer ter uma perspectiva mais clara antes de comprá-los, na qual uma galeria de produtos pode ser útil. Portanto, personalizar a galeria de produtos também pode ajudar a manter uma melhor experiência do cliente.
Portanto, se você deseja aumentar sua receita, recomendamos que personalize sua galeria de produtos WooCommerce. Agora que você tem uma ideia sobre sua importância, vamos ver como podemos personalizá-los para o seu site WooCommerce.
Como personalizar a galeria de produtos WooCommerce?
Você pode personalizar a galeria de produtos no WooCommerce usando 2 métodos :
- Do painel WooCommerce
- Usando um plug-in
Passaremos por cada etapa detalhadamente em ambos os métodos abaixo para que você possa escolher sua maneira preferida. Antes disso, certifique-se de configurar o WooCommerce corretamente e instalar um dos temas compatíveis com WooCommerce.
1. Personalize a Galeria de Produtos do Painel WooCommerce
WooCommerce é a plataforma mais popular para criar uma loja online. Parte da razão pela qual o WooCommerce é tão popular é por causa da personalização infinita , controle sobre o design e gerenciamento de sua loja virtual.
Você pode personalizar facilmente a galeria de produtos do próprio painel do WooCommerce. Mas primeiro, você precisa abrir a página de edição do produto onde deseja personalizar a galeria de produtos.
Então, vá para Produtos > Todos os produtos no seu painel de administração do WordPress. Você poderá ver a lista de todos os produtos em seu site. Aqui, você pode adicionar novos produtos ou remover um existente, importar ou exportar os produtos, além de personalizar individualmente um ou vários produtos de uma só vez.
Em seguida, clique em Editar para o produto em que deseja personalizar a galeria de produtos.
Você será redirecionado para a página de edição do produto específico. Agora, você pode começar a personalizar a galeria de produtos WooComemrce. A galeria de produtos pode ser adicionada, reordenada ou removida deste editor aqui.
1.1. Adicionar uma galeria de produtos no WooCommerce
Depois de abrir a página de edição do produto, se você rolar mais, poderá ver a seção Galeria de produtos na barra lateral direita. Clique no link Adicionar imagens da galeria de produtos para adicionar uma galeria de produtos.
Ao clicar nele, você será redirecionado para um modal onde poderá fazer upload de novas imagens ou selecionar as existentes da biblioteca de mídia.
Você pode selecionar um ou vários produtos para adicionar à galeria de produtos. Basta selecionar as imagens que deseja adicionar à galeria e clicar em Adicionar à Galeria .
Depois de terminar de adicionar a galeria de produtos, vá em frente e atualize a página do produto.
Ao atualizar a página do produto, você poderá ver sua nova galeria de produtos.
1.2. Reordenar produtos na galeria
Em alguns casos, você pode querer alterar a ordem dos produtos. Para fazer isso, abra a página de edição do produto do seu painel do WordPress mais uma vez. Em seguida, basta arrastar e soltar os produtos nas posições em que deseja que o produto seja exibido.
Por fim, clique no botão Atualizar depois de reordenar os produtos.
1.3. Remover produtos da galeria
Você também pode remover os produtos da galeria com apenas um clique do mouse. Basta navegar para as miniaturas de imagem na página de edição do produto do seu painel mais uma vez.
Assim que você navegar até a miniatura, verá um ícone de cruz acima da miniatura. Clique no ícone excluir imagem para remover qualquer produto da galeria de produtos.
No entanto, se você deseja remover toda a galeria de produtos, terá que remover todos os produtos da galeria um por um.
É isso! Essas são todas as personalizações básicas que você pode implementar para o seu site usando o painel padrão do WooCommerce.
2. Personalize a Galeria de Produtos WooCommerce usando o plug-in
Agora sabemos que é muito fácil adicionar, remover e reordenar os produtos na galeria de produtos. Mas essas são apenas algumas personalizações básicas oferecidas pelo WooCommerce. Eles têm opções de personalização muito limitadas e podem nem sempre ser suficientes para o seu site.
No entanto, se você quiser personalizações adicionais para a galeria de produtos, podemos usar alguns plugins de filtro de produtos incríveis.
Aqui listamos alguns plugins para personalizar a galeria de produtos no WooCommerce. Cada um deles tem uma característica e funcionalidade únicas.
Controle deslizante de galeria de produtos para WooCommerce
O Product Gallery Slider for WooCommerce é o melhor plugin freemium. Como o nome diz, este plugin permite adicionar um carrossel na seção da galeria WooCommerce. Oferece mais de 10 opções de personalização e este plugin funciona com a maioria dos temas do WordPress.
Além disso, este plug-in suporta o construtor de páginas Elementor e Visual Composer, que oferece controle total sobre o design do seu site WooCommerce. Você também pode obter um módulo lightbox que permite adicionar efeitos de slides, ampliar imagens e exibir miniaturas para atrair clientes.
Características principais
- 3 layouts de galeria diferentes estão disponíveis
- Suporta vídeo na galeria de produtos
- Suporta linguagem RTL
- Código de acesso pronto
Preço
O Product Gallery Slider for WooCommerce é um plugin freemium que custa 39 USD por ano.
Galeria de vídeos de produtos WooCommerce
Com a ajuda da Galeria de vídeos de produtos WooCommerce , você pode incorporar vídeos na galeria de produtos junto com imagens. Ele suporta vídeos do Youtube e Vimeo, bem como vídeos com os formatos MP4, WebM e Ogg. Possui uma ótima interface amigável para incorporar o vídeo no site WooCommerce.
Mas o problema é que você pode usar apenas um vídeo por galeria de produtos. Além disso, você também pode permitir que o vídeo seja reproduzido em um modo de repetição que cria um loop de vídeo.
Características principais
- Layout de controle deslizante vertical e horizontal
- Adapte a altura com base nas imagens
- Código de acesso pronto
- Compatível com o construtor Elementor e Divi
Preço
A Galeria de Vídeos do Produto WooCommerce é uma ferramenta freemium. Possui uma versão gratuita com recursos básicos e 3 planos premium que começam em 25 USD por ano.
Agora que listamos algumas opções, vamos instalar uma delas para personalizar a galeria de produtos no WooCommerce.
Para esta demonstração, usaremos o Product Gallery Slider para WooCommerce desenvolvido pela Codeixer. Este é um plugin freemium que garante a exibição de seus produtos em um belo estilo.
2.1. Instale o plug-in
Para instalar o plug-in, acesse o WP Admin Dashboard e navegue até Plugins > Adicionar novo.
Procure as palavras-chave do plug-in Product Slider for WooCommerce Em seguida, clique no botão Instalar agora para instalar o plugin. Por fim, ative -o após a conclusão da instalação.
Se você quiser usar um plugin premium, terá que fazer o upload do arquivo zip e instalá-lo em seu site. Você pode encontrar mais informações sobre isso em nosso guia para instalar um plugin do WordPress manualmente.
2.2. Personalize a Galeria de Produtos
Depois que o plug-in for ativado, você poderá começar a usá-lo para personalizar a galeria de produtos. Basta acessar Codeixer > Opções da Galeria no painel do WordPress.
Você poderá ver duas configurações aqui, Opções gerais e Opções da caixa de luz .
Embora todas as opções não estejam disponíveis na versão gratuita do plug-in, ele fornece o suficiente para personalizar tudo de acordo com suas necessidades.
2.2.1. Opções gerais
As opções Gerais incluem todas as personalizações básicas que você pode realizar na galeria de produtos.
Adicionar um controle deslizante de carrossel
Nas Opções Gerais, você poderá ver a Reprodução Automática do Slider . Selecione Sim no menu suspenso para adicionar automaticamente um controle deslizante de carrossel sem ajustes adicionais.
Zoom da foto do produto
Ter um recurso de zoom em seu produto permite que seu cliente tenha uma visão detalhada de seus produtos e também oferece uma melhor apresentação visual .
Para habilitar o recurso de zoom para seus produtos na galeria de produtos, basta selecionar Sim no menu suspenso na opção Zoom da imagem.
Setas e botão do controle deslizante
Você também pode personalizar as setas e o botão do controle deslizante alterando a cor para corresponder ao seu site WooCommerce.
Para fazer isso, você encontrará a cor do ícone na opção Geral. Escolha qualquer cor de sua escolha no seletor de cores.
Depois de selecionar uma cor, certifique-se de salvar as alterações .
Além destes, você também pode definir o seguinte nas configurações gerais:
- Ativar/Desativar o ícone de navegação
- Número de Miniaturas a serem exibidas
- Deslize o produto infinitamente
- Mova a imagem ao arrastar o mouse
2.2.2. Opções da caixa de luz
Na guia lightbox, existem duas configurações na versão gratuita.
Você pode optar por exibir ou ocultar os atributos da imagem como uma legenda na configuração da caixa de luz. Da mesma forma, você também pode definir a cor de fundo da lightbox para dar aos seus produtos uma aparência profissional.
Você pode ver todas essas alterações na galeria de produtos depois de visualizar a página do produto.
Bom trabalho! É assim que você personaliza a galeria de produtos no WooCommerce.
Bônus: Adicione tamanhos de imagem personalizados no WordPress
Adicionar imagens às postagens e páginas do seu blog é fácil com o WordPress. No entanto, você deve escolher o tamanho certo da imagem para que o layout geral do seu site tenha uma boa aparência.
É muito importante entender como os tamanhos de imagem funcionam em sites WordPress e como adicionar tamanhos de imagem personalizados ao seu site. Se você escolher o tamanho errado, suas imagens podem ficar desfocadas e, se forem muito grandes, podem deixar seu site mais lento. Tamanhos de imagem incorretos também podem atrapalhar o layout da sua página ou postagem do blog e causar rolagem lateral desnecessária.
Mas o WordPress tem uma configuração interna para vários tamanhos de imagem. Eles são:
Tamanho da miniatura: 150 x 150 pixels
Tamanho médio: 300 x 300 pixels
Tamanho maior: 1024 x 1024 pixels
Tamanho total: o padrão é o tamanho original da imagem carregada.
Quando você carrega uma imagem no WordPress, esses quatro tamanhos de imagem diferentes são criados por padrão.
A razão pela qual o WordPress cria esses tamanhos de imagem é dupla. Primeiro, você não precisa redimensionar manualmente as imagens. Em segundo lugar, garante que o tamanho correto da imagem seja selecionado para diferentes locais em seu site.
Como redimensionar e editar imagens no WordPress
Felizmente, o WordPress também permite redimensionar as imagens padrão. Para isso, basta acessar Configurações > Mídia .
Como você pode ver na captura de tela, todos os tamanhos de imagem padrão estão listados lá. Você pode personalizá-los facilmente inserindo suas medidas preferidas.
Depois de ajustar os tamanhos de imagem padrão do WordPress para suas dimensões preferidas, clique em Salvar alterações . No futuro, todas as imagens que você enviar para o seu site serão ajustadas às novas dimensões.
Isso é tudo! Agora você pode alterar os tamanhos das imagens em seu site WordPress. Mas se você quiser mais informações sobre isso, confira nosso post abrangente sobre como adicionar tamanhos de imagem personalizados no WordPress.
Conclusão
Personalizar a galeria de produtos WooCommerce é uma das melhores maneiras de atrair a atenção dos clientes e transformá-los em potenciais compradores. Portanto, se você precisar personalizar a galeria de produtos, faça isso imediatamente para aumentar a conversão .
Para resumir, você pode personalizar a galeria de produtos no WooCommerce usando duas maneiras principais:
- Do painel WooCommerce
- Usando um plug-in
Você pode usar um plugin se precisar de alguma personalização avançada para a lista de produtos, porque o WooCommerce oferece poucas e muito básicas opções de personalização. Para algumas pessoas, esses recursos podem ser suficientes se você quiser apenas adicionar ou remover produtos na galeria de produtos.
No entanto, tudo se resume à sua preferência e necessidade, pois ambos os métodos podem ser usados para personalizar a galeria de produtos. Mas para nós, o Product Slider for WooCommerce é o melhor quando se trata de personalizar galerias de produtos usando um plug-in, pois possui muitos recursos úteis, mesmo na versão gratuita.
Esperamos que você possa personalizar a galeria de produtos WooCommerce com facilidade. Se você achou este guia útil, aqui estão mais alguns artigos que podem ser interessantes para você:
- Como personalizar a página do produto WooCommerce
- Melhores plugins para personalizar a página do produto WooCommerce
- Como personalizar o modelo de página de produto WooCommerce
Isso é tudo para este artigo! Esperamos ter ajudado você a personalizar a galeria de produtos no WooCommerce. Se houver algum problema, informe-nos na seção de comentários. Teremos prazer em ajudá-lo.