Como fazer com que a imagem do seu produto WooCommerce mude ao passar o mouse

Você pode aplicar um efeito de foco às imagens de seus produtos para tornar sua loja online mais atraente e dinâmica. Uma animação que ocorre quando o ponteiro do mouse se move sobre uma imagem é conhecida como efeito de foco. Você pode, por exemplo, alterar a imagem, aumentar o zoom, diminuir o fade ou deslizar para o lado.

Os benefícios dos efeitos de foco na imagem do produto para sua loja WooCommerce

Um efeito de foco pode ajudá-lo a destacar várias partes de seus produtos, como variações, detalhes ou recursos. Ele também pode destacar sua loja e impressionar seus clientes. Mais significativamente, ao tornar seus itens mais atraentes e envolventes, você pode aumentar suas vendas e conversões.

Nesta postagem do blog, ensinarei como usar o tema Flatsome para modificar a imagem de um produto WooCommerce ao passar o mouse. Flatsome é um tema WooCommerce popular e adaptável que possui inúmeras funcionalidades e oportunidades de personalização. Um deles é a capacidade de aplicar rapidamente vários efeitos de foco às fotos do seu produto.

Como adicionar um efeito de troca de imagem aos seus produtos WooCommerce

Para mudar para outra imagem do mesmo produto no WooCommerce, acesse o painel do WordPress.

Vá para Produtos > Adicionar novo se quiser adicionar um novo produto ou Produtos > Todos os produtos > Editar se quiser editar um produto específico.

Neste tutorial, veremos como adicionar um novo produto e adicionar várias imagens a esse produto através da galeria de imagens para fazer com que os produtos mudem para uma imagem diferente ao passar o mouse usando o tema Flatsome.

Para começar, vamos ao painel e navegue até Produtos > Adicionar novo . Insira o título do produto, imagem do produto, produto, descrição, imagens da galeria, preço e breve descrição do produto.

Ao clicar em Adicionar imagens da galeria de produtos , você pode optar por adicionar quantas imagens desejar relacionadas a esse produto. Esta é a opção que permite trocar imagens diferentes do mesmo produto ao passar o mouse sobre ele.

Quando terminar, clique em Publicar ou Atualizar.

Vá para o seu site e passe o mouse sobre a imagem que você acabou de adicionar.

Você notará que está qualificado para trocar para outra imagem da mesma imagem ao passar o mouse sobre ela.

Usar o tema Fatsome também nos dá a oportunidade de adicionar outros efeitos avançados de foco às nossas imagens.

Vá para Aparência > Personalizar > WooCommerce > Catálogo de Produtos > Imagens de Produtos. Aqui você pode escolher o tamanho e a proporção das imagens do seu produto, bem como o efeito de foco que deseja aplicar. Existem várias opções disponíveis, como Trocar, Zoom, Esmaecer, Deslizar, Desfocar e Escala de cinza (alterar a imagem para preto e branco ao passar o mouse). Você também pode ajustar a velocidade e direção da animação.

Salve suas alterações e visualize sua loja. Você deverá ver o efeito de foco funcionando nas imagens do seu produto.

Conclusão

Isso é tudo! Usando o tema Flatsome , você atualizou com sucesso uma imagem de produto WooCommerce ao passar o mouse. Você pode brincar com diferentes efeitos e configurações para descobrir aquele que funciona melhor para sua loja e seus produtos.

Espero que você tenha achado esta postagem do blog útil.