Você está tendo problemas com tamanhos de imagem em sua loja online? Você veio ao lugar certo. Neste guia, mostraremos diferentes maneiras de Corrija os problemas mais comuns de tamanho de imagem do WooCommerce .
WooCommerce É uma das melhores plataformas de comércio eletrônico, mas de vez em quando você pode encontrar alguns problemas. Já vimos como resolver os problemas mais comuns no processo de checkout e o que fazer quando o botão Adicionar ao carrinho não funciona. Neste tutorial, mostraremos diferentes soluções para corrigir problemas de tamanho de imagem.
Esses problemas podem ocorrer por vários motivos, como incompatibilidade de tema ou plug-in, tamanhos de imagem incorretos, campos de imagem ausentes, etc. 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 três principais tipos usados no WooCommerce são imagens de produtos, catálogos e miniaturas de produtos.
- Imagens de um único produto: imagens de um único produto são imagens de tamanho grande que usado para visualizar um único produto. Esta é a imagem principal do produto que você mostra aos clientes quando eles abrem a página específica do produto WooCommerce. Você pode adicionar mais de uma imagem do produto para mostrá-lo de vários ângulos.
- Imagens do catálogo: são imagens de Tamanho médio de produtos que normalmente são 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 visualizadas nas categorias de produtos ou nos próprios produtos.
- Imagens em miniatura do produto: estes são imagens em miniatura que são de tamanho muito pequeno. Eles são exibidos para identificar produtos em diversas páginas do WooCommerce, como páginas de carrinho, áreas de widgets ou até mesmo páginas de pedidos.
Problemas comuns com tamanhos de imagem WooCommerce
Agora você entende melhor os diferentes 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, portanto, ter problemas com suas imagens pode ser uma grande dor de cabeça.
Para corrigir problemas de tamanho de imagem WooCommerce, primeiro tem que identifique seu problema . A parte complicada é que você pode enfrentar vários problemas em relação ao tamanho das imagens. Alguns dos mais comuns são:
1. Imagens desfocadas
Este é um dos problemas mais comuns. As imagens que você envia para seus produtos ou miniaturas aparecem desfocadas e podem não visto claramente, Mesmo que a imagem original não estivesse compactada, ela era claramente visível e tinha ótima qualidade.
Imagens borradas não apenas parecem ruins, mas também dão a impressão de que seu site não é profissional.
Imagem original
imagem borrada
2. Imagem de baixa qualidade
Assim como as imagens borradas, algumas imagens em seu site podem ficar com qualidade inferior depois de carregá-las. Eles podem aparecer pixelados ou não ter linhas tão suaves quanto os originais.
Isso pode acontecer mesmo que a imagem enviada seja de excelente qualidade. Veremos por que e como consertar isso 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 não ajusta as configurações das imagens de acordo com os requisitos do tema .
Por exemplo, digamos que o requisito do seu tema para imagens de catálogo seja de pelo menos 250 x 250 pixels, mas as configurações de imagem WooCommerce da sua loja estejam definidas para 200 x 200 pixels. Como as configurações não são definidas de acordo com os requisitos do tema, seu a imagem é reajustada automaticamente com o tamanho de imagem errado.
4. Problemas com zoom, lightbox ou controle deslizante
WooCommerce oferece opções de zoom, lightbox e controle deslizante para visualizar suas imagens. Este foi um novo recurso adicionado ao WooCommerce com o lançamento da versão 3.0 . Se o seu tema não foi atualizado de acordo com suas especificações, você poderá ter alguns problemas.
5. Os campos de largura e miniatura da imagem estão faltando
Você também pode notar que os campos de largura e miniatura de suas imagens 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 rígidos, então você não pode alterar os tamanhos das imagens do tema através do administrador. Nesse caso, você precisará de algum conhecimento de programação que discutiremos nas soluções abaixo.
Agora que entendemos melhor os tipos de imagens e os problemas mais comuns, vejamos diferentes soluções para corrigir problemas de tamanho de imagem no WooCommerce.
Como você está familiarizado com alguns dos problemas mais comuns de tamanho de imagem do WooCommerce, vamos corrigi-los também. No entanto, os problemas de tamanho da imagem que você pode encontrar 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 qualquer problema de tamanho de imagem. Temos certeza de que uma das soluções será capaz de corrigir os problemas de tamanho da imagem WooCommerce.
1. Lista de verificação inicial a ter em mente
Antes de examinarmos soluções específicas para corrigir problemas de tamanho de imagem, há algumas coisas que você deve ter em mente. Primeiro, certifique-se de ter configurado corretamente WooCommerce sem perder nenhuma etapa. Você pode ter problemas com seu site se ele não estiver instalado corretamente.
Em segundo lugar, gostaríamos de lembrá-lo de verificar se tudo no site deles está atualizado . Pode haver problemas em sua loja se você não tiver atualizado 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, acesse Plug-ins > Plug-ins instalados em 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 WordPress também é atualizado para a versão mais recente . Por outro lado, se você usa 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 o tamanho das imagens, passe para a próxima solução.
OBSERVAÇÃO: Usaremos o tema Divi para este tutorial, portanto, algumas páginas podem parecer diferentes do seu site se você usar outro tema. No entanto, você deve ser capaz de seguir cada solução sem problemas. Se você está procurando um novo tema compatível com WooCommerce, dê uma olhada neste artigo.
2. Defina tamanhos de imagem WooCommerce personalizados
Adicionar tamanhos de imagem personalizados é uma das maneiras mais comuns de corrigir problemas de tamanho de imagem WooCommerce. Como a maioria dos problemas ocorre devido a mudança nos tamanhos de imagem padrão este deve ser seu primeiro passo.
Definir um tamanho de imagem personalizado é bastante simples. No seu painel de administração, vá para Aparência > Personalizar e abra a aba WooCommerce para acessar o Personalizador.
Em seguida, abra a opção Imagens do produtos . Aqui você pode alterar o tamanho da 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 na seção Largura da imagem principal .
Você também pode editar o tamanho das miniaturas e recortá-las aqui. Se você deseja 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 Sem Corte. Para minimizar problemas de imagem tanto de funcionalidade quanto de aparência, cortar onze É 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 tiver problemas mesmo depois de adicionar os tamanhos de imagem personalizados, é possível que o tamanho da imagem esteja incorreto. Conforme mencionado acima no problema do tamanho errado da imagem, existem requisitos de tema específicos para tamanhos de imagem no WooCommerce. Se esses tamanhos não atenderem aos requisitos, você poderá ter alguns problemas.
Para corrigir esses problemas de tamanho de imagem WooCommerce, a melhor opção é verificar primeiro os tamanhos de imagem do produto do tema. Abra a página do produto de qualquer um dos seus produtos e use o ferramenta de desenvolvimento de itens de inspeção no seu navegador para ver o tamanho da imagem do tema.
Por exemplo, se você estiver usando Google Chrome , clique com o botão direito na imagem do produto e pressione Inspecionar . Você pode ver o tamanho da imagem no ferramenta de desenvolvimento de inspeção de elementos como é mostrado a seguir.
Neste 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á-la 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, pode ser necessário ajustar tamanhos 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édio e grande .
Defina tamanhos de imagem de acordo com os requisitos do tema e salvar alterações .
Além disso, você pode remover alguns dos tamanhos padrão se não os usar. Para obter mais informações sobre isso, consulte nosso guia para remover tamanhos de imagem padrão do WordPress.
5. Corrija problemas de tamanho de imagem WooCommerce com plug-in
Outra alternativa para corrigir problemas de tamanho de imagem WooCommerce é usar um plugin 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 de retina
Em termos simples, Retina Support é uma opção de exibição de imagens em seu site com um resolução e qualidade muito alto . Uma tela pronta para retina garante que qualquer imagem visualizada 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 enviadas para o seu site estiverem desfocadas ou de baixa qualidade. Se quiser criar manualmente uma imagem pronta para retina, você precisará duplicar o tamanho e as dimensões da imagem, otimizá-los e carregá-los novamente. No entanto, você pode usar um plugin, para que suas imagens fiquem prontas para retina automaticamente. Para isto, Imagens perfeitas É um dos melhores plug-ins que existem.
Imagens perfeitas é um plugin simples para adicionar imagens de exibição retina ao seu site. ELE detecta automaticamente qualquer imagem com problemas de retina e cria uma cópia pronta para retina deles. Além disso, você pode criar imagens individuais prontas para retina ou em massa para economizar tempo.
Agora, vamos ver como usar este plugin.
5.1.1. Instale e ative o plugin
Primeiro você deve instalá-lo e ativá-lo. No painel do WordPress, vá para Plug-ins > Adicionar novo encontre o plugin e clique instale agora .
Assim que a instalação for concluída, ativo o plug-in. Alternativamente, você pode instalá-lo manualmente. Se você não tiver certeza de como fazer isso, confira nosso guia para instalar um plugin do WordPress manualmente.
5.1.2. Definir opções de imagem para a tela Retina
Após ativar o plugin, você precisa definir as opções de retina para imagens em seu site ou WooCommerce. Vá para Aplicações de Miau > Imagens perfeitas e você verá todas as opções para suas imagens retina na aba Em geral . As opções padrão são adequadas para a maioria dos sites, pois criam imagens retina para os tamanhos de imagem mais comuns.
No entanto, uma vez que as imagens estejam prontas para retina, elas podem precisar ser otimizadas. Imagens prontas para retina tendem a ser muito grandes e podem tornar seu site lento. Isso pode ser um grande obstáculo para seus clientes, já que a maioria dos usuários utiliza dispositivos móveis para fazer compras online.
Para garantir que as imagens retina não diminuam a velocidade do seu site, você precisa ter certeza de que elas estão bem otimizadas. Você pode fazer isso a partir do plugin, acessando a guia Otimização e velocidade . Observe que para isso você precisará assinar o plano premium que inclui IO fácil para otimização e custa 10 USD por mês.
Alternativamente, você também pode otimizá-los manualmente usando um plugin ou serviço de otimização de imagem como Minúsculo PNG qualquer Esmagar .
5.1.3. Converta imagens para compatibilidade com Retina
Depois de definir todas as opções necessárias para suas imagens retina, você pode começar a convertê-las. Primeiro, vá para Mídia > Imagens Perfeitas e você será redirecionado para a aba Problemas de retina . Aqui você pode criar imagens prontas para retina para corrigir problemas de tamanho de imagem WooCommerce.
Você também pode gerar miniaturas e imagens retina selecionando as imagens desejadas.
5.2. Gerar miniatura novamente
A regeneração de miniaturas também é uma ótima maneira de resolver problemas de tamanho de imagem, especialmente com imagens em miniatura .
Esses problemas geralmente ocorrem quando você altera recentemente o 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 Imagens perfeitas . Tudo que você precisa fazer é definir as opções de tamanho da imagem como fizemos nas etapas 5.1.1 e 5.1.2. Então vá para Mídia > Imagens Perfeitas abra a aba Todos e você verá todas as imagens do seu site. Semelhante à etapa de suporte à retina, você pode regenerar miniaturas para imagens específicas ou em massa.
Para regenerar imagens em massa, pressione Ações em massa e selecione Gerar novamente todas as entradas para regenerar miniaturas. Observe que isso pode levar alguns minutos se você tiver muitas imagens em seu site.
