Ir para o conteúdo principal

Como adicionar texto em um produto WooCommerce em Divi

Divi: o tema WordPress mais fácil de usar

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]

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

O Divi é um tema responsivo e o último é compatível com vários outros plugins, entre outros, temos o WooCommerce. Hoje, mostraremos 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 mais), permitirá que você o corrija.

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 o WooCommerce com Divi e passa o mouse sobre um produto, vê um pequeno ícone "+" que é uma fonte (tornar-icon) proposto pela Divi e que é o seguinte:

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]

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

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

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

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]

Resultado final da modificação do produto Wordpress

Por que usar o 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: 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ões: 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 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, por isso não era um conceito novo. Eu nunca tive que fazer isso com o tema Divi e, quando vi isso, me desafiei e percebi que é realmente fácil implementá-lo. 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

Primeiro, mudaremos a cor da sobreposição estacionária. Isso é extremamente fácil de fazer no Divi. No seu módulo de loja, vá para a aba « 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.

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. [Recomendado]

.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.

Outros tutoriais Divi

Este artigo contém comentários 5

Deixe um comentário

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
10 ações
ação6
chilrear
Enregistrer4