Gå till innehållet

Så här lägger du till text på en WooCommerce-produkt på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

I en tidigare handledning, vi du introducerade Divi. För dig som inte vet är Divi ett premium WordPress-tema designat av teamet Elegant Teman som erbjuder olika tjänster på WordPress och design plugins och teman.

Divi är ett lyhört tema och det senare är kompatibelt med flera andra plugins, bland andra har vi WooCommerce. Idag kommer vi att visa dig hur du kan ge en annan animation till dina WooCommerce-produkter.

Ibland kan WooCommerce-stilen vara lite olämplig, särskilt om din CSS-stil är lite annorlunda. Denna handledning, som kommer att vara lite teknisk (lite CSS och inget annat), gör att du kan åtgärda detta.

Andra handledning om Divi-tema

Låt oss börja.

Hur man lägger till en bild i en woocommerce-produkt

Ändra en ikon för text över musen över

När du använder WooCommerce med Divi och svävar över en produkt ser du som standard en liten '+' ikon som är ett teckensnitt (make-ikonen) föreslagits av Divi och som är följande:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Standardwoocommerce-ikon

Det är väldigt enkelt att ändra det till en annan ikon i inställningarna, men om du vill lägga till lite text, är det en annan sak? Jag visar dig hur du uppnår detta med dagens CSS-utdrag, och jag kommer också att inkludera valfri kod för att lägga till på din webbplats.

Här är vad vi en gång kommer att ha slutfört:

Wordpress produktändring slutresultat

Varför använda text istället för en ikon ändå?

Jag kan tänka på några skäl som kan få dig att göra detta:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

För att definiera ge din butik ett unikt utseende: Allt du kan göra för att skilja din Divi / WooCommerce-webbplats från en annan är alltid en bra sak.

Att använda ett ord som "Visa" eller "Köp" kan resultera i mer konvertering: Alla måste göra det bästa för deras webbplats, och du kan dra nytta av integrerad A / B-test på Divi för att hjälpa till med det.

Källa till inspiration

Jag har nyligen bläddrat på en webbplats med text om svävarprodukten. Jag har naturligtvis sett det från andra e-handelssajter som har ord snarare än ikoner på den svävande produkten, så det här var inte ett nytt koncept. Jag hade aldrig varit tvungen att göra detta på ett Divi-tema, och när jag såg detta satte jag mig en utmaning och insåg att det verkligen är enkelt att genomföra detta. Med mycket lite kod krävs är du säker på att du inte påverkar din bloggs prestanda.

Exempel på webbplats

Implementera mus över text

Steg 1: Färgöverlägget

Vi kommer att ändra färgen på överlägget när du svävar först. Detta är extremt lätt att göra på Divi. I din butiksmodul Gå till " avancerade avancerade designparametrar Och välj din färg.

Val av divifärger

Steg 2: Lägga till CSS

Följande CSS-kod i " Temalternativ> Anpassad CSS Eller på stilbladet för ditt barntema.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

.woocommerce .et_overlay: före {vänster: 0; marginal-vänster: 0; innehåll: "visa"; / *** Din text här *** / font-family: 'Source Without Pro', Arial! / *** Välj ditt teckensnitt *** / text-transform: store; typstorlek: 24px; färg: #fff; / *** Ställ in textfärgen *** / font-vikt: fet; text-align: center; bredd: 100%; stoppning: 5px 0; }

Om du vill att dina produkter ska vara ganska runda kan du lägga till den här valfria koden:

.woocommerce ul.products li.product a img, .et_overlay {border-radius: 50%; }

Det är allt!

Nu kan du besöka din butik och se hur dina ändringar beaktas.

Andra Divi tutorials

Den här artikeln innehåller kommentarer 5

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
10 aktier
del6
tweet
Enregistrer4