I en tidligere opplæring, vi du introduserte Divi. For de som ikke vet, er Divi en WordPress tema premium designet av teamet Elegant Temaer som tilbyr ulike tjenester på WordPress og design plugins og temaer.

Divi er et responsivt tema og sistnevnte er kompatibel med flere andre plugins blant annet vi har WooCommerce. I dag skal vi vise deg hvordan du gir en annen animasjon til produktene dine WooCommerce.

Noen ganger stilen til WooCommerce kan være litt utilstrekkelig, spesielt hvis CSS-stilen din er litt annerledes. Denne opplæringen, som vil være litt teknisk (litt CSS og ingenting annet), vil tillate deg å avhjelpe dette.

Andre opplæringsprogrammer om Divi-tema

La oss begynne.

Hvordan legge til et bilde i et woocommerce-produkt

Endre et ikon for tekst over musen over

Når du bruker WooCommerce med Divi og holder markøren over et produkt, ser du som standard et lite '+' ikon som er en skrift (make-ikonet) foreslått av Divi og som er som følger:

Standard woocommerce-ikon

Det er veldig enkelt å endre det til et annet ikon i innstillingene, men hvis du vil legge til litt tekst, er det en annen ting? Jeg viser deg hvordan du kan oppnå dette med dagens CSS-utdrag, og jeg vil også inkludere valgfri kode som du kan legge til på nettstedet ditt.

Dette er hva vi en gang skal ha fullført:

Wordpress produktendring endelig resultat

Hvorfor bruke tekst i stedet for et ikon uansett?

Jeg kan tenke på noen grunner som kan få deg til å gjøre dette:

For å definere gi et unikt utseende til butikken din: Alt du kan gjøre for å skille Divi / WooCommerce-siden din fra en annen, er alltid en god ting.

Ved å bruke et ord som "Vis" eller "Kjøp" kan det føre til mer konvertering: Alle trenger å gjøre det som er best for nettstedet deres, og du kan dra nytte av integrert A / B-testing på Divi for å hjelpe med det.

Kilde til inspirasjon

Jeg har nylig surfet på et nettsted som hadde tekst om produktet som svever. Jeg har selvfølgelig sett andre e-handelssider som har ord i stedet for ikoner på produktet svevende, så dette var ikke et nytt konsept. Jeg hadde aldri trengt å gjøre dette på en Divi-tema, og da jeg så dette, satte jeg meg en utfordring og innså at det virkelig er enkelt å implementere dette. Med svært lite kode som kreves, vil du garantert ikke påvirke bloggens ytelse.

Eksempel på nettsider

Implementering av mus over tekst

Trinn 1: Fargeoverlegget

Vi vil først endre fargen på sveveroverlegget på sveveren. Dette er ekstremt enkelt å gjøre på Divi. Gå til "i butikkmodulen din avanserte avanserte designparametere Og velg farge.

Valg av divi farger

Trinn 2: Legge til CSS

Følgende CSS-kode i " Temaalternativer> Tilpasset CSS Eller på stilarket til temaet ditt.

.woocommerce .et_overlay: før {left: 0; margin-left: 0; innhold: 'visning'; / *** Teksten din her *** / font-family: 'Source Without Pro', Arial! / *** Velg din font *** / text-transform: store bokstaver; skriftstørrelse: 24px; farge: #fff; / *** Angi tekstfargen *** / font-weight: bold; tekstjustering: sentrum; bredde: 100%; polstring: 5px 0; }

Hvis du vil at produktene dine skal være ganske runde, kan du legge til denne valgfrie koden:

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

Det er det!

Nå kan du besøke butikken din og se hvordan endringene dine tas i betraktning.

[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 = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-nedlasting"] LAST NED DIVI-TEMAET [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" faOW D fa-LOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andre divisjoner