วิธีเพิ่ม WooCommerce Quick View โดยไม่ต้องใช้ปลั๊กอิน

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

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

แม้ว่า WooCommerce จะไม่มีตัวเลือก Quick View แบบเนทีฟ แต่คุณสามารถเพิ่มได้โดยใช้เครื่องมือของบุคคลที่สาม

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

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

1. ติดตั้งธีม Botiga WooCommerce

วิธีที่ง่ายที่สุดในการเพิ่มฟังก์ชัน Quick View ให้กับร้านค้าของคุณคือการใช้ธีม WooCommerce ที่มีคุณสมบัตินี้ เช่น ธีม Botiga ฟรีของเรา

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

ในการเริ่มต้น ให้ดาวน์โหลดธีมและติดตั้งจากเมนู ลักษณะที่ ปรากฏ > ธีม > เพิ่มใหม่ > อัปโหลดธีม :

หรือคุณสามารถไปที่ลักษณะที่ ปรากฏ > ธีม > เพิ่มใหม่ และพิมพ์ 'botiga' ลงในแถบค้นหา

เมื่อธีมปรากฏขึ้น ให้คลิกปุ่ม ติดตั้ง :

หลังจากติดตั้งธีมบนไซต์ของคุณแล้ว ให้คลิกปุ่ม เปิดใช้งาน

2. นำเข้าไซต์เริ่มต้น (ไม่บังคับ)

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

ปัจจุบัน Botiga มีเว็บไซต์เริ่มต้นฟรีหนึ่งแห่ง (ความงาม) และสี่แห่ง (เครื่องแต่งกาย เฟอร์นิเจอร์ เครื่องประดับ ผลิตภัณฑ์เดียว) ในบทช่วยสอนนี้ ฉันจะใช้การสาธิตความงามฟรี — คุณสามารถดูไซต์เริ่มต้นทั้งหมดได้ที่นี่

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

หากต้องการค้นหาไซต์เริ่มต้น ให้คลิกเมนู ลักษณะที่ ปรากฏ > ไซต์เริ่มต้น ในแดชบอร์ด WordPress ของคุณ

เลื่อนเคอร์เซอร์ไปเหนือเดโมที่คุณต้องการติดตั้ง แล้วคลิกปุ่ม ดูตัวอย่างเดโม เพื่อดูตัวอย่าง

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

โมดอล นำเข้าธีม จะแสดงปลั๊กอินและเนื้อหาที่จะนำเข้าเว็บไซต์ของคุณ

คุณมีตัวเลือกที่จะปฏิเสธการนำเข้าปลั๊กอินและเนื้อหาใดๆ ก็ได้ แต่ฉันขอแนะนำให้นำเข้าทุกอย่าง:

3. เปิดตัวปรับแต่ง

ขั้นตอนเบื้องต้นสิ้นสุดลงแล้ว ตอนนี้ฉันจะแสดงวิธีเพิ่มฟีเจอร์มุมมองด่วนของ WooCommerce ในร้านค้าของคุณ

ในพื้นที่ผู้ดูแลระบบ WordPress ของคุณ ให้ไปที่ลักษณะที่ ปรากฏ > ปรับแต่ง เพื่อเปิด Customizer ซึ่งคุณสามารถเข้าถึงฟังก์ชันการดูด่วนได้:

4. เปิดใช้งานปุ่มมุมมองด่วนสำหรับผลิตภัณฑ์ของคุณ

Customizer จะเปิดขึ้นทางด้านซ้ายของหน้าจอ Botiga มีตัวเลือกมากมายให้คุณเลือก

หากต้องการเข้าถึงฟีเจอร์มุมมองด่วน ให้ไปที่ WooCommerce > Product Catalog > General :

ในแท็บ ทั่วไป คุณควรเห็นตัวเลือก บัตรผลิตภัณฑ์ เลือกแล้วรายการจะขยาย:

ตอนนี้ เลื่อนลงไปที่ตัวเลือก Quick View

ดังที่คุณเห็นในภาพหน้าจอด้านล่าง ปุ่ม Quick View ถูกเปิดใช้งานบนไซต์ของคุณแล้ว:

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

เลื่อนเคอร์เซอร์ไปที่รูปภาพสินค้าใดๆ แล้วปุ่ม Quick View จะปรากฏขึ้น:

ปุ่ม Quick View จะปรากฏขึ้นเมื่อใดก็ตามที่กลุ่มผลิตภัณฑ์แสดงในหน้าเดียวกัน

ตัวอย่างเช่น ในการสาธิตความงาม ส่วน คอลเลกชันที่โดดเด่น ยังแสดงปุ่ม มุมมองด่วน สำหรับทุกผลิตภัณฑ์:

เนื่องจาก Botiga เป็นธีมที่ปรับเปลี่ยนตามอุปกรณ์ ปุ่ม Quick View จึงใช้งานได้บนมือถือเช่นกัน การแตะเบาๆ ที่รูปภาพผลิตภัณฑ์จะแสดง:

5. เลือกเค้าโครงสำหรับปุ่ม Quick View ของคุณ

คุณต้องสังเกตเห็นว่ามีตัวเลือกเลย์เอาต์ Quick View สามตัวเลือก:

อันแรกจะลบปุ่ม Quick View ออกจากไซต์ของคุณอย่างสมบูรณ์

ตัวเลือกที่สองแสดงปุ่มตรงกลางภาพสินค้า (เป็นการตั้งค่าเริ่มต้น):

และตัวเลือกที่สามจะแสดงปุ่ม Quick View ที่ด้านล่างของรูปภาพสินค้า:

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

6. เพิ่มหรือลบองค์ประกอบในกล่องมุมมองด่วน

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

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

คลิกที่ไอคอนรูปตาถัดจากองค์ประกอบที่คุณต้องการเพิ่ม และองค์ประกอบนั้นจะปรากฏในกล่องมุมมองด่วน

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

7. เพิ่มสินค้าในร้านค้าของคุณ

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

ปิด Customizer แล้วคลิก Products > Add New ในแถบด้านข้างซ้ายของพื้นที่ผู้ดูแลระบบของคุณ ตัวแก้ไขผลิตภัณฑ์จะปรากฏบนหน้าจอของคุณ

กรอกชื่อ คำอธิบาย ภาพผลิตภัณฑ์ แกลเลอรีผลิตภัณฑ์ ประเภทผลิตภัณฑ์ แท็กผลิตภัณฑ์ และฟิลด์ข้อมูลผลิตภัณฑ์/ข้อมูลเมตา:

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

อย่างไรก็ตาม ผู้ใช้สามารถเข้าถึงภาพที่เหลือได้โดยคลิกที่ไอคอนลูกศร:

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

เมื่อคุณพร้อม กดปุ่ม เผยแพร่ และสินค้าใหม่จะปรากฏบนหน้าร้านค้าของคุณ

บทสรุป

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

โชคดีที่ธีม WooCommerce คุณภาพสูงเช่น Botiga สามารถเติมเต็มช่องว่างนั้นได้ สิ่งที่คุณต้องทำคือติดตั้งและเปิดใช้งานธีม ไปที่ Customizer แล้วเลือกเค้าโครงมุมมองด่วน

นอกเหนือจากฟังก์ชันการดูด่วนแล้ว Botiga ยังมีฟีเจอร์อีคอมเมิร์ซที่มีประโยชน์มากมาย

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

หากต้องการดูว่า Botiga ทำอะไรให้คุณได้บ้าง ดาวน์โหลดธีมได้ฟรีหรือดูตัวอย่าง

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