วิธีปรับแต่งหน้ารถเข็น WooCommerce

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

ก่อนที่เราจะได้เห็นวิธีการดังกล่าว เรามาดูที่หน้ารถเข็นเริ่มต้นกันก่อน และทำความเข้าใจว่าทำไมคุณจึงควรปรับแต่งหน้ารถเข็นตั้งแต่แรก มาทำความเข้าใจกันดีกว่าว่าคุณปรับแต่งอะไรได้บ้างและจะเป็นประโยชน์ต่อร้านค้าของคุณอย่างไร

ทำไมต้องแก้ไขหน้ารถเข็น?

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

หน้ารถเข็นเป็นสิ่งสำคัญในการตัดสินใจซื้อของลูกค้า เป็นที่ที่นักช้อปตรวจสอบคำสั่งซื้อของตนก่อนทำการสั่งซื้อให้เสร็จสิ้น ดังนั้น หน้ารถเข็นของคุณควรเสนอมูลค่าเพิ่มให้กับลูกค้าเพื่อเพิ่มโอกาสในการแปลง

การละทิ้งรถเข็นสินค้าเป็นหนึ่งในปัญหาหลักของร้านค้าออนไลน์ เนื่องจากผู้ใช้ประมาณ 80% ละทิ้งรถเข็นของตน นั่นเป็นเหตุผลที่คุณควรให้ความสนใจเป็นพิเศษกับหน้าตะกร้าสินค้าของคุณ แม้แต่การปรับปรุงเล็กน้อยในการละทิ้งรถเข็นของคุณก็สามารถส่งผลกระทบอย่างมากต่อยอดขายของคุณ

โดยค่าเริ่มต้น ลักษณะและการทำงานของหน้ารถเข็นจะขึ้นอยู่กับธีมที่ใช้งานอยู่ของคุณ ตัวอย่างเช่น นี่คือหน้าตาของหน้ารถเข็นที่มีธีม Astra

และนี่คือรูปลักษณ์ของธีมเริ่มต้นของ Twenty-Twenty One

อย่างที่คุณเห็น รูปลักษณ์และความรู้สึกของหน้ารถเข็นจะแตกต่างกันอย่างมากในแต่ละธีม ยิ่งไปกว่านั้น หน้ารถเข็นเริ่มต้นนั้นค่อนข้างธรรมดา แม้ว่างานจะเสร็จลุล่วง แต่ก็ไม่มีฟังก์ชันพิเศษใดๆ พลาดโอกาสในการขายต่อเนื่อง ยื่นข้อเสนอพิเศษ และอื่นๆ

การปรับแต่งหน้าตะกร้าสินค้าทำให้คุณสามารถปรับปรุงประสบการณ์ผู้ใช้ของลูกค้าได้ คุณสามารถเพิ่มข้อความที่กำหนดเองสำหรับการอัปเดตที่สำคัญ แสดงผลิตภัณฑ์ที่เกี่ยวข้อง เพิ่มปุ่ม back-to-cart เปลี่ยนข้อความ Add to Cart และอื่นๆ อีกมากมาย สิ่งเหล่านี้มีส่วนช่วยในการปรับปรุงประสบการณ์ผู้ใช้ซึ่งส่งผลให้ลูกค้าพึงพอใจ

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

วิธีปรับแต่งหน้ารถเข็น WooCommerce

มีหลายวิธีในการปรับแต่งหน้าตะกร้าสินค้าในร้านค้า WooCommerce ของคุณ:

1. ด้วยบล็อก WooCommerce เริ่มต้น
2. การใช้ปลั๊กอิน
3. ด้วยตัวสร้างเพจ
4. โดยทางโปรแกรม

มาดูแต่ละวิธีกันดีกว่า เพื่อให้คุณได้เลือกวิธีที่ดีที่สุดสำหรับคุณ

1. บล็อก WooCommerce เริ่มต้น

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

1.1) เพิ่มผลิตภัณฑ์ทั้งหมด บล็อก

ไปที่ หน้าตะกร้าสินค้า ของคุณหรือสร้างหน้าใหม่ใน WordPress คลิกที่ไอคอน + ที่ด้านบนซ้ายเพื่อแสดงชุดบล็อกทั้งหมดที่มีให้สำหรับตัวแก้ไข Gutenberg จากนั้นเลื่อนลงไปที่ส่วน WooCommerce Blocks และค้นหาบล็อก All Products คลิกและลากไปยังพื้นที่หน้า และจะเพิ่มบล็อกลงในหน้าของคุณ

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

1.2) เพิ่มผลิตภัณฑ์ใหม่ล่าสุด Block

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

1.3) เพิ่มสินค้าที่คัดสรร

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

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

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

ในทำนองเดียวกัน คุณสามารถเพิ่มบล็อก WooCommerce อื่น ๆ ที่คุณต้องการได้ คุณสามารถไปที่บล็อกเดียวในทั้งหน้าหรือหลายบล็อกในหน้าเดียวกัน ความเป็นไปได้ไม่มีที่สิ้นสุด

เราได้เห็นแล้วว่าบล็อก WooCommerce เริ่มต้นสามารถช่วยคุณปรับแต่งหน้ารถได้อย่างไร ตอนนี้ ไปที่ส่วนถัดไปและดูว่าเราสามารถปรับแต่งหน้าตะกร้าสินค้าโดยใช้ปลั๊กอินของบุคคลที่สามได้อย่างไร

2. ปลั๊กอินสำหรับปรับแต่งหน้ารถเข็น

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

2.1) บล็อก WooCommerce

WooCommerce Blocks เป็นปลั๊กอินการเข้าถึงล่วงหน้าสำหรับบล็อก WooCommerce รุ่นทดลอง อนุญาตให้คุณลองใช้บล็อก WooCommerce ใหม่ก่อนที่จะเผยแพร่ในตัวแก้ไขบล็อกเริ่มต้น

ในขณะที่เขียนโพสต์นี้ ปลั๊กอินจะเพิ่มสองช่วงตึก: ตะกร้าสินค้าและการชำระเงิน เมื่อเปิดใช้งานบล็อกของ WooCommerce บล็อกรถเข็นและการชำระเงินจะถูกเพิ่มลงในเครื่องมือแก้ไขบล็อกโดยอัตโนมัติ และคุณสามารถใช้บล็อกดังกล่าวได้ในลักษณะเดียวกับบล็อกอื่นๆ

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

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

นอกจากนี้ คุณสามารถวางบล็อคจำนวนมากในหน้าเดียวข้างรถเข็นหรือหน้าชำระเงิน ซึ่งก่อนหน้านี้ไม่สามารถทำได้ สิ่งนี้ให้ความยืดหยุ่นแก่คุณอย่างมาก และช่วยให้คุณออกแบบหน้าตะกร้าสินค้าได้ตามที่คุณต้องการ

ขณะเพิ่มบล็อกเหล่านี้ คุณอาจได้รับคำเตือนเกี่ยวกับความเข้ากันได้ซึ่งระบุว่าปลั๊กอินอาจมีปัญหาความเข้ากันได้กับปลั๊กอินหรือส่วนขยายอื่นๆ เนื่องจากบางช่วงอยู่ในช่วงทดลองและอยู่ระหว่างการพัฒนา ดังนั้น จึงควรใช้เพื่อทดลองใช้คุณสมบัติใหม่เท่านั้น ไม่ควรใช้ในเวอร์ชันที่ใช้งานจริง พวกเขาจะเปิดตัวเป็นบล็อก WooCommerce เริ่มต้นเมื่อมีเสถียรภาพ

คุณสมบัติ

• การทดลองกับบล็อกใหม่สำหรับวัตถุประสงค์ในการทดสอบ
• ลองรถเข็นและชำระเงินบล็อก
• รายงานจุดบกพร่องและข้อผิดพลาดหากพบ

ราคา

นี่เป็นปลั๊กอินฟรี

หากคุณต้องการลองใช้ปลั๊กอินเพิ่มเติมเพื่อแก้ไขหน้ารถเข็น ให้ดูที่ส่วนอื่นๆ อีกสองส่วนต่อไปนี้:

2.2) StoreCustomizer

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

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

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

สุดท้าย ตัวเลือกทั้งหมดจะรวมเข้ากับเครื่องมือปรับแต่งธีมได้อย่างสะดวก ส่งผลให้การปรับแต่งร้านค้า WooCommerce เป็นไปอย่างราบรื่นและไม่ลำบาก

คุณสมบัติ

• ทั้งหมดในปลั๊กอินเดียวเพื่อปรับแต่ง WooCommerce Store ของคุณ
• ปรับแต่งหน้าสินค้า หน้าร้านค้า หน้าบัญชี หน้าตะกร้าสินค้า และการชำระเงิน
• เปลี่ยนดีไซน์ร้านได้ตามใจคุณ
• เพิ่มคุณสมบัติและฟังก์ชันพิเศษให้กับร้านค้าของคุณโดยไม่ต้องเขียนโค้ดใดๆ
• เข้าถึงได้ง่ายผ่านเครื่องมือปรับแต่งธีม ซึ่งทำให้ปรับแต่งได้ง่าย
• น้ำหนักเบามากและเพิ่มเฉพาะโค้ดที่จำเป็นเท่านั้น

ราคา

นี่คือปลั๊กอิน freemium ซึ่งหมายความว่ามีทั้งเวอร์ชันฟรีและพรีเมียม แม้ว่าเวอร์ชันฟรีจะมีตัวเลือกการปรับแต่งที่เหมาะสม แต่แผนพรีเมียมเริ่มต้นที่ 49 USD ต่อปีสำหรับไซต์เดียว และมอบประสบการณ์การปรับแต่งขั้นสูงแก่คุณ ซึ่งรวมถึงการอัปเดตและการสนับสนุนหนึ่งปี

2.3) ปลั๊กอิน WooCommerce Fast Cart

WooCommerce Fast Cart ออกแบบมาเพื่อเร่งกระบวนการจัดซื้อสำหรับผู้บริโภค แทนที่จะมีตะกร้าสินค้าและหน้าชำระเงินแยกกัน คุณสามารถใช้ปลั๊กอินเพื่อสร้างรถเข็นแบบผุดขึ้นและหน้าชำระเงินได้ นอกจากนี้ คุณสามารถข้ามหน้าตะกร้าสินค้าทั้งหมดและดำเนินการชำระเงินได้โดยตรง

ทั้งหน้าป๊อปอัปตะกร้าสินค้าและการชำระเงินสามารถกำหนดเองได้อย่างสมบูรณ์ คุณสามารถปรับเปลี่ยนรูปแบบตัวอักษรและสีให้เข้ากับธีมของเว็บไซต์ของคุณได้ คุณยังสามารถปรับตำแหน่งของปุ่มและปรับแต่งรูปแบบรถเข็นได้อีกด้วย

นอกจากนี้ คุณสามารถใช้คูปองจากหน้าตะกร้าสินค้า และใช้ตะกร้าสินค้าแบบป๊อปอัปเพื่อแสดงผลิตภัณฑ์ที่เกี่ยวข้องโดยเปิดใช้งานการซื้อต่อเนื่อง สุดท้าย ปลั๊กอินนี้มีน้ำหนักเบามากและได้รับการปรับแต่งมาอย่างดี และสนับสนุนช่องทางการชำระเงินที่ใช้กันอย่างแพร่หลาย เช่น PayPal, Stripe และ Amazon

คุณสมบัติ

• เพิ่มรถเข็นแบบผุดขึ้นและหน้าชำระเงินสำหรับการแปลงแบบทันที
• ตั้งค่าเฉพาะรถเข็นหรือชำระเงินหรือทั้งสองหน้าในป๊อปอัป
• ปรับแต่งได้สูง
• น้ำหนักเบาและปรับให้เหมาะสม
• ใช้งานได้กับเกตเวย์การชำระเงินยอดนิยมทั้งหมด เช่น PayPal, stripe, amazon

ราคา

นี่คือปลั๊กอินพรีเมียมที่มีค่าใช้จ่าย 79 USD ต่อปีสำหรับไซต์เดียว คุณยังจะได้รับการรับประกันคืนเงินภายใน 30 วัน

ในส่วนนี้ เราได้เห็นปลั๊กอินที่ดีที่สุดในการปรับแต่งหน้ารถเข็น WooCommerce มาดูการปรับแต่งบางอย่างที่เราสามารถทำได้ สำหรับการสาธิต เราจะใช้ปลั๊กอิน StoreCustomizer มาเริ่มกันเลย.

ปรับแต่งหน้ารถเข็นโดยใช้ StoreCustomizer

StoreCustomizer เป็นปลั๊กอินที่มีคุณสมบัติหลากหลายที่ให้คุณปรับแต่งร้านค้า WooCommerce ของคุณได้เกือบทุกด้าน ในส่วนก่อนหน้านี้ เราได้พิจารณาคุณลักษณะและฟังก์ชันของปลั๊กอินแล้ว ตอนนี้เรามาดูกันว่าคุณสามารถใช้ StoreCustomizer เพื่อปรับแต่งหน้าตะกร้าสินค้าได้อย่างไร

ติดตั้งและเปิดใช้งาน Plugin

ขั้นแรก ไปที่ WordPress Admin Dashboard และไปที่ Plugins > Add new ค้นหาปลั๊กอิน StoreCustomizer คลิกปุ่ม ติดตั้ง ทันที แล้วเปิดใช้งาน

ปรับแต่งหน้ารถเข็น

เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่ ลักษณะที่ ปรากฏ > ปรับแต่ง เพื่อไปที่เครื่องมือปรับแต่งธีม

StoreCustomizer ฝังเครื่องมือปรับแต่งและคุณสมบัติในเครื่องมือปรับแต่งธีม เพียงไปที่ StoreCustomizer > Cart Page จากเมนูปรับแต่งธีม แล้วคุณจะพบตัวเลือกทั้งหมดเพื่อแก้ไขหน้ารถเข็น

การปรับแต่งขั้นพื้นฐาน

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

เพิ่มปุ่มกลับไปที่ร้านค้า

ปุ่ม Back-to-shop ช่วยให้ผู้ใช้สามารถกลับไปที่หน้าร้านค้าได้หากต้องการเพิ่มสินค้าลงในรถเข็น เป็นความคิดที่ดีที่จะเพิ่มปุ่มนั้นเนื่องจากจะช่วยให้ลูกค้าได้รับประสบการณ์การช็อปปิ้งที่ดีขึ้น

StoreCutomizer ให้คุณเพิ่มปุ่มกลับไปที่ร้านค้าในหน้าตะกร้าสินค้าของคุณ และเปลี่ยนการออกแบบและความรู้สึกของมันได้อย่างสมบูรณ์ นอกจากนี้ คุณสามารถเปลี่ยนข้อความของปุ่มและเชื่อมโยงไปยังหน้าใดก็ได้ สุดท้าย คุณยังสามารถเปลี่ยนตำแหน่งของปุ่มเพื่อให้เหมาะกับความต้องการของคุณได้

แสดงส่วนลด/จำนวนเงินที่บันทึก

แสดงส่วนลด/จำนวนเงินที่บันทึกช่วยให้คุณสามารถรวมบล็อกในส่วน ราคารวม ที่แสดงส่วนลดที่ผู้ใช้ได้รับจากการซื้อเมื่อใช้คูปองหรือระหว่างการขายทั่วทั้งร้าน คุณสามารถตั้งชื่อตามที่คุณต้องการรวมทั้งเปลี่ยนสีพื้นหลังและแบบอักษรได้

Cross-Sells และ Cart Totals

คุณยังสามารถแสดงสินค้าที่เกี่ยวข้องหรือแนะนำบนหน้าตะกร้าสินค้า โดยปกติ สินค้าเหล่านี้มีความเชื่อมโยงอย่างใกล้ชิดกับสินค้าในรถเข็น ดังนั้นผู้ใช้จึงมีแนวโน้มที่จะเพิ่มสินค้าลงในรถเข็น ซึ่งจะช่วยเพิ่มยอดขายของคุณได้

เมื่อใช้ปลั๊กอิน StoreCustomizer คุณสามารถเลือกจำนวนการขายต่อเนื่องที่จะแสดงและสินค้าที่จะแสดงต่อแถวได้ คุณมีตัวเลือกในการย้ายส่วนขายต่อเนื่องด้านล่างยอดรวมในรถเข็นหรือปล่อยให้เป็นค่าเริ่มต้น สุดท้าย คุณสามารถแก้ไขชื่อ cross-sells หรือตัดส่วน cross-sell ทั้งหมดออกได้หากต้องการ

นอกเหนือจากการขายต่อเนื่อง คุณสามารถเปลี่ยนส่วนหัวของส่วนยอดรวมรถเข็นได้

แก้ไขหน้ารถเข็นเปล่า

หน้า Empty Cart เริ่มต้นจะแสดงข้อความแจ้งผู้ใช้ว่าตะกร้าสินค้าว่างเปล่า StoreCustomizer ช่วยให้คุณสร้างข้อความที่กำหนดเองเพื่อเชิญผู้ใช้ให้สำรวจร้านค้า

คุณยังสามารถรวมปุ่ม กลับไปที่ร้านค้า เพื่อเปลี่ยนเส้นทางลูกค้าไปยังร้านค้า คุณสามารถปรับแต่งการออกแบบและความรู้สึกของปุ่มได้ทั้งหมด ซึ่งรวมถึงสี แบบอักษร และข้อความของปุ่ม

ปรับแต่งตารางรถเข็นและดำเนินการชำระเงินปุ่ม

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

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

3. ด้วยตัวสร้างเพจ

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

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

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

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

ตัวอย่างเช่น Elementor มีบล็อกที่แตกต่างกัน 22 บล็อกสำหรับ WooCommerce ที่คุณสามารถใช้ได้ อย่างไรก็ตาม เป็นมูลค่าการกล่าวขวัญว่าบล็อก WooCommerce ใน Elementor มีเฉพาะในรุ่น Pro เท่านั้น

ในกรณีของ Divi คุณสามารถเข้าถึงบล็อก WooCommerce ได้ 17 บล็อก Divi เป็นเครื่องมือสร้างเพจระดับพรีเมียม ดังนั้นคุณจะต้องจ่ายเงินเพื่อเข้าถึงฟีเจอร์เหล่านี้

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

4. โดยทางโปรแกรม

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

หลังจากที่คุณกำหนดค่าธีมลูกแล้ว ให้ไปที่ WP Admin Dashboard > ลักษณะที่ปรากฏ > ตัวแก้ไขธีม ที่นี่ คุณสามารถเพิ่มข้อมูลโค้ดที่กำหนดเองได้ที่ส่วนท้ายของไฟล์ functions.php ของธีมย่อยของคุณ

ตัวอย่างโค้ด ปลั๊กอินเป็นอีกตัวเลือกหนึ่งในการเพิ่มข้อมูลโค้ดในไซต์ของคุณ คุณสามารถติดตั้งปลั๊กอินจากที่เก็บ WordPress เพื่อเพิ่มตัวอย่างในเว็บไซต์ของคุณ แม้ว่า Code Snippets คุณไม่จำเป็นต้องมีธีมย่อย แต่เราแนะนำให้มีเสมอ

ตอนนี้ มาดูข้อมูลโค้ดบางส่วนที่คุณสามารถใช้เพื่อปรับแต่งหน้ารถเข็น WooCommerce ของคุณ

4.1) ข้อความที่กำหนดเองบนหน้ารถเข็น

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

 // เพิ่มข้อความที่กำหนดเองไปยังหน้ารถเข็น WooCommerce
add_action( 'woocommerce_before_cart_table', 'shop_message', 20 );
ฟังก์ชั่น shop_message() {
echo '<p class="woocommerce-message">นี่คือข้อความที่ฉันกำหนดเอง</p>'; // เปลี่ยนข้อความนี้
}

เสร็จแล้ว! นี้จะแสดงข้อความที่กำหนดเองบนหน้ารถเข็นของคุณ

4.2) กำหนดเนื้อหาไปยังหน้ารถเข็นเปล่า

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

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

 // เพิ่มเนื้อหาที่กำหนดเองไปยังหน้ารถเข็นว่างของ Woocommerce

add_action( 'woocommerce_cart_is_empty', 'empty_cart_custom_content' );
ฟังก์ชั่น empty_cart_custom_content () {
echo '<h4>คุณยังไม่ได้เพิ่มรายการใดๆ ลงในรถเข็นของคุณ ชำระเงินสินค้าคงคลังของเราและคุณจะรักผลิตภัณฑ์ของเรา</h4>'; //แทนที่ข้อความด้วยmesasge .ของคุณเอง
เสียงสะท้อน do_shortcode('
 ');
} 

4.3) ปุ่มรถเข็นว่างในหน้ารถเข็น

แม้ว่าการให้ทางเลือกแก่ผู้ซื้อในการล้างตะกร้าสินค้าอาจดูไม่เป็นผล แต่ความจริงก็คือมันให้ประสบการณ์ที่ดีกว่ามาก ในกรณีดังกล่าว คุณสามารถใส่ปุ่ม Empty Cart ที่อนุญาตให้ผู้ใช้นำสินค้าทั้งหมดออกจากรถเข็นของตนได้

หากต้องการเพิ่มปุ่ม Empty Cart เพียงใช้ข้อมูลโค้ดต่อไปนี้

 // ปุ่ม "รถเข็นเปล่า" บนหน้ารถเข็น Woocommerce

add_action( 'woocommerce_cart_coupon', 'woocommerce_empty_cart_button' );
ฟังก์ชั่น woocommerce_empty_cart_button () {
echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button cart"
title="' . esc_attr( 'รถเข็นเปล่า', 'woocommerce' ) . '">' esc_html( 'รถเข็นเปล่า', 'woocommerce' ) '</a>';
}

add_action( 'wp_loaded', 'woocommerce_empty_cart_action', 20 );
ฟังก์ชั่น woocommerce_empty_cart_action () {
if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
WC()->cart->empty_cart();
$referer = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) ) : wc_get_cart_url();
wp_safe_redirect( ผู้อ้างอิง $ );
}
}

หากปุ่มไม่ได้แยกจากปุ่มตารางตะกร้าสินค้าอื่นๆ คุณอาจต้องเพิ่มปุ่มนี้ในเครื่องมือ ปรับแต่ง > CSS เพิ่มเติม

 a.button.cart {
ระยะขอบซ้าย: 10px;
} 

เราได้เห็นข้อมูลโค้ดบางส่วนในการแก้ไขหน้ารถเข็นของคุณ คุณสามารถใช้ข้อมูลโค้ดเหล่านี้เป็นพื้นฐานและนำไปปรับใช้ได้ คุณสามารถปรับแต่งหน้าตะกร้าสินค้าให้เป็นแบบส่วนตัวได้อย่างสมบูรณ์และเพิ่มยอดขายของคุณ

จนถึงตอนนี้ เราได้เห็นวิธีการต่างๆ ในการปรับแต่งหน้ารถเข็น WooCommere: ด้วยตัวเลือกเริ่มต้น พร้อมด้วยปลั๊กอิน ตัวสร้างหน้า และแบบเป็นโปรแกรม

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

วิธีข้ามหน้ารถเข็น

ร้านค้าบางแห่งต้องการข้ามหน้าตะกร้าสินค้าและให้ลูกค้าตรวจสอบและชำระเงินสำหรับการสั่งซื้อในหน้าชำระเงิน ซึ่งจะทำให้ขั้นตอนที่ลูกค้าต้องชำระเงินสั้นลง ทำให้ประสบการณ์การช็อปปิ้งเร็วขึ้น

หากต้องการข้ามหน้ารถเข็น ไปที่ WP Admin Dashboard และไปที่ WooCommerce > Settings ใต้แท็บ ผลิตภัณฑ์ เลือกการตั้งค่า ทั่วไป ในเมนูย่อยและทำเครื่องหมายที่ตัวเลือก "เปลี่ยนเส้นทางไปยังหน้าตะกร้าสินค้าหลังจากเพิ่มสำเร็จ" หลังจากนั้น อย่าลืมบันทึกการเปลี่ยนแปลง

จากนั้นไปที่แท็บ Advanced แล้วเลือก Page Setup เปลี่ยนหน้า รถเข็น เริ่มต้นเป็น ชำระเงิน และบันทึกการเปลี่ยนแปลง

เสร็จแล้ว! ตอนนี้คุณสามารถไปที่ส่วนหน้าของเว็บไซต์ของคุณและตรวจสอบได้ด้วยตนเอง

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

โบนัส: วิธีเปลี่ยนดำเนินการชำระเงินข้อความ

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

ในบทความนี้ เราได้อธิบายวิธีแก้ไขปุ่มและข้อความ " ดำเนินการชำระเงิน " โดยใช้ปลั๊กอิน StoreCustomizer ในส่วนนี้ เราจะเห็นวิธีอื่นในการเปลี่ยนข้อความ "ดำเนินการชำระเงิน" โดยใช้ข้อมูลโค้ดที่กำหนดเอง

ตัวอย่างเช่น มาดูข้อมูลโค้ดต่อไปนี้เพื่อแทนที่ปุ่ม " ดำเนินการชำระเงิน " ด้วย "พาฉันไปชำระเงิน" เพียงเปลี่ยนข้อความ " พาฉันไปชำระเงิน " เป็นอะไรก็ได้ที่คุณต้องการ

 //เปลี่ยนขั้นตอนการชำระเงินเป็นข้อความ

remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout',20);
add_action( 'woocommerce_proceed_to_checkout', 'custom_button_proceed_to_checkout',20);

ฟังก์ชั่น custom_button_proceed_to_checkout () {
echo '<a href="'.esc_url(wc_get_checkout_url()).'" class="checkout-button button alt wc-forward">'
__("พาฉันไปชำระเงิน", "woocommerce") '</a>'; //แทนที่ "พาฉันไปชำระเงิน" ด้วยข้อความของคุณ 

นั่นคือทั้งหมด! ขณะนี้ คุณสามารถเปลี่ยนข้อความ “ ดำเนินการชำระเงิน ” บนหน้ารถเข็นของคุณได้โดยใช้ข้อมูลโค้ดด้านบน อย่างไรก็ตาม มันมีอะไรมากกว่านั้น หากคุณต้องการข้อมูลเพิ่มเติม โปรดดูโพสต์เกี่ยวกับวิธีเปลี่ยนข้อความ "ดำเนินการชำระเงิน"

บทสรุป

สรุปแล้ว หน้ารถเข็นของคุณเป็นหนึ่งในหน้าที่สำคัญที่สุดในร้านค้าออนไลน์ของคุณ ดังนั้นคุณควรได้รับความสนใจอย่างเต็มที่ เป็นหน้าที่ลูกค้าของคุณตรวจสอบคำสั่งซื้อของตนก่อนทำธุรกรรมให้เสร็จสิ้น ดังนั้นจึงต้องมีการพิจารณาเป็นพิเศษ

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

ในบทความนี้ เราได้เห็นรายละเอียดเกี่ยวกับการปรับแต่งหน้ารถเข็น WooCommerce แล้ว เราเริ่มต้นด้วยบล็อก WooCommerce เริ่มต้นที่มาพร้อมกับตัวแก้ไขบล็อก จากนั้นเราก็ติดตามปลั๊กอิน WooCommerce Blocks โดยแนะนำบล็อกทดลองเพิ่มเติมอีกสองบล็อก จากนั้น เราได้เห็นปลั๊กอินที่ดีที่สุดบางตัวสำหรับปรับแต่งหน้าตะกร้าสินค้า และได้เห็นการสาธิตโดยใช้ปลั๊กอิน StoreCustomizer นอกจากนี้เรายังได้ดูเครื่องมือสร้างเพจบางตัวที่คุณสามารถทำได้เพื่อปรับแต่งหน้ารถเข็นให้เป็นส่วนตัว สุดท้าย เราได้ดูข้อมูลโค้ดบางส่วนที่ให้คุณควบคุมและมีความยืดหยุ่นมากขึ้นสำหรับค่ากำหนดการปรับแต่งของคุณ และให้คุณใช้ประโยชน์สูงสุดจากหน้าตะกร้าสินค้า

นอกเหนือจากการปรับแต่งหน้าตะกร้าสินค้าแล้ว เราได้เห็นวิธีข้ามหน้าตะกร้าสินค้าและวิธีเปลี่ยนข้อความ "ดำเนินการชำระเงิน" ทั้งโดยใช้ปลั๊กอินและโดยทางโปรแกรม

คุณเคยคิดที่จะปรับแต่งหน้ารถเข็น WooCommerce ของคุณหรือไม่? คุณต้องการปรับแต่งอะไร แจ้งให้เราทราบในความคิดเห็นด้านล่าง