Em um tutorial anterior, nós você apresentou o Divi. Para quem não sabe, o Divi é um tema WordPress premium projetado pela equipe temas elegantes que oferece vários serviços no WordPress e cria plugins e temas.

Divi é um tema responsivo e este último é compatível com vários outros plugins entre outros que temos WooCommerce. Hoje vamos mostrar como dar uma animação diferente aos seus produtos WooCommerce.

Às vezes o estilo de WooCommerce pode ser um pouco inadequado, especialmente se o seu estilo CSS for um pouco diferente. Este tutorial, que será um pouco técnico (um pouco de CSS e nada mais), permitirá que você corrija isso.

Outros tutoriais sobre o tema Divi

Vamos começar.

Como adicionar uma imagem a um produto woocommerce

Modificando um ícone para texto sobre o mouse

Por padrão, quando você usa WooCommerce com Divi e passa o mouse sobre um produto, você vê um pequeno ícone '+' que é uma fonte (tornar-icon) proposto pela Divi e que é o seguinte:

Ícone de comércio eletrônico padrão

É muito fácil mudar isso para um ícone diferente nas configurações, mas se você quiser adicionar algum texto, é outra coisa? Mostrarei como fazer isso com os snippets CSS de hoje e também incluirei código opcional para adicionar ao seu site.

Aqui está o que teremos concluído uma vez:

Resultado final da modificação do produto Wordpress

Por que usar texto em vez de um ícone?

Eu posso pensar em alguns motivos que podem fazer você fazer isso:

Para definir, dê uma aparência única à sua loja: Qualquer coisa que você possa fazer para distinguir o seu site Divi / WooCommerce de outro é sempre uma boa coisa.

Usar uma palavra como "Visualizar" ou "Comprar" pode resultar em mais conversão: Todos precisam fazer o melhor para o site deles, e você pode tirar proveito dos testes A / B integrados no Divi para ajudar nisso.

Fonte de inspiração

Recentemente, naveguei em um site que tinha um texto sobre o produto pairando. É claro que vi outros sites de comércio eletrônico que têm palavras em vez de ícones no produto pairando, então esse não era um conceito novo. Eu nunca tive que fazer isso em um Tema Divi, e quando eu vi isso, eu me lancei um desafio e percebi que é realmente fácil de implementar isso. Com muito pouco código necessário, você certamente não afetará o desempenho do seu blog.

Site de exemplo

Implementando o mouse sobre o texto

Etapa 1: a sobreposição de cores

Vamos mudar a cor da sobreposição ao pairar primeiro. Isso é extremamente fácil de fazer no Divi. No módulo da sua loja, vá para " parâmetros avançados avançados de design E selecione sua cor.

Seleção de cores divi

Etapa 2: Adicionando CSS

O seguinte código CSS em " Opções de tema> CSS personalizado Ou na folha de estilos do seu tema infantil.

.woocommerce .et_overlay: antes de {left: 0; margem esquerda: 0; conteúdo: 'ver'; / *** Seu texto aqui *** / font-family: 'Fonte sem profissional', Arial! / *** Escolha sua fonte *** / text-transform: uppercase; tamanho da fonte: 24px; cor: #fff; / *** Defina a cor do texto *** / font-weight: bold; alinhamento de texto: centro; largura: 100%; preenchimento: 5px 0; }

Se você deseja que seus produtos sejam bastante redondos, você pode adicionar este código opcional:

.woocommerce ul.products li.product um img, .et_overlay {fronteira de raio: 50%; }

É isso aí!

Agora você pode visitar sua loja e ver como suas alterações são levadas em consideração.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expandido "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] BAIXE O TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" em branco "layout =" expandido "alinhar =" centro " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] BAIXAR MODELOS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Outros tutoriais Divi