วิธีเพิ่มข้อความก่อนราคาใน WooCommerce » เพิ่มข้อความก่อนราคา

เผยแพร่แล้ว: 2020-10-05

เพิ่มข้อความก่อนราคาใน WooCommerce คุณต้องการเพิ่มข้อความก่อนราคาใน WooCommerce หรือไม่? หากนี่คือโซลูชันที่คุณต้องการ ฉันจะแสดงวิธีเพิ่มข้อความก่อนราคาใน WooCommerce อย่างรวดเร็วและง่ายดายโดยใช้ข้อมูลโค้ดง่ายๆ เช่นเดียวกับที่ฉันแชร์ในบทช่วยสอนเกี่ยวกับวิธีเพิ่มข้อความหลังราคาใน WooCommerce

ตามที่เรากล่าวไว้ในบทช่วยสอนนั้น เพื่อเพิ่มข้อความหรือเนื้อหาในหน้า WooCommerce หรือหน้า WordPress คุณควรใช้ตัวกรองของ WordPress

WooCommerce & WordPress Hooks

โดยพื้นฐานแล้ว filter hooks ได้รับการออกแบบมาเพื่อกรองเนื้อหาที่แสดงบนหน้า WooCommerce หรือ WordPress เช่นเดียวกับ 'ตัวกรอง' ทั่วไป แต่ในกรณีนี้ มีจุดเฉพาะที่มีการเพิ่มการแก้ไขใหม่และเนื้อหาที่ส่งคืนร่วมกันเพื่อแสดง

ในการเพิ่มข้อความก่อนราคาใน WooCommerce จะไม่แตกต่างกัน เราจะใช้ตัวกรองเบ็ดที่เหตุการณ์เดียวกันกับที่เราใช้ในบทช่วยสอนก่อนหน้านี้ – วิธีเพิ่มส่วนต่อท้าย ราคา WooCommerce

เพิ่มคำนำหน้าราคา WooCommerce

สำหรับภาพประกอบ ฉันจะใช้การตั้งค่าเดียวกันกับที่ใช้ในบทช่วยสอน WooCommerce ทั้งหมดของฉัน – ฉันมีหน้าร้านเป็นธีม WooCommerce เริ่มต้นที่ติดตั้งบน localhost ฉันจะเพิ่มข้อความนำหน้าราคาในส่วนที่ระบุในแผนภาพด้านบน

ขั้นตอนในการเพิ่มข้อความก่อนราคาใน WooCommerce

มีประมาณสามขั้นตอนที่คุณสามารถทำได้เพื่อสร้างโค้ดที่จะเพิ่มข้อความก่อนราคาในหน้าผลิตภัณฑ์ WooCommerce ให้เราร่างขั้นตอนเหล่านี้ด้านล่าง:

  1. ลงชื่อเข้าใช้ไซต์ WooCommerce ของคุณและไปที่ตัวแก้ไขธีม และเปิดไฟล์ functions.php ซึ่งเราจะเพิ่มข้อมูลโค้ด
  2. สร้างตัวกรองเบ็ดที่เกี่ยวโยงกับ 'เหตุการณ์' ราคา WooCommerce ซึ่งก็คือ ''woocommerce_get_price_html' เพื่อให้ตัวกรองเบ็ดสามารถ add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );
  3. สร้างฟังก์ชันโทรกลับด้วยข้อความที่คุณต้องการเพิ่มก่อนราคา ฟังก์ชันการโทรกลับควร ส่งพารามิเตอร์ $price และเพิ่มข้อความใหม่ก่อนที่จะส่งคืนราคาใหม่
  4. บันทึกการเปลี่ยนแปลงเหล่านี้และตรวจสอบส่วนหน้าหากใช้งานได้

ตอนนี้ ได้เวลาแสดงด้วยโค้ดบางส่วนแล้ว ให้เราสมมติว่าข้อความที่คุณต้องการเพิ่มก่อนที่ราคาจะเป็น ' ราคาขายปลีกที่แนะนำ' เราจะย่อเป็น RRP

รหัสต่อไปนี้เมื่อเพิ่มลงในไฟล์ functions.php ของธีม WooCommerce ควรเพิ่มข้อความก่อนราคา:

 /**
 * เพิ่มข้อความก่อนราคา
 */ 

add_filter( 'woocommerce_get_price_html', 'njengah_text_before_price' );

ฟังก์ชัน njengah_text_before_price($price){

    $text_to_add_before_price = 'RRP'; //เปลี่ยนข้อความในวงเล็บเป็นข้อความที่ต้องการ 
		  
		  
	ส่งคืน $text_to_add_before_price ราคา $ ;
		  
}

หลังจากเพิ่มโค้ดนี้ลงในไฟล์ functions.php แล้วบันทึกแล้วทำการเปลี่ยนแปลง ตรวจสอบส่วนหน้าหากมีการเพิ่มข้อความก่อนราคาตามที่เห็นในภาพด้านล่าง:

เพิ่มข้อความก่อนราคาใน WooCommerce

เราได้เพิ่มข้อความก่อนราคาในหน้าผลิตภัณฑ์ WooCommerce เรียบร้อยแล้วดังที่แสดงด้านบน

แต่คำถามทั่วไปที่อาจเกิดขึ้นคือการเพิ่มข้อความระหว่างราคาทั้งสองเนื่องจากสินค้าเป็นราคาลด

เราสามารถทำได้โดยตรวจสอบว่ามีสินค้าลดราคาหรือไม่ และเราแก้ไขโค้ดดังนี้:

 /**
 * เพิ่มข้อความก่อนราคาขาย
 */ 

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

ฟังก์ชัน njengah_text_onsale_price( $price, $product ) {
  
  ถ้า ( $product->is_on_sale() ) {
    
	  $text_to_add_before_price = str_replace( '<ins>', '<ins><br>RRP ', $price);
	  
			ส่งคืน $text_to_add_before_price ;
    
	    }อื่น{
     
	 ส่งคืนราคา $;
  
   }
  
}

หลังจากเพิ่มรหัสนี้แล้ว คุณควรเห็นข้อความแสดงก่อนราคาขายดังที่แสดงในภาพด้านล่าง:

เพิ่มข้อความก่อนราคาใน WooCommerce

สุดท้าย เราสามารถรวมตัวกรองที่เราเพิ่มในบทช่วยสอนก่อนหน้า – วิธีเพิ่มข้อความก่อนราคาใน WooCommerce และตัวกรองนี้ที่เราสร้างขึ้น เพื่อให้เรามีโซลูชันที่สมบูรณ์ในการเพิ่มข้อความก่อนและหลังราคา WooCommerce

รหัสที่สมบูรณ์เพื่อเพิ่มข้อความก่อนและหลังราคาในหน้าผลิตภัณฑ์ WooCommerce ควรเป็นดังนี้:

 /**
 * เพิ่มข้อความก่อนและหลังราคา
 */ 

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

ฟังก์ชั่น njengah_text_before_and_after_price ($ ราคา) {
  
    $text_to_add_before_price = 'RRP'; //เปลี่ยนข้อความในเครื่องหมายคำพูดเป็นข้อความที่คุณต้องการ 
    
       $text_to_add_after_price = ' สำหรับเบรคเกอร์หนึ่งคู่ '; //เปลี่ยนข้อความในเครื่องหมายคำพูดเป็นข้อความที่คุณต้องการ
	  
    ส่งคืน $text_to_add_before_price ราคา $ $text_to_add_after_price ;
  
  
}

อย่างที่คุณเห็นเราต้องการตัวกรองเพียงตัวเดียว แต่เรารวมตัวแปรในการส่งคืนฟังก์ชันเรียกกลับเพื่อแสดงผลข้อความก่อนและหลังราคา

บทสรุป

ในบทช่วยสอนของ WooCommerce นี้ เราได้สรุปวิธีที่คุณสามารถเพิ่มข้อความก่อนราคาในหน้าผลิตภัณฑ์ และเราได้แสดงให้เห็นด้วยว่าคุณสามารถรวมตัวกรองก่อนหน้าเพื่อเพิ่มข้อความก่อนและหลังราคาบนผลิตภัณฑ์ WooCommerce

ควรวางโค้ดนี้ในไฟล์ functions.php ของธีมลูกและอัปเดตเพื่อให้การเปลี่ยนแปลงมีผล หากคุณต้องการการปรับแต่งเพิ่มเติมเกี่ยวกับข้อมูลโค้ดนี้ คุณสามารถติดต่อได้ตลอดเวลา

บทความที่คล้ายกัน

  1. วิธีรับ Post ID โดย Slug ใน WordPress ด้วยตัวอย่างที่ใช้งานได้จริง
  2. วิธีใช้คุณสมบัติของผลิตภัณฑ์ WooCommerce ทีละขั้นตอน [คู่มือฉบับสมบูรณ์]
  3. วิธีเพิ่มแถบด้านข้างใน WordPress » Ultimate Step by Step Guide
  4. วิธีสร้างพื้นที่วิดเจ็ตที่กำหนดเองใน WordPress ทีละขั้นตอน
  5. วิธีตั้งค่าผลิตภัณฑ์เด่นใน WooCommerce
  6. วิธีเปลี่ยนข้อความใส่รถเข็น คู่มือ WooCommerce พร้อมตัวอย่าง
  7. วิธีการเปลี่ยนประกาศ 'ใส่ในรถเข็น' ของ WooCommerce
  8. วิธีการแทนที่ราคาด้วยข้อความเรียกราคาใน WooCommerce
  9. วิธีเปลี่ยนเส้นทางเมื่อรีเฟรชหน้า WordPress » ตรวจหาการรีเฟรชหน้า PHP
  10. วิธีลบแถบด้านข้างออกจากหน้าผลิตภัณฑ์ในธีม WooCommerce
  11. วิธีเพิ่มผลิตภัณฑ์ Woocommerce จาก Frontend
  12. วิธีเพิ่มคำอธิบายหลังราคาใน WooCommerce
  13. วิธีเปลี่ยนเส้นทางผู้ใช้หากไม่ได้ลงชื่อเข้าใช้ WordPress » Page Redirect
  14. วิธีเพิ่มข้อความหลังราคาใน WooCommerce » เพิ่มคำต่อท้ายราคา
  15. วิธีการลบได้ถูกเพิ่มไปยังข้อความรถเข็นของคุณ WooCommerce
  16. วิธีซ่อนปุ่ม Add to Cart ใน WooCommerce
  17. วิธีการตั้งค่ารูปภาพเด่นใน WordPress Gutenberg & Classic Editor
  18. วิธีเปลี่ยนข้อความที่หมดใน WooCommerce
  19. วิธีแทรกเนื้อหาเริ่มต้นใน WordPress Post Editor แบบไดนามิก
  20. วิธีเพิ่มสินค้าหลังจากตั้งค่าหน้าร้าน [คู่มือสำหรับผู้เริ่มต้น]