Kako dodati tekst na WooCommerce proizvod na Divi

još Blair Jersyer | Divi, WordPress Tutorial

U prethodnom udžbeniku smo uveli ste Divi. Za one koji ne znaju, Divi je WordPress tema vrhunski dizajnirao tim Elegantan Teme koja nudi razne usluge na WordPressu i dodacima za dizajn i temama.

Divi je responzivna tema, a potonja je kompatibilna s nekoliko drugih dodataka među ostalima koje imamo WooCommerce. Danas ćemo vam pokazati kako svojim proizvodima dati drugačiju animaciju WooCommerce.

Ponekad stil od WooCommerce može biti pomalo neadekvatan, pogotovo ako je vaš CSS stil malo drugačiji. Ovaj vodič, koji će biti malo tehnički (malo CSS-a i ništa drugo), omogućit će vam da to riješite.

Ostali vodiči o temi Divi

Počnimo.

Kako dodati sliku na woocommerce proizvod

Promjena ikone za tekst preko miša iznad

Prema zadanim postavkama, kada upotrebljavate WooCommerce s Divi i zadržite pokazivač iznad proizvoda, vidjet ćete malu ikonu '+' koja je font (make-ikona) koji je predložio Divi, a glasi kako slijedi:

Zadana ikona woocommercea

Stvarno je lako to promijeniti u drugu ikonu u postavkama, ali ako želite dodati tekst, je li to nešto drugo? Pokazat ću vam kako to postići s današnjim CSS isječcima, a također ću uključiti i neki neobavezni kôd za dodavanje na vašu web lokaciju.

Evo što ćemo jednom završiti:

Konačni rezultat modifikacije Wordpress proizvoda

Zašto uopće koristiti tekst umjesto ikone?

Mogu se sjetiti nekih razloga zbog kojih to možete učiniti:

Da biste definirali, dajete jedinstven izgled vašoj trgovini: Sve što možete učiniti da biste svoju web stranicu Divi / WooCommerce razlikovali od druge, uvijek je dobra stvar.

Korištenje riječi poput "Prikaz" ili "Kupi" može rezultirati većom konverzijom: Svatko mora učiniti što je najbolje za svoju web stranicu, a vi možete iskoristiti integrirano A / B testiranje na Divi-ju da biste mu pomogli.

Izvor inspiracije

Nedavno sam pregledavao web mjesto na kojem je lebdio tekst o proizvodu. Naravno, vidio sam i druge web-lokacije za e-trgovinu koje na proizvodu lebde riječi umjesto ikona, tako da ovo nije bio novi koncept. Nikada nisam ovo morao raditi na Divi tema, a kad sam to vidio, postavio sam si izazov i shvatio da je to doista lako provesti. Uz vrlo malo potrebnog koda, sigurno nećete utjecati na izvedbu svog bloga.

Primjer web stranice

Primjena miša preko teksta

Korak 1: prekrivanje boje

Prvo ćemo promijeniti boju prekrivača lebdenja pri zadržavanju pokazivača. To je izuzetno lako učiniti na Diviju. U modulu vaše trgovine idite na " napredni napredni parametri dizajna I odaberite boju.

Izbor divi boja

Korak 2: Dodavanje CSS-a

Sljedeći CSS kôd u " Opcije teme> Prilagođeni CSS Ili na stilu teme vašeg djeteta.

.woocommerce .et_overlay: prije {lijevo: 0; margina-lijevo: 0; sadržaj: 'prikaz'; / *** Vaš tekst ovdje *** / obitelj fontova: 'Izvor bez pro', Arial! / *** Odaberite svoj font *** / text-transform: velika slova; veličina fonta: 24px; boja: #fff; / *** Podesite boju teksta *** / font-weight: podebljano; poravnavanje teksta: središte; širina: 100%; padding: 5px 0; }

Ako želite da vaši proizvodi budu prilično okrugli, možete dodati ovaj neobavezni kôd:

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

To je sve!

Sada možete posjetiti trgovinu i vidjeti kako se promjene uzimaju u obzir.

[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-download"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 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 =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostali Divi tutoriali

5 Komentari

  1. jahta
    jahta dana 8. kolovoza 2019. u 22:58 min

    Različit tekst po proizvodu? kažete da ga dodate novim proizvodima? kako je to? i gdje?

    odgovor
  2. brice bayle
    brice bayle dana 30. svibnja 2018. u 5:18 sati

    Super članak, hvala ti za ovaj savjet. A ako želimo drugačiji tekst po proizvodu, kako?

    odgovor
    • Thierry Bertrand
      Thierry Bertrand dana 31. svibnja 2018. u 6:12 sati

      Pozdrav Brice,

      U tom slučaju dodajte drugi tekst na novi WooCommerce proizvod.

      odgovor
  3. Laura
    Laura 26. travnja 2018. u 16 h 48 min

    Super! Hvala vam na ovom savjetu.

    odgovor
    • Thierry Bertrand
      Thierry Bertrand 26. travnja 2018. u 17 h 21 min

      ništa.

      odgovor

Objavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.