Como alterar o tamanho da miniatura da galeria WooCommerce

Como proprietário de uma loja online, ter imagens visualmente atraentes de seus produtos é crucial para atrair clientes em potencial. WooCommerce, a popular plataforma de comércio eletrônico, oferece um recurso de galeria de imagens integrado para exibir as imagens de seus produtos. No entanto, o tamanho padrão da miniatura da galeria nem sempre se ajusta ao design e layout do seu site. Neste artigo, orientaremos você sobre como alterar o tamanho da miniatura da galeria WooCommerce para torná-la mais adequada ao seu site.

Etapa 1: acessando o arquivo Functions.php do seu tema

Para alterar o tamanho da miniatura da galeria WooCommerce, o primeiro passo é acessar o arquivo functions.php do seu tema. Você pode fazer isso fazendo login no painel do WordPress e navegando até Aparência > Editor de tema. Selecione o arquivo functions.php na lista do lado direito da tela.

Etapa 2: adicionar um novo tamanho de imagem

Para adicionar um novo tamanho de imagem à miniatura da sua galeria WooCommerce, você pode usar a função add_image_size() no arquivo functions.php do seu tema. Aqui está um exemplo de trecho de código para adicionar um novo tamanho de imagem em miniatura:

add_image_size('woocommerce-thumbnail-new', 200, 200, verdadeiro);

Neste exemplo, nomeamos o novo tamanho da imagem “woocommerce-thumbnail-new” e definimos as dimensões para 200 por 200 pixels. O último parâmetro “true” significa que a imagem será cortada para caber exatamente nas dimensões.

Etapa 3: regenerando miniaturas

Depois de adicionar o novo tamanho de imagem, você precisará gerar novamente as miniaturas das imagens para que sejam redimensionadas para corresponder às novas dimensões. Você pode usar um plugin como Regenerar Miniaturas ou Regeneração de Miniaturas para fazer isso.

Etapa 4: atualizando o CSS do seu tema

Depois de regenerar as miniaturas das imagens, você precisará atualizar o CSS do seu tema para exibir o novo tamanho da miniatura corretamente. Você pode fazer isso adicionando o seguinte código CSS ao arquivo style.css do seu tema:

.woocommerce div.produto div.images .woocommerce-product-gallery__image img {
largura: 200px! importante;
altura: 200px!importante;
}

Neste exemplo, definimos a largura e a altura para corresponder ao novo tamanho da imagem que criamos anteriormente. A declaração “importante” garante que as propriedades CSS sejam aplicadas mesmo se houver outras regras de folha de estilo que entrem em conflito com elas.

Etapa 5: testando o novo tamanho da miniatura

Por fim, você pode testar o novo tamanho da miniatura navegando até uma das páginas do seu produto com várias imagens e verificando se as imagens em miniatura agora são exibidas no tamanho correto.

Conclusão

Alterar o tamanho da miniatura da galeria WooCommerce pode fazer uma grande diferença na forma como as imagens dos seus produtos são exibidas no seu site. Seguindo as etapas descritas neste artigo, você pode criar facilmente um novo tamanho de imagem para suas miniaturas, regenerar suas miniaturas, atualizar o CSS do seu tema e testar o novo tamanho de miniatura. Com um pouco de conhecimento de CSS e algumas alterações simples de código, você estará no caminho certo para apresentar seus produtos da melhor maneira possível.