วิธีสร้าง WooCommerce ปุ่ม Add to Cart โดย Product Id
เผยแพร่แล้ว: 2021-02-24
WiIt เป็นไปได้ที่จะสร้าง WooCommerce ปุ่มเพิ่มลงในรถเข็นตามรหัสผลิตภัณฑ์ และใช้ปุ่มบนแบบฟอร์ม วิดเจ็ต โพสต์หรือเพจ และแม้แต่บนเทมเพลต ตามหลักการแล้วปุ่มเพิ่มในรถเข็นของ WooCommerce สามารถปรับแต่งให้พอดีกับตัวเลือกที่กำหนดเองได้หลากหลาย
WooCommerce ปุ่ม Add to Cart ตามรหัสผลิตภัณฑ์
ในโพสต์ที่แล้ว ฉันอธิบายวิธีเปลี่ยนปุ่มเพิ่มในรถเข็นของ WooCommerce เป็นลิงก์และวิธี เปลี่ยนปุ่มเพิ่มในรถเข็นของ WooCommerce เพื่ออ่านเพิ่มเติม
นี่คือบทช่วยสอนก่อนหน้าอื่น ๆ ที่สามารถช่วยให้คุณเรียนรู้เพิ่มเติมเกี่ยวกับวิธีปรับแต่งปุ่มเพิ่มในรถเข็นของ WooCommerce:
- วิธีแทนที่ปุ่มหยิบใส่ตะกร้าด้วยลิงก์ WooCommerce
- วิธีซ่อนปุ่มอ่านเพิ่มเติมและใส่ในรถเข็น WooCommerce
- วิธีเปลี่ยนข้อความปุ่ม Add to Cart ใน WooCommerce Shop Page
- วิธีเปลี่ยนข้อความใส่รถเข็น คู่มือ WooCommerce พร้อมตัวอย่าง
- วิธีเพิ่มสินค้าลงรถเข็นโดยทางโปรแกรมใน WooCommerce
- วิธีการเปลี่ยนประกาศ 'ใส่ในรถเข็น' ของ WooCommerce
- วิธีซ่อนราคาและเพิ่มลงในรถเข็นสำหรับผู้ใช้ที่ออกจากระบบ WooCommerce
ดังที่คุณเห็นจากรายการบทช่วยสอนด้านบน มีหลายวิธีที่คุณสามารถปรับแต่งปุ่มเพิ่มในรถเข็นของ WooCommerce เพื่อช่วยให้คุณบรรลุรูปแบบหรือการออกแบบเนื้อหาที่แตกต่างกัน
ตัวอย่างเช่น เมื่อคุณต้องการสร้างตารางราคา WooCommerce คุณอาจจำเป็นต้องสร้างปุ่มหยิบใส่ตะกร้าที่คุณสามารถเพิ่มลงในปุ่มคำกระตุ้นการตัดสินใจในตารางราคาได้
สร้างผลิตภัณฑ์อย่างง่าย WooCommerce ปุ่ม Add to Cart โดย Product Id
ในการสร้างปุ่มเพิ่มสินค้าในตะกร้าสินค้าของ WooCommerce โดยใช้รหัสผลิตภัณฑ์ คุณจำเป็นต้องทราบรหัสผลิตภัณฑ์ของผลิตภัณฑ์เฉพาะที่คุณต้องการสร้างปุ่มเพิ่มลงในตะกร้าสินค้า รหัสผลิตภัณฑ์สามารถพบได้ง่ายในหน้าภาพรวมผลิตภัณฑ์ทั้งหมดตามที่อธิบายไว้ในบทช่วยสอนนี้ – วิธีรับรหัสผลิตภัณฑ์ WooCommerce
ลิงค์ หยิบใส่ตะกร้า
ขณะนี้ คุณสามารถสร้าง URL ตะกร้าสินค้า ซึ่งคุณจะไม่เพิ่มลงในรหัสปุ่มในตำแหน่งที่คุณต้องการแสดงปุ่ม ในกรณีนี้ คุณสามารถสร้างผลิตภัณฑ์อย่างง่าย ลิงค์ หยิบใส่ตะกร้า ตามรหัสด้านล่าง:
https://example.com/?add-to-cart=840
URL ของเว็บไซต์ของคุณควรแทนที่ส่วน example.com ของ URL และรหัสผลิตภัณฑ์เฉพาะควรแทนที่รหัสผลิตภัณฑ์ 840 ที่ใช้ในตัวอย่างด้านบน
คุณสามารถเพิ่มสิ่งนี้ในโค้ดปุ่ม HTML ตามโค้ดด้านล่าง:
สร้างผลิตภัณฑ์อย่างง่ายด้วยปริมาณ WooCommerce ปุ่ม Add to Cart โดย Product Id
คุณยังสามารถเพิ่มปริมาณลงใน URL ที่เพิ่มในรถเข็น และคุณสามารถทำได้โดยใช้พารามิเตอร์ URL ต่างๆ ที่ใช้เพื่อเพิ่มตรรกะให้กับ URL
ในกรณีนี้ คุณสามารถขยายรหัสที่เราสร้างในขั้นตอนข้างต้น และสร้างผลิตภัณฑ์อย่างง่าย WooCommerce ปุ่มหยิบใส่ตะกร้าตาม ID ผลิตภัณฑ์ที่มีปริมาณ 2 ดังต่อไปนี้:
https://example.com/?add-to-cart=840&quantity=2
อย่างที่คุณเห็น เราได้เพิ่มเครื่องหมายและและปริมาณของคำ และเท่ากับ 2 จำนวนของสินค้าที่เราต้องการใส่ในรถเข็นเมื่อมีการคลิกปุ่มของผลิตภัณฑ์เดียวกัน
หากต้องการเพิ่ม URL นี้ในโค้ด HTML และสร้างปุ่มเพิ่มในรถเข็นของ WooCommerce ตามรหัสผลิตภัณฑ์ที่มีจำนวน คุณควรใช้รหัสด้านล่าง:
สร้าง WooCommerce ปุ่ม Add to Cart ตามรหัสผลิตภัณฑ์พร้อมเปลี่ยนเส้นทางไปยัง Cart
เพื่อให้ลูกค้าร้านค้า WooCommerce ของคุณนำทางไซต์ของคุณได้ง่ายขึ้น การสร้างการเปลี่ยนเส้นทางเป็นสิ่งสำคัญมาก ในอดีต ฉันได้เน้นถึงวิธีการต่างๆ มากมายในการสร้างการเปลี่ยนเส้นทางของ WooCommerce
โดยเฉพาะอย่างยิ่ง ฉันได้แชร์ในโพสต์บล็อกเหล่านี้ – WooCommerce สร้างการเปลี่ยนเส้นทางหลังจากชำระเงิน และ เปลี่ยนเส้นทาง WooCommerce หลังจากออกจากระบบ และแม้กระทั่งสร้างการ เปลี่ยนเส้นทาง WooCommerce หลังจากชำระเงินปลั๊กอิน เพื่อช่วยให้คุณเปลี่ยนเส้นทางหลังจากชำระเงิน
WooCommerce เปลี่ยนเส้นทางไปที่รถเข็นหลังจากใส่ในรถเข็น
คุณยังสามารถสร้างการเปลี่ยนเส้นทางไปยังตะกร้าสินค้าด้วยปุ่มเพิ่มในรถเข็นของ WooCommerce ตามรหัสผลิตภัณฑ์ คุณสามารถทำได้โดยเปลี่ยนรหัสที่ฉันแชร์ในขั้นตอนด้านบนเป็นดังนี้:
https://example.com/cart/?add-to-cart=840
อย่างที่คุณเห็น เราได้เพิ่ม ตะกร้าสินค้า ลงใน URL เพื่อให้แน่ใจว่าผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังรถเข็นหลังจากที่พวกเขาเพิ่มสินค้าลงในตะกร้าแล้ว รหัสที่สมบูรณ์พร้อมรหัสปุ่ม HTML มีดังนี้:
WooCommerce เปลี่ยนเส้นทางไปยังการชำระเงินหลังจากหยิบลงรถเข็น
คุณยังสามารถสร้างการเปลี่ยนเส้นทางเพื่อชำระเงินด้วยปุ่มเพิ่มในรถเข็นของ WooCommerce ตามรหัสผลิตภัณฑ์ คุณสามารถทำได้โดยเปลี่ยนรหัสที่ฉันแชร์ในขั้นตอนโดยเพิ่มการ ชำระเงิน ใน URL ด้านบนเป็นดังนี้:
https://example.com/checkout/?add-to-cart=840
อย่างที่คุณเห็น เราได้เพิ่มการ ชำระเงินลง ใน URL เพื่อให้แน่ใจว่าผู้ใช้ถูกเปลี่ยนเส้นทางไปยังจุดชำระเงินหลังจากที่พวกเขาเพิ่มสินค้าลงในรถเข็น รหัสที่สมบูรณ์พร้อมรหัสปุ่ม HTML มีดังนี้:
บทสรุป
ในบทช่วยสอนนี้ เราได้เน้นถึงวิธีต่างๆ ที่คุณสามารถสร้างปุ่มเพิ่มลงในตะกร้าสินค้าของ WooCommerce ตามรหัสผลิตภัณฑ์ นอกจากนี้เรายังได้เห็นวิธีการเพิ่มการเปลี่ยนเส้นทางไปยังปุ่มเพิ่มไปยังตะกร้าสินค้า ตลอดจนวิธีการเพิ่มปริมาณของผลิตภัณฑ์ในการเพิ่ม ไปที่ปุ่มรถเข็น
ฉันหวังว่าตอนนี้คุณสามารถสร้างปุ่มเพิ่มลงในตะกร้าสินค้า WooCommerce ตามรหัสผลิตภัณฑ์ และใช้ในตารางราคา แบบฟอร์ม และภายใน เทมเพลตของคุณ คุณยังสามารถปรับแต่งปุ่มหยิบใส่ตะกร้าเพิ่มเติมได้โดยใช้คลาสปุ่มที่ฉันเพิ่มลงในโค้ดด้านบน หากคุณยังคงปรับแต่งไซต์ของคุณ คุณสามารถได้รับประโยชน์จากแนวคิดที่ฉันแบ่งปันใน Ultimate WooCommerce Hide Guide
สำหรับผู้ใช้ WooCommerce ที่ติดตั้ง ธีมหน้าร้าน และต้องการปรับแต่งเพิ่มเติม ฉันได้แชร์คอลเลกชันที่ยอดเยี่ยมของ 80+ เคล็ดลับการ ปรับแต่งธีมหน้าร้าน WooCommerce ที่จะแนะนำคุณเกี่ยวกับวิธีสร้างรูปลักษณ์ที่กำหนดเองของไซต์ของคุณโดยใช้ธีม WooCommerce เริ่มต้น - หน้าร้าน .
บทความที่คล้ายกัน
- วิธีสร้างฟิลด์การชำระเงินตามเงื่อนไขของ WooCommerce
- วิธีสร้างรหัสย่อการเข้าสู่ระบบ WooCommerce ออกจากระบบ
- วิธีการเปลี่ยนปุ่มสีธีมหน้าร้าน
- วิธีรับชื่อผลิตภัณฑ์ WooCommerce
- วิธีซ่อนราคาและเพิ่มลงในรถเข็นสำหรับผู้ใช้ที่ออกจากระบบ WooCommerce
- วิธีซ่อนปุ่มอัปเดตหน้ารถเข็น WooCommerce
- วิธีแทนที่ปุ่มหยิบใส่ตะกร้าด้วยลิงก์ WooCommerce
- วิธีซ่อนราคาถ้าเป็นศูนย์ใน WooCommerce
- วิธีสร้างธีมลูกหน้าร้าน WooCommerce [คู่มือฉบับสมบูรณ์]
- วิธีซ่อนตัวเลือกผู้ดูแลระบบ WooCommerce Marketing Hub
- วิธีรับรหัสผลิตภัณฑ์ในหน้าชำระเงินหรือหน้าสั่งซื้อใน WooCommerce
- วิธีรับรายละเอียดการสั่งซื้อหลังจากชำระเงินใน WooCommerce
- วิธีเปลี่ยนเส้นทางไปยังรถเข็นหลังจากเข้าสู่ระบบใน WooCommerce
- วิธีเพิ่ม WooCommerce เปลี่ยนเส้นทางหน้าบัญชีของฉัน
- ตะขอเปลี่ยนเส้นทางการเข้าสู่ระบบ WooCommerce อธิบายด้วยตัวอย่าง
- วิธีปิดการใช้งานการชำระเงินชั่วคราวใน WooCommerce
- วิธีตั้งค่าบล็อกหน้าร้าน WooCommerce