Într-un tutorial anterior, noi ai introdus Divi. Pentru cei care nu știu, Divi este un WordPress temă premium conceput de echipă Elegant Themes care oferă diverse servicii pe WordPress și plugin-uri și teme de design.

Divi este o temă receptivă, iar aceasta din urmă este compatibilă cu alte câteva plugin-uri, printre altele pe care le avem WooCommerce. Astăzi vă vom arăta cum să oferiți o animație diferită produselor dvs WooCommerce.

Uneori stilul de WooCommerce poate fi puțin inadecvat, mai ales dacă stilul dvs. CSS este puțin diferit. Acest tutorial, care va fi puțin tehnic (putin CSS si nimic altceva), vă va permite să remediați acest lucru.

Alte tutoriale pe tema Divi

Să începem.

Cum se adaugă o imagine unui produs woocommerce

Modificarea unei pictograme pentru text peste mouse

În mod implicit, când utilizați WooCommerce cu Divi și plasați cursorul peste un produs, vedeți o mică pictogramă „+” care este un font (make-icon) propus de Divi și care este următorul:

Pictogramă implicită de woocommerce

Este foarte ușor să schimbi asta cu o pictogramă diferită din setări, dar dacă vrei să adaugi un text, este altceva? Vă voi arăta cum să realizați acest lucru cu fragmentele CSS de astăzi și voi include, de asemenea, cod opțional pe care să îl adăugați pe site-ul dvs.

Iată ce vom fi completat odată:

Rezultatul final al modificării produsului Wordpress

De ce oricum folosiți text în loc de pictogramă?

Mă pot gândi la câteva motive care te pot face să faci acest lucru:

Pentru a defini, dați un aspect unic magazinului dvs.: Orice lucru pe care îl puteți face pentru a distinge site-ul dvs. Divi / WooCommerce de altul este întotdeauna un lucru bun.

Utilizarea unui cuvânt precum „Vizualizare” sau „Cumpărare” poate duce la mai multe conversii: Toți trebuie să facă ceea ce este mai bun pentru site-ul său web și puteți profita de testarea A / B integrată pe Divi pentru a vă ajuta.

Sursa de inspirație

Am răsfoit recent un site care avea text despre produs. Desigur, am văzut și alte site-uri de comerț electronic care au mai degrabă cuvinte decât pictograme pe produs, așa că acesta nu a fost un concept nou. Nu a trebuit niciodată să fac asta pe o Divi tema, iar când am văzut asta, mi-am propus o provocare și mi-am dat seama că este într-adevăr ușor să implementez acest lucru. Cu foarte puțin cod necesar, sunteți sigur că nu veți afecta performanța blogului dvs.

Exemplu de site web

Implementarea mouse-ului peste text

Pasul 1: acoperirea de culoare

Vom schimba mai întâi culoarea suprapunerii pe hover. Acest lucru este extrem de ușor de făcut pe Divi. În modulul magazin, accesați „ parametri avansați de proiectare avansată Și selectați-vă culoarea.

Selecția culorilor divi

Pasul 2: Adăugarea CSS

Următorul cod CSS din " Opțiuni temă> CSS personalizat Sau pe foaia de stil a temei copilului tău.

.woocommerce .et_overlay: înainte {stânga: 0; margine-stânga: 0; conținut: „vizualizare”; / *** Textul tău aici *** / font-family: „Source Without Pro”, Arial! / *** Alege-ți fontul *** / text-transform: mai mare; font-size: 24px; culoare: #fff; / *** Setați culoarea textului *** / font-weight: bold; aliniere text: centru; latime: 100%; căptușire: 5px 0; }

Dacă doriți ca produsele dvs. să fie destul de rotunde, puteți adăuga acest cod opțional:

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

Asta este!

Acum puteți vizita magazinul dvs. și puteți vedea cum sunt luate în considerare modificările dvs.

[vc_row center_row = "da"] [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"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_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_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi