Como corrigir problemas de tamanho de imagem WooCommerce

Você está tendo problemas com os tamanhos das imagens em sua loja online? Você veio ao lugar certo. Neste guia, mostraremos diferentes maneiras de corrigir os problemas mais comuns de tamanho de imagem do WooCommerce .

O WooCommerce é uma das melhores plataformas de comércio eletrônico, mas de vez em quando, você pode encontrar alguns problemas. Já vimos como corrigir os problemas mais comuns no checkout e o que fazer quando o botão Adicionar ao carrinho não está funcionando. Neste tutorial, mostraremos diferentes soluções para corrigir problemas de tamanho de imagem.

Esses problemas podem ocorrer devido a vários motivos, como incompatibilidade de tema ou plug-in, tamanhos de imagem incorretos, campos de imagem ausentes e assim por diante. Antes de vermos como resolver os vários problemas de tamanho de imagem, vamos dar uma olhada nos diferentes tipos de imagens no WooCommerce.

Tipos de imagens no WooCommerce

Existem muitos tipos de imagens que você pode adicionar ao seu site, mas os 3 principais tipos usados ​​no WooCommerce são imagens de produto, catálogo e miniatura de produto.

• Imagens de um único produto: Imagens de um único produto são imagens de tamanho grande usadas para visualizar um único produto. Esta é a imagem principal do produto que você exibe aos clientes quando eles abrem a página do produto WooCommerce específica. Você pode adicionar mais de uma imagem de produto para mostrar o produto de vários ângulos.
• Imagens do catálogo: são imagens de tamanho médio de produtos normalmente usados ​​na página da loja WooCommerce. Se você tiver uma página de categoria separada em sua loja online, essas imagens de catálogo também poderão ser vistas nas categorias de produtos ou nos próprios produtos.
• Imagens em miniatura do produto: são imagens em miniatura de tamanho muito pequeno. Eles são exibidos para identificar os produtos em várias páginas do WooCommerce, como páginas de carrinho, áreas de widgets ou até mesmo nas páginas de pedidos.

Problemas comuns com tamanhos de imagem WooCommerce

Agora você tem uma melhor compreensão dos vários tipos de imagens WooCommerce e a diferença em seus tamanhos. As imagens são extremamente importantes para ajudar você a converter visitantes em clientes, então ter problemas com suas imagens pode ser uma grande dor de cabeça.

Para poder corrigir problemas de tamanho de imagem do WooCommerce, você precisa identificar seu problema primeiro . A parte complicada é que existem vários problemas que você pode enfrentar em relação aos tamanhos das imagens. Alguns dos mais comuns são:

1. Imagens borradas

Este é um dos problemas mais comuns. As imagens que você envia para seus produtos ou miniaturas aparecem desfocadas e podem não ser claramente visíveis , mesmo que a imagem original não tenha sido compactada, esteja claramente visível e tenha ótima qualidade.

Não só as imagens borradas ficam ruins, mas também dão a impressão de que seu site não é profissional.

Imagem original

Imagem desfocada

2. Imagem de baixa qualidade

Semelhante a imagens desfocadas, algumas fotos em seu site podem ter qualidade inferior depois de serem carregadas. Eles podem parecer pixelados ou não ter linhas tão suaves quanto as originais.

Isso pode acontecer mesmo que a imagem enviada tenha uma qualidade excelente. Veremos por que e como corrigi-lo na próxima seção.

3. Tamanhos de imagem incorretos

Às vezes, você também pode notar que as imagens enviadas têm tamanhos diferentes das originais. Este é um problema muito comum se você não ajustar as configurações de suas imagens de acordo com os requisitos do tema .

Por exemplo, digamos que seu requisito de tema para imagens de catálogo seja de pelo menos 250 x 250 pixels, mas as configurações de imagem do WooCommerce da sua loja estão configuradas para 200 x 200 pixels. Como as configurações não são definidas de acordo com os requisitos do tema, sua imagem pode ser reajustada automaticamente com o tamanho de imagem incorreto.

4. Problemas de zoom, lightbox ou controle deslizante

O WooCommerce oferece opções de zoom, lightbox e controle deslizante para visualizar suas imagens. Este foi um novo recurso que foi adicionado ao WooCommerce com o lançamento da versão 3.0 . Se o seu tema não foi atualizado de acordo com as especificações, você pode enfrentar alguns problemas.

5. Campos de largura e miniatura da imagem ausentes

Você também pode notar que os campos de largura e miniatura de suas imagens do WooCommerce estão faltando no Personalizador em Aparência > Personalizar > WooCommerce > Imagens do produto .

Este pode ser o caso se o seu tema tiver tamanhos de imagem muito restritos, então você não pode alterar os tamanhos de imagem do tema por meio do administrador. Nesse caso, você precisará de algum conhecimento programático que discutiremos nas soluções abaixo.

Agora que entendemos melhor os tipos de imagens e os problemas mais comuns, vamos ver diferentes soluções para corrigir problemas de tamanho de imagem no WooCommerce.

Como corrigir problemas de tamanho de imagem WooCommerce

Como você está familiarizado com alguns dos problemas mais comuns de tamanho de imagem do WooCommerce, vamos corrigi-los também. Mas, os problemas de tamanho de imagem que você encontra podem ser causados ​​por vários motivos. Portanto, pode não haver uma solução específica para eles.

Portanto, recomendamos que você use algumas das soluções comuns fornecidas abaixo em relação a quaisquer problemas de tamanho de imagem. Temos certeza de que uma das soluções poderá corrigir os problemas de tamanho de imagem do WooCommerce.

1. Lista de verificação inicial a ter em mente

Antes de passarmos pelas soluções específicas para corrigir problemas de tamanho de imagem, há algumas coisas que você precisa ter em mente. Primeiro, verifique se você configurou corretamente o WooCommerce sem perder nenhuma etapa. Você pode enfrentar problemas com seu site se ele não for instalado corretamente.

Em segundo lugar, gostaríamos de lembrá-lo de verificar se tudo em seu site está atualizado . Pode haver problemas em sua loja se você não atualizou seu tema ou plugins para a versão mais recente.

Da mesma forma, certifique-se de atualizar o WooCommerce para a versão mais recente disponível. Para saber se você tem atualizações pendentes, vá para Plugins > Plugins Instalados no seu painel do WordPress. Se houver avisos solicitando que você atualize o WooCommerce, clique em Atualizar agora .

Além disso, se você atualizou o WordPress com o editor Gutenberg, certifique-se de que o WordPress também esteja atualizado para a versão mais recente . Por outro lado, se você usa o WordPress com o editor clássico, é melhor atualizá-lo com a versão mais recente do WordPress 4.9.

Depois de fazer tudo isso, se ainda tiver problemas com os tamanhos das imagens, passe para a próxima solução.

NOTA: Usaremos o tema Divi para este tutorial, portanto, algumas das páginas podem parecer diferentes do seu site se você usar outro tema. No entanto, você deve ser capaz de seguir todas as soluções sem problemas. Se você está procurando um novo tema compatível com WooCommerce, dê uma olhada neste artigo.

2. Defina tamanhos de imagem personalizados do WooCommerce

Adicionar tamanhos de imagem personalizados é uma das maneiras mais comuns de corrigir os problemas de tamanho de imagem do WooCommerce. Como a maioria dos problemas ocorre devido à alteração nos tamanhos de imagem padrão , essa deve ser sua primeira jogada.

Configurar um tamanho de imagem personalizado é bastante fácil. No seu painel de administração, vá para Aparência > Personalizar e abra a guia WooCommerce para acessar o Personalizador.

Em seguida, abra a opção Imagens do produto . Aqui você pode redimensionar a página do produto e as imagens em miniatura de seus produtos. Para editar a imagem principal da página do produto, adicione o tamanho de imagem desejado à seção Largura da imagem principal .

Você também pode editar os tamanhos das miniaturas e o corte aqui. Se você quiser ajustar o tamanho da imagem em miniatura, edite a opção Largura da miniatura .

Além disso, existem três opções para ajustar o corte de miniaturas: 1:1, personalizado e não cortado. Para minimizar os problemas de imagem para funcionalidade e aparência, o corte 1:1 é a melhor opção. Depois de fazer todas as alterações necessárias, clique em Publicar .

3. Verifique as dimensões da imagem do produto do seu tema

Se você ainda estiver enfrentando alguns problemas mesmo depois de adicionar os tamanhos de imagem personalizados, talvez o tamanho da imagem esteja incorreto. Como mencionado anteriormente no problema de tamanho de imagem errado, existem requisitos de tema específicos para tamanhos de imagem no WooCommerce. Se esses tamanhos não atenderem aos requisitos, você poderá enfrentar alguns problemas.

Para corrigir esses problemas de tamanho de imagem do WooCommerce, a melhor opção é verificar primeiro os tamanhos de imagem do produto do tema. Abra a página do produto de qualquer um de seus produtos e use a ferramenta de desenvolvimento de elementos inspecionar em seu navegador da Web para ver o tamanho da imagem do tema.

Por exemplo, se você estiver usando o Google Chrome , clique com o botão direito do mouse na imagem do produto e pressione Inspecionar . Você poderá ver o tamanho da imagem na ferramenta do desenvolvedor do elemento inspecionar, conforme mostrado abaixo.

Nesse caso, o tamanho da imagem do produto é 900×600 . Se os requisitos de imagem do seu tema forem diferentes, você poderá ter problemas.

Você pode ajustar o tamanho da imagem do produto de acordo com o Personalizador usando o método descrito no ponto 2. Da mesma forma, você pode inspecionar o tamanho da imagem em miniatura da mesma maneira e editá-lo ainda mais no Personalizador, se necessário.

4. Altere os tamanhos de imagem padrão

Se você tentou todas as soluções acima, mas ainda está enfrentando problemas de imagem, talvez seja necessário ajustar os tamanhos de imagem padrão do WordPress .

Para fazer isso, vá para Configurações > Mídia no painel do WordPress e você verá as opções de tamanho para imagens em miniatura, médias e grandes .

Defina os tamanhos de imagem de acordo com os requisitos do tema e salve as alterações .

Além disso, você pode remover alguns dos tamanhos padrão se não os usar. Para saber mais sobre isso, confira nosso guia para remover os tamanhos de imagem padrão do WordPress.

5. Corrija problemas de tamanho de imagem WooCommerce com plugins

Outra alternativa é corrigir os problemas de tamanho da imagem do WooCommerce é usar um plug-in dedicado. Existem várias ferramentas que você pode usar para isso. Nesta seção, mostraremos alguns para que você possa evitar mais problemas de tamanho de imagem em seu site.

Vamos dar uma olhada em algumas das melhores ferramentas que você deve usar.

5.1. Imagens perfeitas e suporte para retina

em termos simples, o Retina Support é uma opção de exibição de imagens em seu site com resolução e qualidade muito altas . Uma tela pronta para retina garante que qualquer imagem vista em qualquer dispositivo com qualquer tamanho de tela seja nítida e sem linhas ou bordas pixeladas visíveis.

Esta é uma solução perfeita se as imagens carregadas no seu site estiverem desfocadas ou de baixa qualidade. Se você quiser criar uma imagem pronta para retina manualmente, precisará dobrar o tamanho e as dimensões da imagem, otimizá-las e reenviá-las. No entanto, você pode usar um plug-in para que suas imagens fiquem prontas para retina automaticamente. Para isso, Perfect Images é um dos melhores plugins que existem.

Perfect Images é um plugin simples para adicionar imagens com tela retina ao seu site. Ele detecta automaticamente todas as imagens com problemas de retina e cria uma cópia delas pronta para retina. Além disso, você pode criar imagens individuais prontas para retina ou fazê-lo em massa para economizar tempo.

Agora, vamos ver como usar este plugin.

5.1.1. Instalar e ativar o plug-in

Primeiro, você precisa instalá-lo e ativá-lo. No seu painel do WordPress, vá em Plugins > Add New , procure o plugin e clique em Install Now .

Após a conclusão da instalação, ative o plugin. Alternativamente, você pode instalá-lo manualmente. Se você não tem certeza de como fazer isso, dê uma olhada no nosso guia para instalar um plugin do WordPress manualmente.

5.1.2. Configure as opções de imagem para a tela Retina

Depois de ativar o plug-in, você deve configurar as opções de retina para suas imagens do WooCommerce ou do site. Vá para Meow Apps > Perfect Images e você verá todas as opções para suas imagens de retina na guia Geral . As opções padrão são adequadas para a maioria dos sites, pois criam imagens de retina para os tamanhos de imagem mais comuns.

No entanto, depois que as imagens estiverem prontas para retina, elas podem precisar ser otimizadas. Imagens prontas para retina tendem a ser muito grandes e podem deixar seu site lento. Isso pode ser um grande desânimo para seus clientes, já que a maioria dos usuários usa dispositivos móveis para fazer compras online.

Para garantir que as imagens da retina não drenem a velocidade do seu site, você precisa garantir que elas estejam bem otimizadas. Você pode fazer isso no plug-in acessando a guia Otimização e Velocidade . Lembre-se de que, para isso, você precisará assinar o plano premium que inclui Easy IO para otimização e custa 10 USD por mês.

Como alternativa, você também pode otimizá-los manualmente usando um plug-in ou serviço de otimização de imagem, como TinyPNG ou Smush .

5.1.3. Converter imagens para suporte de retina

Depois de configurar todas as opções necessárias para suas imagens de retina, você pode começar a convertê-las. Primeiro, vá para Media> Perfect Images e você será redirecionado para a guia Retina Issues . Aqui você pode criar imagens prontas para retina para corrigir os problemas de tamanho de imagem do WooCommerce.

Você também pode gerar miniaturas e imagens de retina selecionando as imagens desejadas.

5.2. Regenerar Miniatura

A regeneração de miniaturas também é uma excelente maneira de resolver problemas com tamanhos de imagem, especialmente com imagens em miniatura .

Esses problemas geralmente ocorrem quando você alterou recentemente seu tema. O novo tema pode ter requisitos de tema diferentes para tamanhos de imagem, então você precisa reajustá-los.

Se você tiver um grande número de miniaturas em seu site, poderá usar o Perfect Images . Tudo o que você precisa fazer é configurar as opções de tamanho da imagem como fizemos nas etapas 5.1.1 e 5.1.2. Em seguida, vá em Mídia > Imagens Perfeitas , abra a aba Todos e você verá todas as imagens do seu site. Semelhante à etapa de suporte da retina, você pode regenerar miniaturas para imagens específicas ou em massa.

Para regenerar imagens em massa, pressione Ações em massa e selecione Regenerar todas as entradas para regenerar miniaturas. Lembre-se de que isso pode levar alguns minutos se você tiver muitas imagens em seu site.

6. Solução programática

Se você chegou até aqui, tentou corrigir os problemas de tamanho da imagem com as opções padrão do WooCommerce e até mesmo com plugins. Se nada funcionou e você ainda está enfrentando problemas, há mais uma coisa que você pode fazer. Para usar esta solução, recomendamos que você tenha um conhecimento básico de programação , pois usaremos um pouco de código.

Existem alguns snippets de código que você pode usar para corrigir problemas de imagem, mas lembre-se de que o snippet que usaremos alterará os tamanhos das imagens em seu website. Isso pode ser útil quando as larguras da imagem principal e os campos de miniatura estão ausentes no seu personalizador de tema e você deseja definir tamanhos de imagem personalizados do WooCommerce.

Como editaremos alguns arquivos principais, antes de começarmos, recomendamos que você faça backup do seu site WordPress. Além disso, é uma boa prática criar um tema filho ou usar qualquer um desses plugins de tema filho do WordPress.

Alterar o tamanho da imagem usando trechos de código

Para alterar os tamanhos de imagem quando a largura da imagem e a largura da miniatura estiverem ausentes no Personalizador, você pode usar o seguinte snippet de código. Vá para Appearance > Theme Editor e abra o arquivo functions.php .

Em seguida, basta adicionar o seguinte trecho de código na parte inferior do editor.

 add_theme_support( 'woocommerce', apply_filters( 'divi_woocommerce_args', array(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => array(
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

Este snippet alterará a largura da imagem do produto para 600 e a largura da miniatura para 300, que são os parâmetros padrão. Ajuste esses valores de acordo com suas necessidades e não esqueça de atualizar o arquivo.

7. Opções de suporte

Se você tentou todas as soluções mencionadas aqui, mas não conseguiu encontrar a solução para os problemas de tamanho da imagem, o problema que você está enfrentando é raro ou há um problema com os arquivos principais do WooCommerce ou seu tema.

Neste ponto, a melhor opção é entrar em contato com o suporte ao cliente. O WooCommerce tem excelentes opções de suporte para que você possa contatá-los sobre seus problemas de tamanho de imagem. Como alternativa, se você acha que seu tema pode ser o problema, entre em contato com seu provedor de temas e peça ajuda.

Conclusão

Em suma, existem diferentes tipos de imagens (produto único, catálogo e miniaturas de produtos) e vários problemas comuns com tamanhos de imagem. Os mais comuns são imagens desfocadas ou de baixa qualidade, tamanhos de imagem incorretos, opções de zoom, lightbox e controle deslizante e campos ausentes de largura e miniatura.

Neste guia, vimos soluções diferentes para corrigir os problemas mais comuns de tamanho de imagem do WooCommerce .

1. Atualize seu tema e plugins para a versão mais recente, incluindo WooCommerce
2. Definir tamanhos de imagem personalizados do WooCommerce
3. Verifique as dimensões do produto de imagem do seu tema
4. Alterar tamanhos de imagem padrão
5. Usar plug-ins
6. Solução programática com um pouco de código
7. Entre em contato com o WooCommerce ou com a equipe de suporte do seu tema

Se este artigo foi útil para você, compartilhe-o nas redes sociais e ajude seus amigos a se livrarem desses problemas. Você já enfrentou esses problemas antes? Como você os resolveu? Deixe-nos saber nos comentários abaixo.

Para guias mais úteis, aqui estão artigos que você pode achar interessantes:

• Como adicionar uma imagem a um produto no WooCommerce
• 3 Métodos para remover miniaturas no WordPress
• Como adicionar tamanhos de imagem personalizados no WordPress