Suporte » Gerenciamento de conteúdo » Imagem Produto (woocommerce) distorcida

  • Resolvido fabiola123

    (@fabiola123)



    Saudações.

    Como configurar a imagem do produto para que não fique distorcida na apresentação na página de produtos. Vide link.

    Mesmo colocando resolução máxima ela ainda apresenta esta distorção.

    Agradeço.

    A página que eu preciso de ajuda: [fazer login para ver o link]

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • olá @fabiola123,

    o problema não é sua imagem, não adianta mandar imagens de alta resolução nesse caso. o problema é que seu tema está pegando uma imagem gerada no WordPress de 250px de largura (width) e colocando dentro de uma box de mais de 500px. ai como acontece com toda imagem “esticada”, ela fica pixelada.

    pelo design do seu tema, eu acho que é esse abaixo,

    https://br.wordpress.org/themes/vw-book-store/

    se for, seu tema tem um código bem antigo, ainda com código para IE7 no head… está na versão 0.1, com apenas 300 instalações e nenhum tópico aberto no fórum.

    bem, se você quiser continuar com esse tema, precisa ver se em Aparência > Personalizar há alguma aba que permita configurar o tamanho da imagem na página do produto, pelo menos para 600px.

    quem sabe o @cbrandt ve aqui seu tópico e vê algo no CSS que possa ajudar. porque nesse caso, acho que o código de seu tema não ajuda…

    acho inclusive que a melhor solução seria procurar um tema mais moderno…

    felicidades e boa sorte,

    Olá @fabiola123, @ralden,

    Não uso o Woocommerce, mas suspeito que haja algum plugin bom no repositório que faça a gestão dos tamanhos de imagens, gerando vários tamanhos para uso em diferentes telas. Muitas vezes isso é feito pelo próprio tema, como o que uso no meu site, por isso não sei de nenhum plugin para recomendar. Mas pra isso o tema precisa ser “responsivo”.

    Em termos de CSS, o que pode remediar essa esticada seria inserir um código no custom.css (ou equivalente) que substitua o “width:100%”, deixando a imagem exibida em seu tamanho natural (250×250). Vai sobrar uma margem branca entre a imagem e o texto. Teria que fazer testes e ver se agrada:

    div.product div.images img, #content div.product div.images img {
       width: auto;
       }
    fabiola123

    (@fabiola123)

    Deu certinho CB (@cbrandt). Agradeço também Ralden Souza (@ralden).

    Implementei o código que me passou na personalização do meu tema em CSS adicional com o seguinte código:

    div.product div.images img, #content div.product div.images img {
    width:auto;
    margin-top:30px;
    margin-bottom:30px;
    margin-left:130px;
    }

    Resultado final

    Bom saber que deu certo, @fabiola123!

    Depois não esquece de marcar este tópico como resolvido.

Visualizando 4 respostas - 1 até 4 (de um total de 4)
  • Você deve estar logado para responder a este tópico.