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

Divi är ett responsivt tema och det senare är kompatibelt med flera andra plugins bland annat vi har WooCommerce. Idag ska vi visa dig hur du ger en annan animation till dina produkter WooCommerce.

Ibland stilen av WooCommerce kan vara lite otillräcklig, speciellt 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:

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:

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 besökte nyligen en sida som hade text om produkten svävande. Jag har förstås sett andra e-handelssajter som har ord snarare än ikoner på produkten svävande, så detta var inget nytt koncept. Jag hade aldrig behövt göra detta på en Divi-tema, och när jag såg detta ställde jag mig en utmaning och insåg att det verkligen är lätt att implementera detta. Med väldigt lite kod som krävs är du säker på att inte påverka 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.

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

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andra Divi tutorials