Share
Ce veți creaPentru cei care sunt familiarizați cu WooCommerce, este posibil să fiți conștienți de funcționalitatea vânzării-flash. Acesta este folosit în principal pentru a afișa când un element este în vânzare.
În acest tutorial, vom examina modul în care putem personaliza și îmbunătăți afișarea de vânzare WooCommerce pentru a afișa procentajul de reducere efectiv și pentru a schimba culoarea etichetei pe baza procentului menționat.
WooCommerce sale-flash este vizualizat în arhive și pagini unice pentru produsele de vânzare, adică produsele care au o Preț de vânzare mai mică decât prețul normal.
În sistemul actual, utilizatorii nu pot să perceapă Dimensiune-sau calitatea - reducerii.
De exemplu, o reducere de 70% este mai atractivă decât cea de 15%, dar ambele sunt afișate de WooCommerce cu o simplă vânzare-bliț pe imaginea produsului. Pentru a rezolva această problemă, vom modifica algoritmul care controlează flash-ul de vânzare, astfel încât conținutul său (vânzare) să fie suprascris de procentul efectiv de reducere.
Fișierul care generează sale flash- este situat în următorul dosar:
dvs.-site-ul / wp-content / plugns / woocommerce / template-uri / bucla / vânzare-flash.php
De obicei, nu este o idee bună să schimbăm fișierele plugin deoarece toate modificările vor fi pierdute în timpul primei actualizări, iar dezactivarea actualizărilor nu este o opțiune.
Din fericire, putem face cât mai multe modificări pe care le avem pe șabloanele WooCommerce fără a compromite integritatea plugin-ului, pur și simplu prin copierea fișierului într-un sub-folder al temei pe care o vom apela woocommerce. În cazul nostru, vom copia vânzare-flash.phpfișier, care se află în:
dvs.-site-ul / wp-content / yourtheme / woocommerce / bucla / vânzare-flash.php
Fiecare fișier din folderul WooCommerce are prioritate față de fișierele șablon originale ale pluginului. În acest fel putem fi siguri că prin actualizarea WooCommerce nu pierdem nici o schimbare.
Rețineți că, dacă utilizați o temă copil, fișierul trebuie copiat în același subfolder al temei copil.
Rețineți, de asemenea, că dacă tema dvs. are deja un fișier yourtheme / woocommerce / bucla / vânzare-flash.php atunci este foarte probabil ca aceasta să modifice deja comportamentul original al vânzării-flash. În acest caz, există două soluții:
Să aruncăm o privire la vânzare-flash.php fişier:
Accentsconagua
is_on_sale ()):?> ". __ ("Vânzare!", "Woocommerce"). '', $ post, $ produs); ?> Codul este foarte simplu: generează a deschidere eticheta cu textul "VÂNZARE"De fiecare dată când un obiect este în vânzare. Tot ce trebuie să facem este să facem următoarele modificări la cod:
is_in_stock ()) retur; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); dacă (gol ($ regular_price)) // atunci acesta este un produs variabil $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variation = noul WC_Product_Variation ($ variation_id); $ regular_price = variație $ -> valoare obișnuită; $ sale_price = variație $ -> vânzare_price; $ sale = ceilalți ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -". $ vânzare. „%', $ post, $ produs); ?>
Primul lucru pe care trebuie să-l facem este să calculam discountul și, pentru a face acest lucru, avem nevoie de Preț obișnuit si Preț de vânzare. Pentru produsele simple și produsele grupate, putem obține aceste informații utilizând pur și simplu cele două câmpuri meta: _Preț și _preț obișnuit(a se vedea rândurile 5 și 6).
În cazul în care a obținut Preț obișnuit este gol, atunci vorbim despre un produs variabil, iar în acest caz va trebui să procedăm după cum urmează:
În acest moment, tot ceea ce trebuie să facem este să aplicăm o formulă simplă pentru a calcula discountul, folosind Preț obișnuit si Preț de vânzare. Pentru a simplifica acest lucru am putea evita utilizarea zecimalelor prin rotunjirea numarului la cel mai apropiat numar folosind ceil (num) funcția, ca în exemplul pe care tocmai vi l-am arătat, sau prin trunchierea la cel mai apropiat număr mai mic folosind podea (num) funcţie.
Putem adăuga o anumită culoare soluției noastre utilizând o scală cromatică pentru a reprezenta procentajul de reducere. Verde este 0% și roșu este 100%.
Cele două culori au următorul RGBcoduri:
Cu aceste formule simple putem adăuga la canalul roșu și să luăm din canalul verde.
Canalul albastru rămâne neschimbat; acesta va fi întotdeauna zero.
R = (255 * vânzare) / 100G = (255 * (100 - vânzare)) / 100B = 0Odată ce avem valorile roșii și verzi, putem modifica vânzare-bliț fundal prin adăugarea regulii direct la deschidere etichetă.
Codul complet este următorul:
is_in_stock ()) retur; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); dacă (gol ($ regular_price)) // atunci acesta este un produs variabil $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variation = noul WC_Product_Variation ($ variation_id); $ regular_price = variație $ -> valoare obișnuită; $ sale_price = variație $ -> vânzare_price; $ sale = ceilalți ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -". $ vânzare. „%', $ post, $ produs); ?>
Și rezultatul:
Pentru cei care au urmat, poate vă întrebați de ce am stabilit fundal: nici unul înainte de a seta culoare de fundal?
În acest caz specific, foaia de stil a avut o regulă pentru fundalproprietate care avea întotdeauna prioritate față de culoare de fundal. Modul corect de a face acest lucru ar fi fost schimbarea foii de stil și suprascrierea sau anularea regulii care stabilește fundalul vânzare-bliț.
În general, ar trebui să selectați proprietățile și regulile de stil pe care doriți să le înlocuiți sau să le schimbați cu instrumente precum Firebug. După ce înțelegeți unde și ce să modificați, trebuie să încercați să nu utilizați stiluri inline. În schimb, încercați să utilizați o foaie de stil externă.
În acest caz, avem o excepție de la regulă. RGB-ulcodul este calculat printr-un algoritm foarte simplu și puteți schimba întotdeauna algoritmul prin modificarea câtorva linii de cod PHP în loc de a schimba sute de CSSclase.
În acest moment, personalizarea vânzării-flash se face. Am modificat șablonul care face vizualizarea etichetei relevante.
În loc să modificăm fișierul original care se află în dosarul pluginului, am folosit o copie în dosarul tematic pentru a proteja modificările pe care tocmai le-am făcut în cazul actualizărilor pluginului.
În general, aceasta este o regulă valabilă pentru toate fișierele din dosarul șablon al pluginului WooCommerce. Sper că ați găsit acest tutorial util nu numai pentru a îmbunătăți comportamentul vânzării-flash, ci și pentru a înțelege mai bine cum funcționează unele dintre mecanismele WooCommerce.
