WooCommerce no DIVI: mostre um texto em vez de um ícone ao passar o mouse sobre um produto

por

Muitos de vocês me pediram mais tutoriais para personalizar o WooCommerce no DIVI.

Neste tutorial eu explico como dar os primeiros passos com o Módulo WooCommerce em DIVI

Estou preparando uma série de tutoriais para poder customizar nossa loja com WooCommerce, fiquem ligados 😉

Neste tutorial, mostrarei como exibir um texto em vez de um ícone ao passar o mouse sobre um produto.

Por padrão no DIVI ao passar o mouse sobre um produto ele mostra um ícone:

ícone de foco woocommerce divi

Neste tutorial, você aprenderá como alterá-lo para uma cor de texto e plano de fundo semelhante a esta:

texto pairar woocommerce divi

Para seguir o tutorial você precisa do template DIVI, você pode comprá-lo em clique aqui ou sim você é um membro premium Você tem disponível gratuitamente na área de membros.

Aqui está o tutorial em vídeo:

Inscreva-se no meu canal:  

A primeira coisa que vamos fazer é editar o módulo WooCommerce do construtor DIVI, ir até a aba Design e alterar a cor na opção “Sobrepor cor da camada ao passar o mouse”.

Com um controle deslizante você escolhe o tom de cor específico que deseja e com o outro a transparência:

módulo de loja divi

Com esta configuração, alteramos a cor de fundo ao passar o mouse:

foco de cores da loja divi

Para alterar o ícone para um texto, temos que adicionar o seguinte código em Divi–> Opções de tema –> CSS personalizado.

.woocommerce .et_overlay:before {
    left: 0;
    margin-left: 0;
    content: 'ver';
    /*** TEXTO ***/
    font-family: 'Source Sans Pro', Arial !important;
    /*** ELEGIR FUENTA DE TEXTO ***/
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    /*** COLOR DE TU TEXTO ***/
    font-weight: bold;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}

No código você pode ver que o texto que aparece na opção de conteúdo é o que vai aparecer.

Deixe um comentário