Como adicionar imagem ao produto no WooCommerce

Procurando maneiras de adicionar imagens aos seus produtos? Seja um destaque, uma imagem ou uma galeria, a forma como você apresenta seus itens determinará o quanto você vende. É por isso que neste guia, mostraremos como adicionar uma imagem a um produto no WooCommerce .

A importância das imagens no e-commerce

As imagens são um dos elementos-chave quando se trata de vender um produto. Uma imagem vale mais que mil palavras, então um produto com uma imagem atraente tem mais chances de chamar a atenção dos clientes e produzir uma venda.

Os donos de lojas tendem a se esforçar muito para descrever os recursos de seus produtos. Mas mesmo que queiramos pensar que tomamos decisões racionais, a verdade é que a maioria das decisões são emocionais. Os seres humanos tendem a tomar decisões emocionais e justificá-las racionalmente. Se um produto parecer bom, teremos mais probabilidade de comprá-lo porque ele chamará nossa atenção.

Independentemente do tipo de produto que você vende, eles terão mais chances de vender se parecerem bons. Se você pensar sobre isso, isso é lógico. Se alguém vai usar ou usar um produto, seja sapatos, roupas ou software, eles vão querer que ele tenha uma boa aparência. É por isso que é importante adicionar e otimizar as imagens que você usa para promover seus produtos e garantir que o que você vende tenha a melhor aparência.

Agora que entendemos sua importância, vamos ver como você pode adicionar uma imagem a um produto WooCommerce.

Como adicionar imagens a um produto no WooCommerce

Existem 2 maneiras principais de adicionar imagens a produtos no WooCommerce:

1. Usando o painel WooCommerce
2. Programaticamente

Vamos dar uma olhada em ambos os métodos.

1) Adicione imagens do painel WooCommerce

Adicionar uma imagem aos produtos é uma tarefa bastante simples em uma loja WooCommerce. Ao criar ou editar um produto, você encontrará as meta caixas de imagens na barra lateral. Lá, você poderá definir uma única imagem em destaque e uma galeria de imagens com várias imagens para mostrar seus itens.

Ao clicar em qualquer um deles, um modal será aberto e você poderá fazer upload de novos arquivos de imagem ou escolher um dos existentes na biblioteca de mídia do WP.

Se você estiver adicionando imagens à galeria de produtos, pressione CTRL + clique esquerdo para selecionar várias imagens e adicioná-las em uma única ação.

Como alternativa, você pode adicionar imagens da descrição do conteúdo do produto. Basta pressionar o botão Adicionar mídia e selecionar as imagens que deseja adicionar. Se você usar esse método, lembre-se de que isso pode afetar o design da página geral do produto, portanto, certifique-se de selecionar o tamanho e o alinhamento corretos antes de adicionar imagens no editor de texto.

Adicionar imagens do painel é simples. No entanto, se você tiver habilidades de codificação, também poderá adicionar imagens programaticamente, o que oferece mais flexibilidade. Vamos ver como fazê-lo.

2) Como adicionar uma imagem a um produto WooCommerce programaticamente

Em alguns casos, pode ser necessário adicionar imagens programaticamente. Isso oferece mais flexibilidade e permite incluir tudo, desde imagens a produtos únicos, imagens de recursos, galerias e muito mais.

Nesta seção, mostraremos exemplos de scripts que ajudarão você a adicionar imagens a produtos específicos. Observe que você precisará substituir o ID do produto e da imagem nas duas primeiras linhas da função pelo ID do produto e da imagem. Caso contrário, se o ID do produto e da imagem não existirem, você receberá um erro.

Além disso, lembre-se de que os scripts funcionarão em uma única execução. Isso significa que você pode excluí-los depois de executá-los.

Finalmente, você precisa colar os seguintes scripts no arquivo functions.php do seu tema filho. Você pode fazer isso indo em Aparência > Editor de Temas. Em seguida, procure o arquivo functions.php na coluna da direita e cole o código conforme mostrado abaixo. Alternativamente, você pode usar um plugin como Code Snippets.

NOTA : Como editaremos alguns arquivos principais, antes de começarmos, recomendamos que você faça backup do seu site. Além de ser uma prática recomendada, é sempre uma boa ideia ter um backup recente caso algo dê errado. Se você não estiver familiarizado com ganchos, dê uma olhada no nosso guia de ganchos WooCommerce, onde você aprenderá os diferentes tipos de ganchos e como usá-los.

2.1) Adicionando uma imagem em destaque a um único produto

Este script definirá uma imagem em destaque para um único produto. Para isso, você precisa especificar o ID da imagem e o ID do produto, conforme mostrado abaixo. Por exemplo, neste caso, estamos definindo a imagem com ID 48 como a imagem em destaque do produto com ID 195.

 function QuadLayers_add_featured_image() {

    $imagemID = 48; // ID da imagem
    $post_id = 195; //ID do produto

    set_post_thumbnail( $post_id, $imageID );
    
}

add_action('init', 'QuadLayers_add_featured_image');

O gancho init garantirá que a função possa ser executada em qualquer lugar com cada carregamento de página. Além disso, usamos a função set_post_thumbnail() para definir a imagem em destaque. Isso funcionará tanto para produtos quanto para postagens.

2.2) Adicionando uma imagem em destaque a vários produtos

Da mesma forma, você pode fazer o mesmo com vários produtos simplesmente adicionando seus IDs. Este script adicionará a imagem com ID 53 aos produtos com IDs 32, 33 e 34.

 function QuadLayers_multiple_featured_image() {

    $imagemID = 53; // ID da imagem
    $post_id = array(32,33,34); //IDs de produtos

    for ($ii=0; $ii < count($post_id); $ii++) { 
          
           set_post_thumbnail( $post_id[$ii], $imageID );      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

Como você pode ver, este é o mesmo script de antes, mas colocamos todos os IDs do produto em uma matriz. Dessa forma, você pode atribuir a mesma imagem em destaque para vários produtos ao mesmo tempo. Isso pode ser útil para variações de produtos que não produzem alterações estéticas. Por exemplo, você pode usar a mesma imagem em destaque para variações do mesmo celular com diferentes RAMs de memória.

2.3) Adicionando imagens à galeria de produtos

Adicionar uma imagem a uma galeria de produtos no WooCommerce é um pouco mais complexo porque você precisa usar duas funções. Se você verificar o script a seguir, verá que a primeira função ( QuadLayers_create_gallery ) prepara as informações necessárias para criar a galeria. Essa é a lista de imagens e o ID do produto onde você deseja adicionar a galeria.

Por outro lado, o update_post_met() é responsável pela criação da galeria. Para conseguir isso, precisamos usar o ID do produto no qual queremos adicionar a galeria e uma lista de imagens em um array.

 function QuadLayers_create_gallery(){ 
        $imgs_ids=array(48,53,47); //IDs de imagem
        add_img_to_gallery(195,$imgs_ids); // ID do produto
}
function add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('init','QuadLayers_create_gallery');

2.4) Defina uma imagem padrão para produtos sem imagem em destaque

Vimos que para definir a imagem em destaque de um produto, no seu painel de administração, você precisa acessar WooCommerce > Configurações > Produtos .

Se você quiser definir uma imagem padrão programaticamente, use o snippet a seguir.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

function QuadLayers_default_image( $src ) {
	$upload_dir = wp_upload_dir();
	$uploads = untrailingslashit( $upload_dir['baseurl']);
	// substitui pelo caminho da sua imagem
	$src = $ uploads . '/2021/07/album-1.jpg';
	 
	return $src;
}

Isso atribuirá uma imagem padrão a todos os produtos sem uma imagem em destaque. Nesse caso, estamos usando o caminho da imagem em vez de um ID, portanto, lembre-se de substituí-lo pelo caminho correto da sua imagem.

Para obter o caminho, basta acessar a biblioteca de mídia , procurar a imagem que deseja usar, copiar o caminho da URL e colá-lo no código acima mantendo o formato atual.

Como adicionar tamanhos de imagem personalizados

Além de adicionar uma imagem a um produto WooCommerce, há mais coisas que você pode fazer para personalizar seus itens. Uma boa opção é criar tamanhos de imagem personalizados. Por padrão, o WordPress inclui 3 tamanhos de imagem: miniatura (150 x 150), médio (300 x 300) e grande (1024 x 1024). Você pode alterar facilmente esses tamanhos no painel, mas e se você quiser adicionar tamanhos padrão personalizados? Vamos ver como fazer isso.

Primeiro, abra o arquivo functions.php e cole o seguinte código:

add_theme_support( 'post-thumbnails' );

Isso ativará a função add_image_size e permitirá que você crie tamanhos de imagem adicionais. Em seguida, atualize o arquivo. Agora vamos adicionar alguns novos tamanhos de imagem. No código a seguir, adicionaremos quatro tamanhos personalizados com dimensões diferentes. Basta colar o código e ajustar os nomes e dimensões de acordo com suas necessidades.

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

É isso! Agora você poderá escolher mais tamanhos padrão em seu site. Para obter mais informações sobre isso, confira nosso guia sobre como adicionar tamanhos de imagem personalizados.

Bônus: Remova os tamanhos de imagem padrão no WordPress

Você provavelmente notou que toda vez que você carrega uma imagem no WordPress, ele gera automaticamente 3 cópias dela nos 3 tamanhos de imagem padrão que acabamos de ver: miniatura, médio e grande.

Isso pode ser útil e ajudá-lo a economizar tempo. No entanto, se você não usar alguns desses tamanhos, as imagens só ocuparão espaço em seu servidor. Uma solução rápida é remover esses tamanhos de imagem do seu site e evitar gerar essas cópias de imagem.

A boa notícia é que você pode fazer isso com um script simples. Por exemplo, digamos que você queira remover o tamanho médio do seu site. Simplesmente copie e cole o seguinte script no arquivo functions.php do seu tema filho.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Isso removerá o tamanho médio da imagem padrão. 
function prefix_remove_default_images( $sizes) { 
unset( $sizes['medium']); // 300px 
retornar $tamanhos;
}

Para remover quaisquer outros tamanhos, adicione outra linha com o tamanho que deseja remover. Por exemplo, se você também deseja remover o tamanho grande, o código será:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Isso removerá os tamanhos de imagem padrão médio e grande. 
function prefix_remove_default_images( $sizes) { 
unset( $sizes['medium']); // 300px
unset( $sizes['grande']); // 1024px 
retornar $tamanhos;
}

É isso! É assim que você pode remover facilmente tamanhos de imagem. Para mais detalhes sobre isso, confira nosso tutorial passo a passo.

Conclusão

Em resumo, as fotos são essenciais na hora de vender seus produtos. Um item com uma imagem atraente tem mais chances de chamar a atenção dos clientes e gerar uma venda para sua loja.

Neste guia, vimos 2 métodos diferentes para adicionar uma imagem a um produto WooCommerce:

• Do painel do WooCommerce
• Programaticamente

Agora, qual é mais apropriado para você? Adicionar uma imagem do painel é bastante fácil, por isso é uma boa opção. No entanto, se você tiver habilidades de codificação e quiser mais flexibilidade, também poderá adicionar imagens programaticamente. Mostramos alguns scripts que ajudarão você a adicionar facilmente imagens, imagens em destaque e galerias aos seus produtos.

Por fim, também vimos como adicionar imagens de tamanho personalizado e remover tamanhos de imagem padrão em seu site, para que você possa personalizar seu site e tornar seus produtos mais atraentes. Para obter mais informações sobre como aproveitar ao máximo suas páginas de produtos, consulte nosso guia para personalizar a página de produtos.

Você adicionou imagens aos seus produtos? Qual método você usou? Deixe-nos saber na seção de comentários abaixo!

Para mais tutoriais para personalizar sua loja, confira os seguintes posts:

• Como personalizar a página da loja no WooCommerce
• Guia: Como editar a página de agradecimento do WooCommerce programaticamente
• O guia completo para otimização de checkout