Cum adăugați text înainte de preț în WooCommerce » Adăugați text înainte de preț

Publicat: 2020-10-05

Adăugați text înainte de preț în WooCommerce Doriți să adăugați text înainte de preț în WooCommerce? Dacă aceasta este soluția pe care o căutați, vă voi arăta cum să adăugați rapid și ușor text înainte de preț în WooCommerce, folosind un fragment de cod simplu precum cel pe care l-am împărtășit în tutorialul despre cum să adăugați text după preț în WooCommerce.

În mod ideal, așa cum am menționat în acel tutorial, pentru a adăuga text sau conținut într-o pagină WooCommerce sau într-o pagină WordPress, ar trebui să utilizați cârligele de filtrare WordPress.

WooCommerce și WordPress Hooks

În esență, cârligele de filtrare sunt concepute pentru a filtra conținutul afișat pe pagina WooCommerce sau WordPress ca un „filtru” obișnuit, dar în acest caz, există puncte specifice în care noile modificări sunt adăugate și conținutul returnat împreună pentru afișare.

Pentru a adăuga text înainte ca prețul în WooCommerce să nu fie diferit, vom folosi cârligul de filtru la același eveniment pe care l-am folosit în tutorialul anterior - cum să adăugați sufixul de preț WooCommerce .

Adăugați prefixul de preț WooCommerce

Pentru ilustrare, voi folosi aceeași configurație pe care am folosit-o în toate tutorialele mele WooCommerce - am Storefront tema WooCommerce implicită instalată pe localhost. Voi adăuga pretextul înainte de preț pe partea indicată în diagrama de mai sus.

Pași pentru a adăuga text înainte de preț în WooCommerce

Există aproximativ trei pași pe care îi puteți face pentru a crea codul care va adăuga textul înainte de preț pe pagina produsului WooCommerce. Să descriem acești pași mai jos:

  1. Conectați-vă la site-ul dvs. WooCommerce și navigați la editorul de teme și deschideți fișierul functions.php unde vom adăuga fragmentul de cod.
  2. Creați un cârlig de filtru care se agăță de „evenimentul” de preț WooCommerce, care este „woocommerce_get_price_html”, astfel încât cârligul de filtru poate fi add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );
  3. Creați o funcție de apel invers cu textul pe care doriți să-l adăugați înainte de preț . Funcția de apel invers ar trebui să treacă parametrul $price și să adauge noul text înainte de a returna noul preț
  4. Salvați aceste modificări și verificați frontend-ul dacă funcționează.

Acum, este timpul să ilustrăm cu ceva cod. Să presupunem că textul pe care doriți să îl adăugați înainte ca prețul să fie „ Prețul recomandat de vânzare cu amănuntul”, îl vom prescurta ca RRP.

Următorul cod, atunci când este adăugat la fișierul functions.php al temei dvs. WooCommerce, ar trebui să adauge textul înainte de preț:

 /**
 * Adăugați text înainte de preț
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price');

funcția njengah_text_before_price($preț){

    $text_to_add_before_price = ' RRP '; //modifică textul dintre paranteze în textul preferat 
		  
		  
	returnați $text_to_add_before_price . $pret ;
		  
}

După adăugarea acestui cod în fișierul functions.php și salvare, apoi modificări. Verificați front-end-ul, dacă textul este adăugat înainte de preț, așa cum se vede în imaginea de mai jos:

Adăugați text înainte de preț în WooCommerce

Am adăugat cu succes textul înainte de preț pe pagina produsului WooCommerce, așa cum se arată mai sus.

Dar o întrebare frecventă care poate apărea este cum să adăugați textul între cele două prețuri, deoarece produsul este la preț de vânzare.

Putem realiza acest lucru verificând dacă produsul este în vânzare și modificăm codul după cum urmează:

 /**
 * Adăugați text înainte de prețul de vânzare
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_onsale_price', 100, 2 );

funcția njengah_text_onsale_price( $preț, $produs ) {
  
  dacă ( $produs->este_la_vânzare() ) {
    
	  $text_to_add_before_price = str_replace( '<ins>', '<ins><br>PRP ', $price);
	  
			returnează $text_to_add_before_price ;
    
	    }altfel{
     
	 returnare $pret;
  
   }
  
}

După adăugarea acestui cod, ar trebui să vedeți textul afișat înainte de prețul de vânzare, așa cum se arată în imaginea de mai jos:

Adăugați text înainte de preț în WooCommerce

În cele din urmă, putem combina filtrul pe care l-am adăugat în tutorialul anterior – cum să adăugați text înainte de preț în WooCommerce și acest filtru pe care l-am creat astfel încât să avem o soluție completă pentru a adăuga text înainte și după preț WooCommerce.

Codul complet pentru adăugarea textului înainte și după preț în pagina produsului WooCommerce ar trebui să fie după cum urmează:

 /**
 * Adăugați text înainte și după preț
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_and_after_price', 100, 2 );

funcția njengah_text_before_and_after_price( $preț) {
  
    $text_to_add_before_price = ' RRP '; //schimbați textul între ghilimele cu textul preferat 
    
       $text_to_add_after_price = 'pentru o pereche de frânare'; //schimbați textul între ghilimele cu textul preferat
	  
    returnați $text_to_add_before_price . $pret. $text_to_add_after_price ;
  
  
}

După cum puteți vedea, avem nevoie doar de un cârlig de filtru, dar combinăm variabilele în revenirea funcției de apel invers pentru a afișa textul înainte și după preț.

Concluzie

În acest tutorial WooCommerce, am subliniat cum puteți adăuga text înainte de preț pe pagina produsului și, de asemenea, am demonstrat că puteți combina filtrul anterior pentru a adăuga text înainte și după preț pe produsul WooCommerce.

Acest cod ar trebui să fie plasat în fișierul functions.php cu tema copil și actualizat pentru ca modificările să fie eficiente. Dacă aveți nevoie de mai multe personalizări pentru acest fragment de cod, vă puteți simți oricând liber să luați legătura.

Articole similare

  1. Cum să obțineți ID-ul postării de către Slug în WordPress cu un exemplu practic
  2. Cum să utilizați atributele produsului WooCommerce pas cu pas [Ghid complet]
  3. Cum să adăugați o bară laterală la WordPress » Ghid final pas cu pas
  4. Cum să creați o zonă de widget personalizată în WordPress pas cu pas
  5. Cum să setați produsele recomandate în WooCommerce
  6. Cum să schimbați textul Adăugați în coș Ghidul WooCommerce cu exemple
  7. Cum să schimbați anunțul „Adăugat în coș” WooCommerce
  8. Cum să înlocuiți prețul cu un apel text pentru preț în WooCommerce
  9. Cum să redirecționezi la reîmprospătarea paginii WordPress » Detectează pagina Reîmprospătează PHP
  10. Cum să eliminați bara laterală din pagina de produs în temele WooCommerce
  11. Cum să adăugați un produs Woocommerce din Frontend
  12. Cum să adăugați o descriere după preț în WooCommerce
  13. Cum să redirecționați utilizatorul dacă nu este autentificat în WordPress » Redirecționare pagină
  14. Cum să adăugați text după preț în WooCommerce » Adăugați sufixul de preț
  15. Cum să eliminați a fost adăugat în coșul dvs. Mesaj WooCommerce
  16. Cum să ascundeți butonul Adăugați în coș în WooCommerce
  17. Cum să setați o imagine recomandată în WordPress Gutenberg & Classic Editor
  18. Cum să schimbați textul epuizat în WooCommerce
  19. Cum să inserați în mod dinamic conținutul implicit în editorul de posturi WordPress
  20. Cum să adăugați un produs după configurarea magazinului [Ghid pentru începători]