อีคอมเมิร์ซแบบไทยๆ เมื่อผู้ใช้อยากแชทก่อนซื้อ

คนไทยนั้นชินกับการซื้อของในตลาด ที่ได้ “เจ๊าะแจ๊ะ” และ “ต่อรอง” กับผู้ขายก่อนซื้อ ทำให้เราจะเห็นว่าหลายๆ ครั้ง แม้ร้านค้าจะลงข้อมูลรายละเอียดไว้แล้ว ก็ยังมีคนถามอยู่ดีว่า ราคาเท่าไหร่ มีสีอะไรบ้าง ฯลฯ

และพฤติกรรมนี้ ก็เลยกระทบมาถึงระบบอีคอมเมิร์ซด้วย ที่ลูกค้าส่วนใหญ่ถ้ายังไม่ชินกับระบบ จะไม่ค่อยใช้ Shopping Cart กัน อยากสั่งทาง Line หรือ Facebook Message มากกว่า

เลยมีคนขายของออนไลน์หลายคน สอบถามมาว่า

ถ้าอยากเปลี่ยนปุ่ม Add to Cart เป็นปุ่มที่กดแล้วแชทกับร้านค้า ต้องทำอย่างไร?

ตัวอย่างจากเว็บไซต์ Music Space (สร้างโดยธีม Seed)

บทความนี้ จะอธิบายเฉพาะคนที่ใช้ WordPress และ WooCommerce นะครับ

1. สร้างกล่องแชทเฟสบุค

ไปที่หน้า Page Plugin แล้ว

  1. กรอก url ของเพจของเรา
  2. ตรงช่อง Tabs ให้ใส่ messages เพื่อจะได้แสดงช่องแชทของเพจ
  3. กดปุ่ม Get Code
  4. เลือก IFrame
  5. ก๊อบปี้โค้ดไปใช้

2. นำไปซ่อนไว้ในหน้าเว็บ

ถ้าใช้ Seed ก็แนะนำให้ 1) ไปที่หน้าตั้งค่า -> วิดเจ็ต ใส่วิดเจ็ต Layout Builder ไว้ที่ Footbar แล้วสร้าง row โดยตั้งชื่อคลาส hide ตามรูป (ถ้างง ดู บทที่ 1-16 อีกรอบนะครับ)

2) เลือกวิดเจ็ต “ข้อความ” ตั้งชื่อ ID ว่า chat-box แล้วเอาโค้ดใส่ในกล่องนี้

หรือถ้าไม่ได้ใช้ Seed ก็ไปแก้ไฟล์ในธีม เช่น footer.php เอาโค้ดชุดนี้ไปแทรกก่อนบรรทัด </body>

3. ลงปลั๊กอินที่ไว้แสดงกล่อง lightbox

แนะนำปลั๊กอิน WP Featherlight – A Simple jQuery Lightbox เพราะขนาดเล็ก ประสิทธิภาพดี เอาไว้ใช้งานอื่นๆ ก็สะดวก (เช่น ไว้แสดงรูปในแกลอรี)

4. ทดลองสร้างปุ่มที่กดแล้วเรียกกล่องแชท

ถ้าเราไปอ่าน คู่มือของ Featherlight จะพบว่า แค่เพิ่มโค้ด data-featherlight=”#chat-box” เวลาคลิกก็จะเรียกกล่อง chat-box มาได้แล้ว ดังนั้น ลองเขียนบทความใหม่ แล้วใส่โค้ดนี้ดูก็ได้ครับ ถ้าพบว่าใช้งานได้แล้ว ก็ลบโพสต์ทิ้งไป

<a href="#" data-featherlight="#chat-box">สอบถามและสั่งซื้อสินค้า</a>

5. เพิ่มโค้ดเพื่อให้แสดงปุ่มแชทแทนปุ่ม Add to cart

ให้เพิ่มโค้ดนี้ไว้ที่ไฟล์ functions.php ของธีมที่ใช้อยู่ หรือถ้าไม่แน่ใจ ก็ใช้ปลั๊กอิน My Custom Functions แล้วเอาโค้ดไปแปะได้ครับ

// Remove Add to Cart buttons
add_action( 'init', 'seed_remove_add_to_cart_buttons' );
function seed_remove_add_to_cart_buttons() {
  remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
}
// Add Chat Box buttons
add_action( 'init', 'seed_add_chat_box_buttons' );
function seed_add_chat_box_buttons() {
  add_action( 'woocommerce_after_shop_loop_item', 'seed_chat_box', 10 );
  add_action( 'woocommerce_single_product_summary', 'seed_chat_box', 30 );
}
function seed_chat_box() {
  echo '<p><a class="button alt" data-featherlight="#chat-box" href="#">สอบถามและสั่งซื้อสินค้า</a></p>';
}

เสร็จ: ได้ปุ่มตามที่ต้องการ

อยากทดลองเว็บที่ใช้งานอยู่ ไปที่ หน้าสินค้าของเว็บ Music Space ก็ได้ครับ เว็บนี้ใช้ธีม Seed ซะด้วย 🙂

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


หมายเหตุ: คำถามผ่านเฟซบุคอาจมีการตกหล่น แนะนำให้ติดต่อผ่าน อินบ๊อกซ์ หรือ เว็บบอร์ด นะครับ

Copyright © 2016-2019. All rights reserved.