Este tutorial espera que você esteja familiarizado com o desenvolvimento de temas WordPress e WooCommerce.
Aqui está um vídeo introdutório que mostra o comportamento esperado:
Implementação
Como de costume, para melhor demonstração, configurarei um tema base personalizado em uma instalação local do WordPress/WooCommerce. Trabalharei com as versões mais recentes no momento da redação deste artigo (WP 6.4.1/WC 8.3.1).
No admin, criei três produtos simples:
Cada produto tem sua própria imagem e potencialmente uma ou mais imagens adicionais – todas as imagens vêm do Unsplash:
Para meu design, quero que as imagens dos produtos sejam quadradas, então farei upload de imagens 1000×1000 com as seguintes configurações – no seu caso, elas podem ser diferentes:
A seguir, desabilitarei os estilos padrão do WooCommerce – sempre faço isso porque quero ter controle total dos estilos:
1 |
//functions.php
|
2 |
|
3 |
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); |
Seguindo em frente, embora seja de importância secundária, incluirei minha amada estrutura de front-end UIkit ao tema para acelerar o processo de desenvolvimento.
Ao fazer isso, a página da minha loja ficará assim:
Imagem secundária ao passar o mouse
Parece bom, mas honestamente, não é o objetivo deste tutorial. O que preciso é de uma maneira de alterar a imagem do produto ao passar o mouse.
Agora, muitos de vocês devem estar se perguntando qual imagem irei mostrar. Bem, temos muitas opções; Posso mostrar a primeira imagem da galeria de produtos, uma aleatória dessa galeria ou até mesmo outra imagem vinda de um campo de imagens.
Neste exemplo, irei com a primeira opção e revelarei a primeira imagem da galeria de produtos. Para fazer isso, substituirei o WooCommerce content-product.php arquivo.
Para ser mais específico, após o woocommerce_before_shop_loop_item gancho, vou adicionar um div com a turma de image-wrapper que envolverá qualquer coisa dentro do woocommerce_before_shop_loop_item_title gancho.
Este código tentará obter o ID da primeira imagem da galeria de produtos. Se existir, imprimirá sua representação HTML usando o wp_get_attachment_image() função. Observe que o tamanho da imagem será o woocommerce_thumbnail aquele que se aplica às páginas do catálogo, e anteriormente eu o configurei para 750px. Além disso, a imagem receberá o img-back class para facilitar a segmentação por meio do CSS.
Aqui está a adição de código necessária:
1 |
/** |
2 |
* yourtheme/woocommerce/content-product.php |
3 |
* |
4 |
* code after the woocommerce_before_shop_loop_item hook |
5 |
*/ |
6 |
|
7 |
|
8 |
|
9 |
$first_gal_img_id = reset( $product->get_gallery_image_ids() ); |
10 |
|
11 |
if ( $first_gal_img_id ) : |
12 |
echo wp_get_attachment_image( |
13 |
$first_gal_img_id, |
14 |
'woocommerce_thumbnail', |
15 |
false, |
16 |
array( |
17 |
'class' => 'img-back', |
18 |
)
|
19 |
);
|
20 |
endif; |
21 |
|
22 |
do_action( 'woocommerce_before_shop_loop_item_title' ); |
23 |
?>
|
24 |
|
Depois de substituir este modelo WooCommerce no meu tema, minhas páginas de arquivo ficarão assim:
Como você pode ver, aparecem tanto a imagem principal do produto (imagem inferior) quanto a primeira imagem da galeria do produto (imagem superior).
O que sinto falta agora são apenas alguns estilos. Através do CSS, ocultarei a primeira imagem e a mostrarei apenas ao passar o mouse – dependendo do seu tema, este código pode não funcionar sem ajustes:
1 |
.woocommerce-LoopProduct-link { |
2 |
display: inline-block; |
3 |
}
|
4 |
|
5 |
.woocommerce-LoopProduct-link .image-wrapper { |
6 |
position: relative; |
7 |
}
|
8 |
|
9 |
.woocommerce-LoopProduct-link .img-back { |
10 |
position: absolute; |
11 |
top: 0; |
12 |
left: 0; |
13 |
width: 100%; |
14 |
display: none; |
15 |
}
|
16 |
|
17 |
/*Optional*/
|
18 |
.woocommerce-LoopProduct-link:hover { |
19 |
text-decoration: none; |
20 |
color: #333; |
21 |
}
|
22 |
|
23 |
.woocommerce-LoopProduct-link:hover .img-back { |
24 |
display: block; |
25 |
}
|
Em termos de marcação de saída, aqui está o HTML gerado para um produto dentro do loop:
Outra coisa a notar é que aqui todas as minhas imagens têm dimensões iguais, então não preciso usar propriedades como object-fit: cover e height: 100% para posicionar a segunda imagem.
Substituindo estilos WooCommerce
Lembre-se de que acima descrevi um cenário em que removi os estilos padrão do WooCommerce e comecei o estilo do zero.
Mas caso eu quisesse manter os estilos padrão, mudaria alguns dos meus seletores para corresponder aos do WooCommerce e evitaria substituições devido à maior especificidade do CSS como este:
1 |
.woocommerce ul.products li.product a .img-back { |
2 |
position: absolute; |
3 |
top: 0; |
4 |
left: 0; |
5 |
width: 100%; |
6 |
display: none; |
7 |
}
|
8 |
|
9 |
.woocommerce ul.products li.product a:hover .img-back { |
10 |
display: block; |
11 |
}
|
Usando ganchos
Uma implementação alternativa, em vez de adicionar o código extra dentro do content-product.php arquivo, é imprimir este código através de duas funções personalizadas que serão executadas durante o woocommerce_before_shop_loop_item_title gancho.
Um aspecto importante é garantir que essas funções serão executadas na ordem correta. Para que isso aconteça, eles devem ter prioridades específicas seguindo as prioridades das demais funções deste gancho.
Com isso em mente, colocarei este código no functions.php do meu tema:
1 |
function playground_start_wrapper_div_print_second_product_img() { |
2 |
global $product; |
3 |
echo ' |
4 |
$first_gal_img_id = reset( $product->get_gallery_image_ids() ); |
5 |
|
6 |
if ( $first_gal_img_id ) : |
7 |
echo wp_get_attachment_image( |
8 |
$first_gal_img_id, |
9 |
'woocommerce_thumbnail', |
10 |
false, |
11 |
array( |
12 |
'class' => 'img-back', |
13 |
)
|
14 |
);
|
15 |
endif; |
16 |
}
|
17 |
|
18 |
function playground_close_wrapper_div_print_second_product_img() { |
19 |
echo ''; |
20 |
}
|
21 |
|
22 |
add_action( 'woocommerce_before_shop_loop_item_title', 'playground_start_wrapper_div_print_second_product_img', 9 ); |
23 |
add_action( 'woocommerce_before_shop_loop_item_title', 'playground_close_wrapper_div_print_second_product_img', 11 ); |
Os estilos permanecerão os mesmos, assim como o resultado final.
Conclusão
Durante este tutorial, mergulhamos na plataforma de comércio eletrônico WooCommerce e discutimos duas maneiras de revelar uma imagem secundária de produto ao passar o mouse sobre os produtos dentro dos loops.
Esperançosamente, você achou este exercício útil o suficiente e tentará em seus próximos projetos WooCommerce. Apenas lembre-se que dependendo da configuração do seu tema, especialmente se você não o construiu do zero, provavelmente terá que modificar seu código para adotar esta funcionalidade.
Se você quiser ver mais dicas e truques do WooCommerce, informe-nos através X!
