วิธีเปลี่ยนปุ่ม Add to Cart เพื่ออ่านต่อ WooCommerce
เผยแพร่แล้ว: 2021-02-23
หากคุณต้องการเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมใน WooCommerce บทช่วยสอนฉบับย่อนี้จะแนะนำคุณและช่วยคุณเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในร้านค้า WooCommerce ของคุณ
ตามหลักการแล้วปุ่ม WooCommerce อ่านเพิ่มเติม” อาจเป็นการออกแบบธีมเริ่มต้นโดยที่บางธีมมีปุ่ม WooCommerce อ่านเพิ่มเติม” แทนปุ่มเพิ่มในรถเข็น
การปรับแต่งอื่น ๆ ของร้านค้า WooCommerce ของคุณอาจทำให้คุณต้องเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติม
ปรับแต่ง WooCommerce ปุ่มหยิบใส่รถเข็น
หากคุณต้องการปรับแต่งปุ่มเพิ่มในรถเข็น ก่อนหน้านี้ฉันได้แชร์บทช่วยสอนเกี่ยวกับวิธีเปลี่ยนปุ่มเพิ่มในรถเข็นใน WooCommerce
ต่อไปนี้เป็นเพียงตัวอย่างเล็กๆ น้อยๆ ของบทช่วยสอนที่ฉันเขียนไว้ก่อนหน้านี้เกี่ยวกับวิธีปรับแต่งปุ่มเพิ่มลงในตะกร้าสินค้าของ WooCommerce:
- วิธีแทนที่ปุ่มหยิบใส่ตะกร้าด้วยลิงก์ WooCommerce
- วิธีซ่อนปุ่มอ่านเพิ่มเติมและใส่ในรถเข็น WooCommerce
- วิธีเปลี่ยนข้อความปุ่ม Add to Cart ใน WooCommerce Shop Page
- วิธีเปลี่ยนข้อความใส่รถเข็น คู่มือ WooCommerce พร้อมตัวอย่าง
- วิธีเพิ่มสินค้าลงรถเข็นโดยทางโปรแกรมใน WooCommerce
- วิธีการเปลี่ยนประกาศ 'ใส่ในรถเข็น' ของ WooCommerce
- วิธีซ่อนราคาและเพิ่มลงในรถเข็นสำหรับผู้ใช้ที่ออกจากระบบ WooCommerce
ตอนนี้ให้เราดูว่าคุณสามารถเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมได้อย่างไร
WooCommerce เปลี่ยนปุ่ม Add to Cart เพื่ออ่านต่อ
ฉันต้องการแสดงให้เห็นในการเปลี่ยนแปลง WooCommerce ปุ่ม Add to Cart เพื่ออ่านบทช่วยสอนเพิ่มเติมพร้อมคำแนะนำทีละขั้นตอน
ในคู่มือนี้ ฉันติดตั้ง WooCommerce แล้ว และฉันกำลังใช้ธีมหน้าร้านซึ่งเป็นธีมเริ่มต้นของ WooCommerce
ดังที่คุณเห็นในภาพด้านล่างปุ่มหยิบใส่ตะกร้าบนหน้าผลิตภัณฑ์และเหมือนกับในภาพหน้าจอ
ปุ่มเพิ่มสินค้าเดียวในรถเข็น: WooCommerce เปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านต่อ
ฉันต้องการให้เราเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในหน้าผลิตภัณฑ์เดียวโดยใช้ข้อมูลโค้ดที่ฉันจะแชร์ด้านล่างและแนะนำคุณเกี่ยวกับตำแหน่งที่จะวางข้อมูลโค้ดในธีม WooCommerce ของคุณ:
ทีละขั้นตอน: WooCommerce อ่านเพิ่มเติม” ปุ่มเพื่อแทนที่ Add to Cart
หากต้องการเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในหน้าผลิตภัณฑ์เดียวของ WooCommerce คุณต้องทำตามขั้นตอนต่อไปนี้:
- สร้างสำเนาสำรองของธีมของคุณและที่สำคัญที่สุดคือไฟล์ functions.php ที่คุณจะวาง ข้อมูลโค้ดเพื่อเปลี่ยนปุ่ม WooCommerce เพิ่มในรถเข็นเพื่ออ่านเพิ่มเติม
- ควรสร้างธีมย่อยของธีมที่ใช้งานอยู่ของคุณ หากคุณยังไม่มีธีมย่อย หากคุณไม่มีความคิดเกี่ยวกับวิธีสร้างธีมย่อย บทแนะนำเกี่ยวกับวิธีการสร้างธีมย่อยของหน้าร้าน อาจเป็นจุดเริ่มต้นที่ดี
- เปิดไฟล์ functions.php ของธีมลูกของคุณ และเพิ่มโค้ดด้านล่างที่ด้านล่างของไฟล์ functions.php:
// หากต้องการเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในหน้าผลิตภัณฑ์เดียว
add_filter( 'woocommerce_product_single_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_product_page' );
ฟังก์ชัน njengah_woocommerce_change_add_cart_read_more_product_page () {
ส่งคืน __( 'อ่านเพิ่มเติม', 'woocommerce' );
}
- ดังที่คุณเห็นในโค้ดด้านบน นี่คือตัวกรองเบ็ดที่มีฟังก์ชันเรียกกลับที่ตรวจสอบผ่านหน้าผลิตภัณฑ์เดียวสำหรับปุ่มเพิ่มในรถเข็นเพื่อเปลี่ยนเป็นข้อความที่กำหนดเอง อ่านเพิ่มเติม
- บันทึกการเปลี่ยนแปลงและตรวจสอบในส่วนหน้า หากคุณเห็นข้อความปุ่มเพิ่มในรถเข็นเปลี่ยนแปลงเพื่ออ่านเพิ่มเติมดังในตัวอย่างของฉันในภาพด้านล่าง:
หน้าร้านค้า ปุ่มหยิบใส่ตะกร้า: WooCommerce เปลี่ยนปุ่มหยิบใส่ตะกร้าเพื่ออ่านต่อ
เนื่องจากเราเปลี่ยนปุ่มหยิบใส่ตะกร้าเพื่ออ่านเพิ่มเติมในหน้าผลิตภัณฑ์เดียวได้สำเร็จ ฉันต้องการให้เราเปลี่ยนปุ่มหยิบใส่ตะกร้าเพื่ออ่านเพิ่มเติมในหน้าร้านค้าโดยใช้ข้อมูลโค้ด ที่ฉันจะแบ่งปันด้านล่างและแนะนำคุณ ตำแหน่งที่จะวางข้อมูลโค้ดในธีม WooCommerce ของคุณ:
ทีละขั้นตอน: เพิ่มปุ่ม อ่านเพิ่มเติม” WooCommerce ไปที่หน้าร้านค้า
หากต้องการเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในหน้าร้านค้า WooCommerce คุณต้องทำตามขั้นตอนเหล่านี้เพื่อเพิ่มรหัสในธีมลูกของคุณ:
- สร้างสำเนาสำรองของธีมของคุณและที่สำคัญที่สุดคือไฟล์ functions.php ซึ่งคุณจะวาง โค้ดขนาดสั้นเพื่อเปลี่ยนปุ่ม WooCommerce add to cart เพื่ออ่านเพิ่มเติมในหน้าร้านค้า
- ควรสร้างธีมย่อยของธีมที่ใช้งานอยู่ของคุณ หากคุณยังไม่มีธีมย่อย หากคุณไม่มีความคิดเกี่ยวกับวิธีสร้างธีมย่อย บทแนะนำเกี่ยวกับวิธีการสร้างธีมย่อยของหน้าร้าน อาจเป็นจุดเริ่มต้นที่ดี
- เปิดไฟล์ functions.php ของธีมลูกของคุณ และเพิ่มโค้ดด้านล่างที่ด้านล่างของไฟล์ functions.php:
// หากต้องการเปลี่ยนข้อความในตะกร้าสินค้าในคลังผลิตภัณฑ์และหน้าร้านค้า
add_filter( 'woocommerce_product_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_shop_page' );
ฟังก์ชั่น njengah_woocommerce_change_add_cart_read_more_shop_page () {
return __( 'อ่านต่อ, 'woocommerce' );
}
- ดังที่คุณเห็นในโค้ดด้านบน นี่คือตัวกรองเบ็ดที่มีฟังก์ชันเรียกกลับที่ตรวจสอบผ่านหน้าผลิตภัณฑ์เดียวสำหรับปุ่มเพิ่มในรถเข็นเพื่อเปลี่ยนเป็นข้อความที่กำหนดเอง อ่านเพิ่มเติม
- บันทึกการเปลี่ยนแปลงและเช็คอินที่ส่วนหน้า หากคุณเห็นข้อความปุ่มเพิ่มในรถเข็นเปลี่ยนแปลงเพื่ออ่านเพิ่มเติมในหน้าร้านค้าและหน้าเก็บถาวรดังในตัวอย่างของฉันในภาพด้านล่าง:
หน้าร้านค้า & หน้าสินค้าเดียว : WooCommerce เปลี่ยนปุ่ม Add to Cart เพื่ออ่านต่อ
นอกจากนี้ยังสามารถรวมข้อมูลโค้ดทั้งสองเพื่อเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมทั้งในผลิตภัณฑ์เดียวและในหน้าร้านค้า
ต่อไปนี้คือข้อมูลโค้ดรวมที่คุณควรเพิ่มลงในไฟล์ functions.php ของธีมลูกของคุณเพื่อเปลี่ยนข้อความปุ่มเพิ่มในรถเข็นของ WooCommerce เพื่ออ่านเพิ่มเติม:
// หากต้องการเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านเพิ่มเติมในหน้าผลิตภัณฑ์เดียว
add_filter( 'woocommerce_product_single_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_product_page' );
ฟังก์ชัน njengah_woocommerce_change_add_cart_read_more_product_page () {
ส่งคืน __( 'อ่านเพิ่มเติม', 'woocommerce' );
}
// หากต้องการเปลี่ยนข้อความในตะกร้าสินค้าในคลังผลิตภัณฑ์และหน้าร้านค้า
add_filter( 'woocommerce_product_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_shop_page' );
ฟังก์ชั่น njengah_woocommerce_change_add_cart_read_more_shop_page () {
return __( 'อ่านต่อ, 'woocommerce' );
}
บทสรุป
ในโพสต์นี้ เราได้อธิบายวิธีที่คุณสามารถใช้ข้อมูลโค้ดเพื่อเปลี่ยนปุ่มเพิ่มในรถเข็นของ WooCommerce เพื่ออ่านเพิ่มเติมทั้งในหน้าผลิตภัณฑ์เดียวและที่เก็บถาวรหรือหน้าร้านค้า
ในทั้งสองกรณี ตัวกรองเหล่านี้เป็นตัวกรองที่มีตะขอที่แตกต่างกันเพื่อกำหนดเป้าหมายไปยังหน้าร้านค้าหรือหน้าเอกสารสำคัญและหน้าผลิตภัณฑ์เดียว
สุดท้าย คุณสามารถรวมโค้ดทั้งสองและเพิ่มลงใน functions.php เพื่อเปลี่ยนปุ่มเพิ่มในรถเข็นเพื่ออ่านรายละเอียดเพิ่มเติมทั้งในหน้าร้านค้าและหน้าผลิตภัณฑ์เดียว
บทความที่คล้ายกัน
- วิธีรับรหัสคำสั่งซื้อในหน้าชำระเงิน WooCommerce
- วิธีเพิ่ม WooCommerce เปลี่ยนเส้นทางหน้าบัญชีของฉัน
- วิธีเปลี่ยนสีลิงค์ในหน้าร้านค้า WooCommerce Theme
- วิธีลบเอฟเฟกต์การซูมบนภาพผลิตภัณฑ์ WooCommerce
- วิธีซ่อนแท็บข้อมูลเพิ่มเติมใน WooCommerce
- วิธีเพิ่มการแบ่งหน้าสินค้าหน้าร้านของ WooCommerce
- วิธีการจัดลำดับหมวดหมู่หน้าร้านค้า ธีมหน้าร้าน WooCommerce
- วิธีการย้ายราคา WooCommerce หน้าร้าน Hooks
- วิธีเพิ่ม WooCommerce Checkout Default Country
- วิธีลบผลิตภัณฑ์ที่เกี่ยวข้องใน WooCommerce ใน 3 ตัวเลือกง่ายๆ
- วิธีเพิ่มสินค้าหลังจากตั้งค่าหน้าร้าน [คู่มือสำหรับผู้เริ่มต้น]
- วิธีซ่อนคำอธิบายผลิตภัณฑ์ หัวเรื่อง WooCommerce
- วิธีเปลี่ยนข้อความใส่รถเข็น คู่มือ WooCommerce พร้อมตัวอย่าง
- ลบหมวดหมู่ออกจากหน้าผลิตภัณฑ์ WooCommerce ใน 2 ตัวเลือกง่ายๆ
- WooCommerce Hooks List » ทั่วโลก, รถเข็น, ชำระเงิน, สินค้า
- วิธีตรวจสอบว่าเป็นหน้าชำระเงินหรือไม่ WooCommerce
- วิธีรับรายละเอียดผลิตภัณฑ์และแสดง WooCommerce
- วิธีเพิ่มฟิลด์ที่ซ่อนอยู่ในหน้าชำระเงินของ WooCommerce