Como trocar a imagem do produto ao passar o mouse no WooCommerce
Quem trabalha com WordPress e Elementor sabe que detalhes visuais fazem toda a diferença na experiência de compra.
Um deles é o famoso efeito hover, quando a imagem do produto muda assim que o usuário passa o mouse por cima.
Esse pequeno detalhe cria um toque profissional, melhora a navegação e ainda aumenta o tempo de permanência do visitante na página.
Mas o problema é que… quase ninguém explica como fazer isso de forma simples e limpa.
E foi exatamente por isso que resolvi gravar um tutorial completo no meu canal do YouTube.
O que motivou esse tutorial
Recentemente, eu precisei aplicar esse efeito em uma loja feita com WooCommerce + Elementor, e percebi que não havia nenhum tutorial claro em português sobre o assunto.
Encontrei alguns vídeos em inglês, mas todos envolviam códigos complexos ou plugins pesados.
Então decidi criar minha própria solução, usando apenas o plugin ACF (Advanced Custom Fields) e um pequeno trecho de CSS puro.
O resultado é simples, leve e 100% funcional, sem precisar editar o tema nem instalar extensões extras.
O código CSS usado no vídeo
Se você quiser testar o efeito rapidamente, aqui está o código que mostro no tutorial:
selector .segunda {
opacity: 0;
transition: 0.3s ease-in-out;
}
/* Mostra a segunda imagem ao passar o mouse */
selector:hover .segunda {
opacity: 1;
}Com esse pequeno ajuste, o WooCommerce exibe uma segunda imagem do produto assim que o visitante passa o mouse sobre o card, criando aquele visual moderno e interativo que vemos em grandes lojas online.
No vídeo, eu explico passo a passo como configurar o campo adicional no ACF e aplicar o CSS diretamente no Elementor, sem precisar tocar no código do tema.
Assista ao tutorial completo
Se você quer aprender exatamente como aplicar esse efeito hover no WooCommerce, clique no link abaixo e veja o tutorial completo no meu canal do YouTube:
👉 Assista agora: Como trocar a imagem do produto ao passar o mouse no WooCommerce (Efeito Hover)
No vídeo eu mostro todo o processo desde a criação do campo no ACF até a aplicação do CSS no Elementor, tudo de forma simples, visual e prática.
Por que esse efeito é importante
Mais do que estética, esse tipo de microinteração ajuda a:
- Deixar o site mais profissional e fluido;
- Melhorar a experiência de navegação;
- Aumentar o engajamento com os produtos;
- Criar uma sensação de modernidade e atenção aos detalhes.
Pequenas melhorias assim são o que fazem o visitante perceber valor e confiança em uma loja virtual.
Não é preciso complicar o que pode ser simples.
Com o ACF e um pouco de CSS, é possível criar efeitos visuais incríveis no WooCommerce + Elementor, sem depender de plugins pagos ou códigos complexos.
Se esse tipo de conteúdo te ajuda, se inscreva no canal da Huazapp no YouTube e acompanhe os próximos tutoriais.
Toda semana tem dicas novas sobre WordPress, Elementor e automações que facilitam a vida de quem empreende com tecnologia.
👉 Assista ao vídeo e se inscreva no canal aqui
Como trocar a imagem do produto ao passar o mouse no WooCommerce Como trocar a imagem do produto ao passar o mouse no WooCommerce Como trocar a imagem do produto ao passar o mouse no WooCommerce Como trocar a imagem do produto ao passar o mouse no WooCommerce Como trocar a imagem do produto ao passar o mouse no WooCommerce
Confira Também:
Site Para Clínicas Odontológicas o melhor cartão de visitas da sua clínica
