Ir para o conteúdo principal

Como adicionar texto em um produto WooCommerce em Divi

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

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

Às vezes, o estilo do 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), permitirá que você conserte.

Outros tutoriais sobre o tema Divi

Vamos começar.

Modificando um ícone para texto sobre 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 por Divi e que diz o seguinte:

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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

Aqui está o que teremos concluído:

Por que usar texto em vez de um ícone?

Eu posso pensar em algumas razões que podem fazer você fazer isso:

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

Usar uma palavra como "Visualizar" ou "Comprar" pode resultar em mais conversõesTodo mundo precisa fazer o que é melhor para o seu site, e você pode aproveitar os testes A / B incorporados ao Divi para ajudar nisso.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Fonte de inspiração

Recentemente, naveguei por um site que tinha texto no 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 não era um conceito novo. Eu nunca tive que fazer isso em um tema Divi, e quando vi isso, me pus um desafio e percebi que é realmente fácil implementar isso. Com muito pouco código necessário, você tem certeza de não afetar o desempenho do seu blog.

Implementando mouse sobre texto

Etapa 1: a sobreposição de cores

Primeiro, alteraremos a cor da sobreposição de sobreposição estacionária. Isto é extremamente fácil de fazer em Divi. No seu módulo de loja Vá para a aba « Parâmetros Avançados de Design Avançado E selecione sua cor.

Etapa 2: adicionando CSS

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

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

.woocommerce .et_overlay: antes de {left: 0; margem esquerda: 0; conteúdo: 'view'; / *** Seu texto aqui *** / font-family: 'Fonte Pro-Free', Arial! / *** Escolha sua fonte *** / text-transform: maiúscula; tamanho da fonte: 24px; cor: #fff; / *** Definir a cor do texto *** / font-weight: negrito; texto-alinhar: centro; largura: 100%; preenchimento: 5px 0; }

Se você quiser que seus produtos sejam redondos, adicione este código opcional:

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

Isso é tudo!

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

Outros tutoriais Divi

Este artigo contém comentários 5

Resposta iate cancelar resposta

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
11 ações
ação6
chilrear1
Enregistrer4
Whatsapp