สอน Woocommerce ให้ครบสูตร ทุกพื้นฐานการใช้งาน

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

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

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

เราจะเรียนรู้อะไรกันบ้าง ใน Series สอน Woocommerce ฟรี นี้ ?

1. หัวใจในการสร้างร้านค้าออนไลน์ ด้วย Woocommerce
2. การเริ่มต้นวางโครงสร้างร้านค้าออนไลน์
3. เรียนรู้และทำความเข้าใจในสินค้า 4 ประเภทหลัก ใน WooCommerce
4. เรียนรู้วิธีการรับชำระเงินใน Woocommerce ว่ามีตัวเลือกอะไรให้ใช้งานบ้าง
5. เรียนรู้ในการตกแต่งเว็บไซต์ขายของอย่างไรให้ดูดีและสะดวกต่อการเข้าใช้งาน
6. ปรับแต่งหน้าตา Checkout ของเราให้เป็นแบบตามใจ
7. การบริหารจัดการ Order และการดูยอดขายของเรา
8. การส่งเสริมการขายในการใช้ Coupon Code ใน WooCommerce ทำอย่างไร
9. Theme ที่ใช้สำหรับ WooCommerce ทั้งแบบฟรีและพรีเมียม มีอะไรบ้าง

เราจะได้อะไร จากการเรียนรู้ Woocommerce บ้าง ?

1. เข้าใจ หัวใจหลักในการทำเว็บขายของออนไลน์
2. เรียนรู้วิธีการสร้างเว็บขายของออนไลน์ ตั้งแต่เริ่มต้น
3. เข้าใจการทำงานของ Woocommerce และสามารถนำไปใช้งานได้
4. รู้วิธีการบริหารจัดการ ร้านค้าออนไลน์ เมื่อมียอดขาย
5. นำความรู้ไปต่อยอดทำเว็บไซต์ให้ขายของได้จริง

หัวใจหลักของ ร้านค้าออนไลน์ คือ อะไร ?

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

ความน่าเชื่อถือ ของร้านค้าออนไลน์ มีผลอย่างไร ?

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

แล้วเราจะสร้างความน่าเชื่อถือให้กับร้านค้าออนไลน์ได้อย่างไร ?

1. รูปลักษณ์ของเว็บไซต์ ถ้าดูดี การออกแบบสวยงาม ภาพชัด ก็มีชัยไปกว่าครึ่งครับ แต่ถ้ารูปลักษณ์ของเว็บไซต์ สีก็ไม่สวย ภาพไม่ชัด โอกาสที่เราจะขายของได้ก็ลดลงไปอีกครับ
2. เว็บไซต์ต้องให้ความรู้สึกปลอดภัย เช่น สิ่งที่เราควรจะมีเลยคือ https:// ซึ่งก็คือ คือโปรโตคอลการสื่อสารอินเทอร์เน็ตที่มีความปลอดภัยและเป็นส่วนตัวระหว่างที่ใช้เว็บไซต์ โดยตัว google เอง ก็ชอบครับ เว็บไซต์ไหนที่มีรูปกุญแจล็อกก็แสดงว่า ปลอดภัยนั่นเองครับ ส่วนเว็บไซต์ไหนที่ไม่ปลอดภัย ก็จะขึ้นเลยโชว์เลยว่า ไม่ปลอดภัย แบบนี้ไม่ดีครับ หรือเราอาจจะมีเครื่องหมาย trust mark ต่างๆ เช่น SSL Verify หรือว่าได้ Certificate มา เราก็เอามาวางไว้ที่เว็บไซต์ของเราได้ครับ
3. ภาพประกอบต้องชัดเจน โดยเฉพาะภาพประกอบที่ใช้เป็นภาพสินค้าหรือบริการของเรา ยิ่งชัดเจนเท่าไหร่ ลูกค้าก็จะยิ่งให้ความน่าเชื่อถือมากเท่านั้นครับ

WooCommerce ทำอะไรได้บ้าง ?

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

โมดูลที่ 1 การขายสินค้า เราสามารถขายสินค้าอะไรได้บ้าง ?

• Physical Product คือ สินค้าที่จับต้องได้
• Digital Product คือ สินค้าที่ดาวน์โหลดได้ เช่น E-book หรือ File ต่างๆ
• Affiliate Product คือ การแนะนำสินค้าหรือบริการ
• Dropship คือ การที่ให้ลูกค้า สั่งสินค้ามาที่เราก่อน จากนั้นเราจึงไปสั่งให้ผู้ผลิต ผลิตสินค้ามาและจัดส่งให้ลูกค้า พูดง่าย ๆ คือเราเป็นตัวกลาง โดยนำสินค้าจากผู้ผลิตไปขายนั่นเอง ซึ่งจริงๆ แล้วก็อาจจะเรียกได้ว่า Dropship นั้นอยู่ในกลุ่มเดียวกับ Physical Product ก็ว่าได้ครับ

โมดูลที่ 2 การรับชำระเงิน เราสามารถรับชำระเงินได้ทางใดบ้าง ?

• การใช้ Credit Card
• การใช้ Paypal ซึ่งก็จะมียี่ห้ออื่นด้วย เช่น Authorize.Net, 2checkout เป็นต้น
• การชำระเงินแบบ Offline ซึ่งเป็นที่นิยมในไทยมาก ก็คือ
  1) Bank Transfer คือ การโอนเงิน
  2) Cheque
  3) COD (Cash on Delivery) คือ การเก็บเงินปลายทางนั่นเองครับ

ซึ่งคนไทยกว่า 80% ก็นิยมใช้ Bank Transfer หรือการโอนเงินเป็นหลัก ดังนั้นในร้าน Woocommerce ที่ทำการขายสินค้าในไทย จะต้องมีการทำในส่วนของ Bank Transfer หรือว่าการโอนเงิน เพื่อไว้รับชำระเงินจากลูกค้าครับ

โมดูลที่ 3 การจัดการ Customers

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

โมดูลที่ 4 การบริหารการขาย

• การแจ้งเตือน คือ จะมีการแจ้งเตือนเราในทุกครั้งที่มีคนกดสั่งซื้อสินค้าเข้ามา หรือมีการส่ง E-mail ไปบอกลูกค้าว่า ทางร้านค้าได้รับคำสั่งซื้อแล้วก็ทำได้เช่นกันครับ
• การจัดการ Orders ซึ่งใน WooCommerce นี้ ก็จะมีสถานะรายการที่ค่อนข้างหลากหลาย ดังนี้ครับ
  1) ยังไม่ชำระเงิน
  2) กำลังดำเนินการ
  3) รายการเสร็จสมบูรณ์แล้ว
  4) ยกเลิกรายการสั่งซื้อสินค้า
  5) คืนเงิน
  ซึ่งสถานะเหล่านี้ เราสามารถที่จะทำการปรับเพื่อให้ลูกค้าได้เห็นสถานะของสินค้า ได้จากทาง Dashboard ในส่วนของ Order Status นั่นเองครับ

โมดูลที่ 5 การขนส่ง หรือ Shipping

• Shipping Rate คือ อัตราการขนส่ง
• Shipping Zone คือ ขอบเขตการขนส่ง
• Free Shipping คือ ส่งสินค้าให้ฟรี

โมดูลที่ 6 การส่งเสริมการขาย

• Store Discount คือ ส่วนลดแบบหักดิบ ผมชอบเรียกแบบนั้นครับ เพราะว่ามันคือ การที่เราใส่ส่วนลดลงไปในสินค้าเลย
• Coupon คือ ถ้ามี Code Coupon โค้ดลับ ก็สามารถนำมาใส่เพื่อรับส่วนลดได้เอง อีกทั้งเรายังสามารถสร้าง Code Coupon ใน WooCommerce ได้เลยครับ

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

ท่านสามารถดูคำอธิบาย แต่ละ Module อย่างละเอียดได้ที่ Video นี้เลยครับ

Checklist ก่อนจะสร้างเว็บขายของออนไลน์ เราต้องทำอะไรบ้าง ?

ก่อนจะมีร้านขายของออนไลน์เราต้องเตรียมตัวอย่างไร ? ซึ่งตรงนี้ผมได้ทำเป็น Checklist ก่อนการทำเว็บขายของออนไลน์ มาให้เรียบร้อยแล้วครับ สามารถไป Download ได้ที่ลิงค์นี้เลยครับ https://palamike.com/storechecks/ หลังจากที่ดาวน์โหลดมาแล้ว เราก็นำมาเช็คดู ว่าเรายังขาดอะไรบ้าง หรือยังมีอะไรที่ต้องทำอีกบ้าง เมื่อเราทำเรียบร้อยแล้ว เราก็จะไปเข้าสู่ Series ต่อไปกันครับ

เริ่มต้นวางโครงสร้างเว็บขายของออนไลน์

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

ผมได้ทำ Video ที่อธิบายการติดตั้ง WordPress บนเครื่องตัวเอง ทั้งใน Windows และ Mac ไว้อย่างละเอียด สามารถดูได้ผ่านช่องทางด้านล่างนี้เลยครับ

กลับสู่สารบัญ

และถ้าใครยังไม่เคยใช้ WordPress มาก่อน ผมแนะนำให้ลองอ่านบทความตรงนี้ก่อนครับ เพื่อทำความเข้าใจเรื่องวิธีการใช้ WordPress ก่อนไปทำการติดตั้ง Plugin WooCommerce ครับ

การติดตั้งปลั๊กอิน WooCommerce

ขั้นตอนที่เราจะเริ่มต่อไปนี้ จะเป็นขั้นตอนที่เกี่ยวกับร้านค้าออนไลน์ครับ เริ่มด้วยการติดตั้งปลั๊กอิน WooCommerce ซึ่งเป็น Plugin ฟรี ที่มีคนใช้มากกว่า 5,000,000 คน โดยเราจะค้นหาด้วย Keyword ว่า Woocommerce จากนั้นเราจะติดตั้งกันให้เรียบร้อย พร้อมกับลงข้อมูลตัวอย่างเพื่อที่จะได้เห็นภาพรวมว่า หน้าเว็บไซต์ของเราเป็นอย่างไรนั่นเองครับ

ให้เราไปที่เมนู Plugins แล้วก็ Add New ได้เลยครับ จากนั้นค้นหา Plugin ที่ต้องการ โดยใช้ Keyword ที่เราต้องการค้นหา WooCommerce จากนั้นคลิก Install Now เพื่อติดตั้ง Plugin

ผมได้ทำ Video ที่อธิบายการตั้งค่า WordPress เบื้องต้นหลังการติดตั้ง และวิดีโอการติดตั้ง WooCommerce โดยละเอียด เรียบร้อยแล้วครับ สามารถดูได้ผ่านช่องทางด้านล่างนี้เลยครับ

กลับสู่สารบัญ

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

ดังนั้นเมื่อเราเข้าสู่หน้าจอ Woocommerce เราจะเจอหน้าจอแรก ให้เรากด Yes Please ไปก่อน โดยเราก็ทำตามขั้นตอนไปเรื่อยๆ แต่ถ้าเราเจอว่า ให้ติดตั้ง Plugin เสริมเมื่อไหร่ เราไม่ต้องไปติดตั้งครับ เพราะการที่เราติดตั้ง plugin หลายอัน โดยที่เรายังไม่มีความจำเป็นที่จะใช้งานจะทำให้เว็บไซต์ของเราโหลดช้าหรือเกิดอาการหน่วงนั่นเองครับ

จากนั้น ระบบจะพาเราเข้าสู่หน้า Wizard โดยเริ่มจากกรอกข้อมูล Store based ซึ่งเป็นข้อมูลที่ตั้งของร้านเราให้ครบถ้วน ตรงนี้เราจะกรอกเป็นภาษาไทยลงไปก็ได้เหมือนกันครับ แต่หากใส่ไม่ครบมันจะคลิกไปต่อไม่ได้ เมื่อกรอกครบแล้ว กด Continue ได้เลย

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

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

จากนั้นก็จะเป็น Product Type ที่เราจะขายถ้าเรายังมือใหม่ ผมแนะนำว่าให้เลือกที่ 2 ตัวเลือกแรก ก็คือ
1) Physical Products เป็นสินค้าทั่วไป จับต้องได้
2) Downloads เช่น ไฟล์เสียง อีบุ๊ค ต่างๆ นั่นเองครับ
จากนั้นกด Continue ต่อครับ

Woocommerce Version นี้ จะมีการสอบถามเกี่ยวกับ Product หรือ Business ของเราเพิ่มเติม ซึ่งเราก็เลือกใส่ข้อมูลเบื้องต้นไป จากนั้นก็จะเจอว่าให้เราติดตั้ง Plugin เสริม ซึ่งถ้าเราไม่ใช้เราก็ไม่จำเป็นที่จะต้องติดตั้ง เพราะอย่างที่บอกไปครับว่า จะทำให้เว็บไซต์เราช้า ถ้าเราจะใช้เมื่อไหร่ เราสามารถติดตั้งภายหลังได้ครับ จากนั้นกด Continue ต่อครับ

*** หากใครที่ได้ติดตั้ง Woocommerce ไปแล้วก่อนหน้านี้ แล้วเราออกไปก่อนที่จะติดตั้งเสร็จ เราสามารถกลับไปที่หลังบ้าน หรือ Dashbord (หน้าควบคุม) จากนั้นเราคลิก Run the Setup Wizard เพื่อเข้าสู่โหมด การตั้งค่าพื้นฐาน WooCommerce อีกครั้ง

ติดตั้งธีมสำหรับ WooCommerce

จากนั้นจะเป็นในส่วนของ Theme สำหรับคนที่ใช้ WooCommerce ใหม่ๆ นั้น ผมเเนะนำ เป็นธีม Storefront ครับ เพราะเราจะได้เห็นว่า มี Feature อะไรบ้างใน WooCommerce ถ้าเราไปเลือก Theme ที่ไม่ Support WooCommerce อาจจะทำให้การ Support ไม่ดีหากกเราเป็นผู้ใช้ในระยะเริ่มต้น อาจจะทำให้เรางงได้ครับ

การ Set up ส่วนต่างๆ ให้กับเว็บขายของออนไลน์

หลังจากเราลงปลั๊กอินเรียบร้อย ตั้งค่าทั่วไปบางส่วนแล้ว สิ่งที่เราจะต้องทำการตั้งค่าหรือ Set up ต่อไป มีดังนี้

• การ Set up Payments หรือการจ่ายเงิน
• การ Set up products หรือการลงสินค้า
• การ Set up shipping หรือการจัดส่งสินค้า

การ Set up Payments หรือการจ่ายเงิน

หัวใจสำคัญที่สุดใน E-Commerce ก็คือ การ setup ในเรื่องของการจ่ายเงินนั่นเอง เราไป Set up ในเรื่องของ Payment ให้เรียบร้อยก่อนครับ เริ่มจากให้เราคลิกไปที่ Set up Payments

จากนั้นให้เราเลือกที่ Cash on delivery ไว้ก่อนครับ โดยทำการเปิดช่องทาง Offline ไว้ก่อนครับ จากนั้นกด Done หลังจากนี้เราจะมีบทเรียนเรื่องการ Set up ระบบ Payments อีกครั้งโดยละเอียดเลย เดี๋ยวเราจะไปดูกันตอนนั้นอีกครั้งครับ

การ Set up products หรือการลงสินค้า

เราสามารถเริ่มสร้าง Product ของเราเข้าไปใน Dashboard ของ Woocommerce โดยให้เราคลิกไปที่ Add my products ก่อนครับ

วิธีการ Add Product จะมีทั้งหมด 3 วิธี

1. Add manually
2. Import
3. Migrate

โดยเราจะเลือกที่วิธีการ Import กันครับ

ในการเลือก Import นี้ เราจะต้องมีไฟล์ Demo มาก่อน ซึ่งผมเตรียมไว้ให้แล้วครับ สามารถเข้าไปโหลดได้ที่ลิงค์นี้ครับ https://palamike.com/store-sample

แล้วเราจะเจอกับหน้า Download Sample Woocommerece Product ครับ จากนั้นให้เราคลิกที่ปุ่ม ดาวน์โหลด กดตรงนี้

เมื่อเรากดเข้าไปที่ link ตามรูปด้านบน เราจะเจอกับหน้าของ Google drive ลักษณะเป็นไฟล์ Excel เราก็กด Download ไฟล์ Excel ที่เป็นข้อมูลสำหรับ Product ลงมาครับ

เมื่อเราทำการ Download ไฟล์ลงมาแล้ว เรากลับไปที่หลังบ้านหน้าจอนี้อีกครั้งครับ รอบนี้ให้เรา Click เลือกที่ Import

เราจะเจอกับหน้า Import Products จากนั้นให้เราคลิกที่ปุ่ม “เลือกไฟล์” เพื่อไปเลือกไฟล์ที่เรา Download ลงมาก่อนหน้านั้นครับ แล้วกด Continue

เราจะเจอกับ Map CSV ซึ่งเรามี Column ในไฟล์ CSV ตรงอยู่แล้ว เพราะไฟล์ตัวอย่างนี้มาจาก Woocommerce ครับ

เราก็พร้อมแล้วครับ ที่จะทำการ Import ตัวสินค้า จากนั้นเลื่อนลงมา กด Run the importer

จากนั้น รอซักครู่ เพราะว่าข้อมูล Woocommerce Import ค่อนข้างเยอะครับ

เมื่อเราทำการ Import เสร็จเรียบร้อยแล้ว จะขึ้นหน้าจอแจ้งว่า Import complete ครับ เราสามารถกด Continue setup ได้เลยครับ

เมื่อเรามาที่ Products เราจะเห็นว่าข้อมูลทั้งหมด Import มาเรียบร้อยแล้วครับ

การ Set up shipping หรือการจัดส่งสินค้า

ตอนนี้เราก็ดำเนินการไป 2 ขั้นตอนแล้วนะครับ คือ Set up payments และ Add my products เรามาทำการ Set up shipping กันต่อครับ

ให้เราคลิกไปที่ Set up shipping

โดยให้เราใส่ค่า Shipping Cost ไปเบื้องต้นก่อนซัก 50 จากนั้นคลิกที่ Complete task เป็นอันเสร็จเรียบร้อยครับ สำหรับการตั้งค่าเบื้องต้นในส่วนของ Shipping

จากนั้นเราไปที่ Woocommerce และไปที่ Settings แล้วเลื่อนหน้าจอลงมา เราจะเจอ Currency Options เราจะต้องเปลี่ยนตรงนี้ด้วยครับ ให้เป็น Thai bath จากนั้นกด Save changes การตั้งค่าของเราเกือบจะสมบูรณ์แล้วครับ

เราคลิกกลับไปดูที่หน้า Shipping อีกครั้ง ก่อนหน้านี้เป็น US $ เราจะเห็นว่าตรง Thailand ระบบตั้งค่าไว้เป็น Flat rate อยู่ เราทำการคลิก Edit ครับ

เราจะเข้ามาที่หน้า Shipping Zones Thailand จะเห็นว่าเรามี Flate rate อยู่ 1 รายการ จากนั้นคลิก Edit ครับ

เราจะเจอหน้าจอ Pop up ขึ้นมา เป็นในส่วนของ Flate rate setting ครับ ในกรณีที่เราต้องการแก้ไข Cost ดังกล่าว หากมีการแก้ไขก็กด Save changes หากไม่ได้แก้อะไรก็กดปิดที่กากบาทมุมบนด้านขวามือไปครับ

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

แก้ไขปัญหากรณีหน้าเพจ Default ของ WooCommerce ไม่ได้ถูกสร้างขึ้นมา

เมื่อเรามาที่ Pages เราจะเห็นว่ามี หน้า Cart, Checkout, My Account, Shop ถูกสร้างขึ้นมาโดยอัตโนมัติจากระบบ WooCommerce ครับ

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

แล้วคลิกเลือก Tab ที่ชื่อที่ Tools ครับ จากนั้นเลื่อนลงมาด้านล่างครับ

เราจะเห็นคำว่า Create default WooCommerce pages ซึ่งเป็นคำสั่งที่เอาไว้สร้างหน้าเพจเหล่านั้นขึ้นมาครับ จากนั้นเราคลิกที่ Create pages โดยขั้นตอนนี้จะช่วยแก้ปัญหาในกรณีที่ WooCommerce ยังไม่ได้สร้างหน้าต่างๆ ขึ้นมาไว้เราครับ

การสร้าง Menu ให้กับร้านค้าออนไลน์

โดยให้เราไปที่ Appearance จากนั้นคลิกที่ Menus

สำหรับการสร้างเมนูแบบละเอียดนั้น ทางผมมี Video ที่อธิบายไว้เรียบร้อยแล้ว สามารถดูได้ผ่านช่องทางด้านล่างนี้เลยครับ

วิดีโอนี้ จะเป็นสอนสร้างเมนูใน WordPress ตั้งแต่เริ่มไปจนถึงฉบับเสริมเทคนิคลับครับ

คลิกที่นี่เพื่อดูวิดีโอ

เราสร้าง Menu ขึ้นมาก่อนครับ ให้เราไปที่ Menus เราจะใช้ชื่อว่า main-menu จากนั้นกด create menu ครับ

ขั้นตอนการเลือกใส่เมนู WordPress

1. ให้เราไปที่ View All แล้วเลือกว่า เราจะใส่เมนูไหนลงไปลงใน main-menu ที่เราสร้างขึ้นมา โดยหลักๆ ก็จะมี Home, Blog, About, Contact, My account และหน้าที่สำคัญ คือหน้า Shop ซึ่งเป็นหน้าร้านค้าที่จะต้องมีครับ
2. จากนั้นกดปุ่ม Add to Menu เพื่อเพิ่ม สิ่งที่เราเลือกลงไปในเมนูได้เลยครับ

3. ทำการจัดเรียงเมนูโดยการใช้เมาส์ลากและวางกล่องเมนูต่างๆ ให้เรียบร้อยครับ

4. เมื่อเราจัดเรียงเมนูเรียบร้อยแล้ว จากนั้นกด Save Menu โดยเราจะต้องติดตั้ง Display ให้กับเมนูด้วย โดยไปดูที่ด้านล่างเราจะเห็นคำว่า Menu Settings แล้วให้เราไปที่ Display location ซึ่งก็คือ ธีมที่เราใช้อยู่นี้สามารถติดตั้งเมนูได้ 3 ตำแหน่ง คือ
1) Primary Menu
2) Seconday Menu
3) Handheld Menu
โดยให้เรากดเลือกที่ Primary Menu จากนั้นกด Save Menu เป็นอันเรียบร้อย สำหรับการตั้งค่าในส่วนของเมนู

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

การตกแต่งธีมโดยใช้ WordPress Customizer

เราจะมาตกแต่งธีมโดยการใช้ WordPress Customizer กันครับ โดยเข้าไปที่ระบบหลังบ้าน หรือ Dashboard จากนั้นไปที่ Appearance และคลิกที่ Customize ครับ

ซึ่งผมได้ทำวีดีโอเกี่ยวกับการใช้ WordPress customizer โดยละเอียด พร้อมคำอธิบายเอาไว้ที่นี่แล้วครับ

กลับสู่สารบัญ

ใส่ Logo ให้กับเว็บไซต์ของเรา

เมื่อเราเข้ามาที่หน้าจอ Customizer เราจะเห็นว่ามีตัวปรับแต่งธีมของเว็บไซต์ของเรา เรียงกันอยู่ทางด้านซ้ายมือครับ จากนั้นให้เราคลิกไปที่ Site Identity

หน้าจอ WordPress Customizer

เมื่อเราเข้ามาที่หน้าจอของ Customizing Site Identity แล้ว ให้เราคลิกที่ Select logo เพื่อเลือกภาพที่จะนำมาใช้เป็นโลโก้ของเราครับ

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

เราจะเห็นว่า logo ที่เราเลือกไว้มาแล้วครับ หลังจากนั้นอย่าลืมกดปุ่ม Publish ด้วยครับ

การเปลี่ยน Site icon

เรายังคงอยู่ที่หน้าจอของ Customizing Site Identity อยู่ครับ เราจะสังเกตเห็น Site icon หรือ ไอคอนเล็ก ๆ ที่อยู่ก่อนหน้าช่องแสดง URL Browser ด้านซ้ายมือบนสุด ขนาดรูปสำหรับนำมาทำ Site icon โดยทั่วไปจะอยู่ที่ 16 x 16 pixel หรือ 32 x 32 pixel

ในตอนแรกนั้น Site icon จะเป็นค่า Default คือรูปของ WordPress อยู่ เราสามารถเปลี่ยนให้เป็นแบบที่เราต้องการได้ครับ

ให้เราคลิกที่ Select site icon ที่อยู่ซ้ายมือ ด้านล่างครับ

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

จะเห็นว่าตอนนี้ Site icon ได้เปลี่ยนเป็นรูปที่เราเลือกไว้เรียบร้อยแล้วครับ หลังจากนั้นอย่าลืมกด Publish ด้วยครับ

การปรับแต่ง Header

การปรับแต่ง Header เราสามารถทำได้ง่ายๆ ด้วย Customizer เช่นกันครับ โดยให้เราคลิกไปที่ Header

จากนั้นเราสามารถเลือกเปลี่ยนสีพื้นหลังได้ด้วยการจิ้มเลือกที่ Background color โดยพื้นหลังของ Header ก็จะแสดงผลเปลี่ยนไปตามสีที่เราเลือกไว้นั่นเองครับ เมื่อเราเลือกสีที่เราต้องการเรียบร้อยแล้ว หลังจากนั้นอย่าลืมกด Publish ด้วยนะครับ

การปรับแต่งสีของตัวอักษรที่เป็น link

เราสามารถเลือกเปลี่ยนสีตัวอักษรที่เป็นลิงค์ได้ด้วยการเลือกที่ Link color ซึ่งอยู่ด้านล่างคำว่า Text color โดยข้อความที่เป็นลิงค์ก็จะแสดงผลเปลี่ยนไปเป็นตามสีที่เราเลือกไว้นั่นเองครับ และเมื่อเราเลือกสีที่เราต้องการเรียบร้อยแล้ว หลังจากนั้นอย่าลืมกด Publish ด้วยนะครับ

การปรับแต่ง Footer

การปรับแต่ง Footer เราสามารถทำได้ง่ายๆ ด้วย Customizer เช่นกันครับ โดยให้เราคลิกไปที่ Footer

จากนั้นเราสามารถเลือกเปลี่ยนสีพื้นหลัง (Backgroud), สีของหัวข้อ (Heading), ตัวอักษร (Text) และ ตัวอักษรที่เป็นลิงค์ (link) ของ Footer ได้ด้วยการเลือกที่ color ของแต่ละจุดที่เราต้องการจะปรับแต่งได้เลยครับ โดยสีที่เราเลือกก็จะแสดงผลเปลี่ยนไปเป็นตามสีที่เราเลือกไว้นั่นเองครับ และเมื่อเราเลือกสีที่เราต้องการเรียบร้อยแล้ว หลังจากนั้นอย่าลืมกด Publish ด้วยนะครับ

การปรับแต่ง Typography

การปรับแต่งตัวอักษรในเว็บของเราหรือ Typography นั้น เราสามารถทำได้ง่ายๆ ด้วย Customizer เช่นกันครับ โดยให้เราคลิกไปที่ Typography

จากนั้นเราสามารถเลือกเปลี่ยนสีของหัวข้อ (Heading), ตัวอักษร (Text) และ ตัวอักษรที่เป็นลิงค์ (link) ของเว็บไซต์เราได้ด้วยการเลือกที่ color ของแต่ละจุดที่เราต้องการจะปรับแต่งได้เลยครับ โดยแต่ละจุดก็จะแสดงผลเปลี่ยนไปเป็นตามสีที่เราเลือกไว้นั่นเองครับ และเมื่อเราเลือกสีที่เราต้องการเรียบร้อยแล้ว หลังจากนั้นอย่าลืมกด Publish ด้วยนะครับ

การปรับแต่งหน้า (Page) และการตั้งค่า Featured image

เรามาลองทำการตกแต่งหน้าเพจกันดูครับ โดยไปที่หลังบ้านหรือหน้า Dashboard จากนั้นคลิกที่ Pages แล้วเราเลือกหน้าเพจที่เราจะทำการตกแต่ง โดยผมจะเลือกหน้า Home ครับ เมื่อเอาเมาส์ไปวางจะเห็นคำว่า Edit | Quick Edit | Trash | View ให้เราคลิกที่ Edit ครับ

หลังจากที่เราคลิก Edit เข้ามาแล้ว เรามาทำการตั้งค่ากัน ดังนี้ครับ

1. เลือกการตั้งค่าเพจกันก่อนครับ ไปที่ Page Attibutes จากนั้นจะเจอคำว่า Template ให้เราเลือก page Template ให้กับหน้าเพจนี้ เป็น Homepage ครับ โดยฟังก์ชั้นนี้จะขึ้นอยู่กับธีมว่า ว่าแต่ละธีมจะใช้แบบไหน ซึ่งธีม Storefront นี้เค้าใช้ชื่อว่า Homepage ครับ
2. จากนั้นเราไป Set featured image ครับ โดยคลิกไปที่กล่อง Set feartured image เพื่อทำการอัพโหลดรูปที่เราต้องการใช้ในหน้าเว็บไซต์ของเราครับ
3. ใส่ข้อความที่เราต้องการ
4. กด Update

และนี่คือ หน้าตาของเพจที่เราได้ตกแต่งกันมาครับจะเห็นได้ว่า รูปที่เราเลือกไว้ที่ Set feature image และข้อความที่เราใส่ลงไป แสดงอยู่หน้าเว็บไซต์ของเราแล้วครับ

การใส่รูปภาพให้กับหมวดหมู่สินค้า (Categories)

ในเมื่อเรามีหมวดหมู่สินค้าหลายหมวดหมู่ เราก็ควรที่จะทำการ Set up รูปภาพตัวอย่างของแต่ละหมวดหมู่สินค้าของเราครับ

โดยเริ่มจากให้เราไปที่ Products จากนั้นเลือก Categories

เมื่อเราเข้ามาในหน้าของ Product Categories เราจะเห็นรายการหมวดหมู่สินค้าของเราเรียงกันอยู่ ให้เราคลิกเลือกหมวดหมู่สินค้าที่เราจะทำการใส่รูปหน้าตัวอย่างหรือเรียกว่ารูปหน้าปก (Thumbnail)

คลิกที่ปุ่ม Upload/add image เพื่อทำการอัพโหลดรูปภาพที่เราต้องการใช้เป็นรูปตัวอย่าง จากนั้นคลิกที่ปุ่ม Update เรียบร้อยแล้ว เรากลับไปที่ Categories อีกครั้งครับ

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

เรามาดูที่หน้าเว็บไซต์ของเรากันบ้างครับ เราจะเห็นว่ารูปหน้าปกในแต่ละหมวดหมู่ (Categories) นั้น แสดงไว้ตามที่เราเลือกเรียบร้อยแล้วครับ

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

ทำความเข้าใจสินค้า 4 ประเภทใน Woocommerce

หลังจากที่เราได้ทำการตั้งค่าส่วนต่างๆ และปรับแต่งหน้าเว็บไซต์ให้กับร้านค้าออนไลน์ของเราเรียบร้อยแล้ว สำหรับในบทเรียนนี้เราจะมาทำความเข้าใจในเรื่องของสินค้า (Products) สินค้าประเภทต่างๆ ในระบบ Woocommerce นั้น มีกี่ประเภท

โดยสินค้าประเภทต่างๆ บน Woocommerce แบ่งออกเป็น 4 ประเภท ดังนี้ครับ

1. Simple Product หรือ สินค้าทั่วไป มีราคาเดียว ไม่ซับซ้อน ได้แก่

• Physical product เป็นสินค้าที่จับต้องได้ สามารถจัดส่งไปกับระบบการขนส่งต่างๆ ได้
• Visual Product เป็นบริการที่ไม่ต้องจัดส่ง เช่น การรับทำเว็บไซต์ โดยเราใช้ internet โดยไม่ต้องถึงระบบขนส่ง
• Download Product เป็นสินค้าที่ไม่ต้องทำการจัดส่ง โดยดาวน์โหลดได้ทันทีหลังจากสั่งซื้อ เช่น E-book, หนังสือเสียง หรือว่าไฟล์ MP3, Software ต่างๆ เป็นต้นครับ
  ซึ่งสินค้าเหล่านี้จัดอยู่ในกลุ่ม Simple Product ทั้งหมดครับ

2. Variable Product สินค้าแบบมีตัวเลือก หรือสินค้าที่มีราคาแตกต่างกันตามลักษณะหรือคุณสมบัติ เช่น สีของเสื้อ, ไซต์ของเสื้อ เป็นต้น ซึ่งสินค้าเหล่านี้ ก็มีพื้นฐานมาจาก Simple product ครับ การสร้างจะคล้ายกัน แต่ส่วนนี้ที่แตกต่างก็คือ เราสามารถที่จะแยกได้ว่า แต่ละสีหรือแต่ละขนาดจะมีราคาเท่าไหร่

3. Affiliate product เรานำสินค้าจากเว็บอื่นมาลงที่เว็บไซต์เราครับ เมื่อลูกค้ากดปุ่มซื้อ จากนั้นปุ่มหรือลิงค์ดังกล่าวก็จะพาลูกค้าไปยังเว็บไซต์ที่เรานำสินค้ามาลง ที่เราเรียกว่า “Affiliate product” ก็เพราะว่า เราสามารถที่จะนำลิงค์ของสินค้าใดก็ได้มาใส่ไว้ใน Product catalog หรือรายการสินค้าของเรา

4. Grouped Product ก็คือ สินค้าที่รวบรวมสินค้าใน Simple product เอามาไว้ด้วยกันนั่นเองครับ โดยนำมาจัดเป็นกลุ่ม เอามาไว้ใน group เดียวกัน โดยเบื้องต้นเราก็จะต้องมีสินค้าที่เป็น Simple product ก่อนครับ

ซึ่งผมได้ทำวีดีโอเกี่ยวกับการสร้าง Product แต่ละประเภท โดยละเอียด พร้อมคำอธิบายเอาไว้ที่นี่แล้วครับ

กลับสู่สารบัญ

การสร้างสินค้าประเภท Simple product และการตั้งค่าส่วนต่างๆ

โดยเราจะมาเริ่มจากสินค้าประเภท Simple กันก่อนครับ ขั้นแรกให้เราไปที่ Products ก่อนครับ จากนั้นคลิกที่ All Products

เมื่อเราเข้ามาที่หน้า Products เราจะเจอกับรายการสินค้าทั้งหมดที่อยู่ในระบบ Woocommerce ของเว็บไซต์ของเรา โดยเราสามารถเพิ่มรายการสินค้าได้จากหน้านี้ โดยการกดปุ่ม Add New ครับ

จากนั้นเราจะเจอกับหน้า Add new เรามาเริ่มสร้างสินค้าใหม่เข้าไปกันครับ

1. เริ่มจากการใส่ชื่อสินค้าที่เราต้องการเพิ่มเข้าไปครับ
2. ใส่คำอธิบายตัวสินค้าที่เราต้องการลงไป
3. คลิกเลือกหมวดหมู่ (Categories) ให้กับสินค้าที่เราจะทำการเพิ่มเข้าไปครับ

เมื่อเราเลื่อนลงมาเราจะเจอกับส่วนสำคัญซึ่งก็คือ Product data ซึ่งก็คือ ส่วนที่เราจะไว้ใช้ในการกำหนดค่าต่างๆ ให้กับสินค้าของเราครับ โดยเราจะเห็นว่ามี Product Type ให้เลือกทั้งหมด 4 ประเภท โดยเราจะเลือกสร้าง Simple product กันก่อนครับ

การตั้งค่า General

โดยเราจะเห็นที่ด้านซ้ายมือ Tab แรกที่เราจะเจอก็คือ General หรือการตั้งค่าในส่วนของราคาขายโดยจะแบ่งเป็น สองตัวเลือก คือ

• Regular price คือ ราคาสินค้าปกติ
• Sale price คือ ราคาที่ลด / Sale แล้ว (ซึ่งหากเราใส่ Sale price ลงไป มันก็จะโชวที่หน้าเว็บไซต์โดยการขีดฆ่าและจะแสดงเป็นราคาสินค้าที่ลดแล้วนั่นเองครับ

การตั้งค่า Inventory

• รหัสสินค้า (SKU)
• การจัดการคลังสินค้า (Manage Stock?) โดยเราจะติ๊กเลือกในกรณีที่ต้องการระบุว่า สินค้าของเราเหลือกี่ชิ้น ณ ปัจจุบัน
• สถานะของสต๊อกสินค้า (Stock Status) ซึ่งจะมี 3 แบบให้เลือก
  1) In stock คือ มีสินค้า 2) Out of stock คือ สินค้าหมด 3) On backorder คือ รายการสินค้าที่ไม่มีในสต๊อก หมดชั่วคราว หรือมีไม่ครบจำนวน ขณะสั่งซื้อ ซึ่งจะได้รับการจัดส่งทันทีที่รายการสินค้านั้นๆ เข้ามาแล้ว

ซึ่งในกรณีที่เราติ๊กเลือกให้มีการจัดการในส่วนของสินค้าในสต๊อก (Manage stock) จะมีรายละเอียด ดังนี้

• Stock quantity คือ จำนวนสินค้าในสต๊อก
• Allow backorders? คือ จะอนุญาตให้สั่งสินค้าก่อน ในกรณีที่สินค้ายังไม่มีในสต๊อก
• Low stock threshold คือ กำหนดให้สินค้าเหลือกี่ชิ้น ระบบจึงจะแจ้งเตือนกรณีสินค้าใกล้หมด
• Sold individually คือ จะให้ระบบล็อคไว้ในกรณีที่สั่งซื้อว่า ให้สามารถสั่งซื้อได้ครั้งละ 1 ชิ้นเท่านั้น

การตั้งค่า Shipping

• Weight (kg) คือ น้ำหนักของสินค้า
• Dimensions (cm) คือ ขนาดของสินค้า คือ กว้าง ยาว สูง
• Shipping class คือ การคิดค่าขนส่งตามกลุ่มสินค้า เช่น เป็นสินค้าที่แตกหักง่าย, สินค้าหนัก 10 กิโลขึ้นไป หรือ สินค้าที่เป็นวัตถุอันตราย เป็นต้น โดยเราจะต้องไปทำการ Set ค่าก่อนครับ ส่วนนี้เดี๋ยวจะมีลงรายละเอียดกันอีกครั้งครับ

การตั้งค่า Linked Products

• Upsells คือ การเลือกตัวสินค้าที่เราต้องการแนะนำให้ลูกค้า ซึ่งมีราคาสูงกว่า
• Cross-sells คือ การแนะนำสินค้าที่เกี่ยวข้องเพื่อการขายคู่กันกับสินค้าที่ลูกค้ากำลังเลือกซื้อ

การตั้งค่า Attributes

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

โดยเราเราสามารถเพิ่ม Attribute หรือคุณสมบัติของสินค้าด้วยตัวเองได้ ดังนี้

1. คลิกที่ปุ่ม Add
2. จากนั้นใส่หัวข้อที่เป็นคุณสมบัติของสินค้า เช่น เนื้อผ้า
3. เพิ่มตัวเลือกหรือรายละเอียดให้กับคุณสมบัติของสินค้า เช่น ไนลอน
4. คลิกเลือก Visible on the product page เพื่อให้แสดงที่หน้าสินค้า
5. กด Save attributes

การตั้งค่า Advanced

• Purchase note คือ Note ที่เราต้องการบอกลูกค้าหลังจากที่ลูกค้าสั่งซื้อสินค้าไปแล้ว
• Menu order คือ การเรียงลำดับสินค้าใน Woocommerece
• Enable reviews คือ เราต้องการให้ลูกค้ารีวิว หลังการสั่งซื้อสินค้าหรือไม่

การใส่รายละเอียดสินค้าและอัพโหลดรูปภาพสินค้า

1. เราจะเลือกใส่ทั้งแบบละเอียดหรือแบบยาว
2. แล้วเราจะเลือกใส่รายละเอียดแบบสั้นด้วยก็ได้ครับ
3. ทำการอัพโหลดรูปสินค้า โดยไปที่ Product image จากนั้นเลือก Set product image เพื่อทำการอัพโหลดรูปภาพสินค้าที่เราต้องการครับ ส่วน Add product gallery images เราสามารถเลือกรูปภาพขึ้นไปในหลายๆ รูป โดยเราใช้ในกรณีที่เรามีหลายสี หลายแบบครับ
4. กด Publish เพื่อเผยแพร่หน้าร้านค้าของเรา

จะมีในส่วนของลิงค์ ของหน้า Product ที่เราได้ทำการเพิ่มไปนั้น เราควรจะใช้เป็นภาษาอังกฤษนะครับ โดยให้เราไปทำการแก้ไขลิงค์ให้เป็นภาษาอังกฤษ จากนั้นกด Ok ครับ

เรามาดู Product ที่เราเพิ่มไว้กันครับ โดยเราไปที่หน้า Shop ครับ จากนั้น เราจะเจอสินค้าที่เราเพิ่มไว้ โดยเราจะเห็นว่า ราคาเต็มของสินค้าถูกขีดฆ่าไป เหลือแต่ราคาที่ลดแล้วหรือราคา Sale

เมื่อเราคลิกที่สินค้า เข้ามาที่หน้า Single product เราจะเห็นในส่วนของ

• คำอธิบายเกี่ยวกับตัวสินค้าแบบสั้น หรือ แบบย่อ
• รหัสสินค้า หรือ SKU
• หมวดหมู่สินค้า หรือ Categories
• ป้ายกำกับ หรือ Tag
• คำอธิบายเกี่ยวกับตัวสินค้าแบบยาว หรือแบบละเอียด

รายละเอียด ดังกล่าวนี้ซึ่งอยู่ในส่วนของ Product data โดยเราได้ทำการกรอกกันไปแล้ว ก่อนหน้านี้นั่นเองครับ

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

และส่วนสุดท้ายคือ รีวิวจากลูกค้าครับ

การเพิ่ม Attribute ให้กับสินค้าด้วยตนเอง

เริ่มจากเราไปที่ Products จากนั้นคลิกที่ Attributes

เมื่อเราคลิกเข้ามาแล้ว เราจะเจอกับหน้า Attributes เริ่มจาก

1. เราตั้งชื่อให้กับ Attribute หรือ คุณสมบัติกันก่อนครับ โดยตามตัวอย่างผมใช้คำว่า “เนื้อผ้าของเสื้อ”
2. ตั้งชื่อให้กับ Slug หรือ Link ของ Attribute ดังกล่าว (โดยจะต้องเป็นภาษาอังกฤษนะครับ)
3. กด Add attribute

เมื่อเรากด Add attribute แล้ว เราจะสังเกตได้ว่า ที่ด้านขวามือ จะมีรายการคุณสมบัติที่เราเพิ่มไปปรากฎขึ้นมาครับ จากนั้นให้เราคลิกไปที่ Configure terms ของรายการดังกล่าว

เราจะเจอหน้าของ Edit attribute สิ่งที่เราต้องทำก็คือ

1. ใส่ชื่อของคุณสมบัติเฉพาะของสินค้า โดยเราจะใส่ ยกตัวอย่างเช่น ไนล่อน
2. จากนั้น ใส่ Slug หรือ Link (โดยจะต้องเป็นภาษาอังกฤษนะครับ)
3. จากนั้นกดปุ่ม Add new สำหรับ Attribute หรือคุณสมบัติที่ชื่อว่า เนื้อผ้าของเสื้อ

จากนั้นเราจะเห็นว่าที่ด้านขวามือ จะมีรายการ Attribute ที่เราสร้างไว้ปรากฎขึ้นมาแล้วครับ ต่อมาให้เราคลิกกลับมาที่หน้า Attribuites ที่ Tab เมนู ด้านซ้ายมือครับ

เมื่อเราคลิกกลับมาที่ Attribuites แล้วเราจะเจอกับรายการ Attribute ที่เราสร้างไว้ก่อนหน้าปรากฎอยู่ทางด้านขวามือ ซึ่งก็เป็นชนิดของเนื้อผ้า ได้แก่ ผ้าลินิน, ผ้าฝ้าย, ผ้าไนล่อน

จากนั้นให้เราคลิกกลับไปที่ Product และ All Products ครับ

เราจะเห็นรายการสินค้าปรากฎอยู่ จากนั้นให้เราเลือกคลิกที่ Edit

เราทำการเลื่อนหน้าจอลงมาด้านล่าง จากนั้นให้เราดำเนินการดังนี้ครับ

1. คลิกตรง Attributes
2. เราจะเห็นว่ามีรายการคุณสมบัติที่เราสร้างไว้ปรากฎเรียบร้อยแล้ว ซึ่งก็คือ เนื้อผ้าของเสื้อ ให้เราคลิกเลือกที่นี่ครับ
3. จากนั้นกดปุ่ม Add ด้านข้าง

เมื่อเรากด Add สิ่งที่ต้องทำต่อไปคือ

1. คลิกไปที่ Attribute ที่เราเลือกไว้ในขั้นตอนก่อนหน้าครับ ซึ่งในที่นี้คือ เนื้อผ้าของเสื้อ
2. จากนั้นเลือกชนิดของ Attribute ที่เราสร้างไว้ หรือชนิดเนื้อผ้า
3. กด Save attributes

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

การเพิ่มกับสินค้า Simple product ประเภทบริการ

โดยเราเริ่มจากการเพิ่มสินค้าเข้าไปก่อนครับ ให้เราไปที่ Product จากนั้นกด Add New ครับ

ให้เราใส่ชื่อสินค้าหรือบริการลงไป จากนั้นใส่คำอธิบายสินค้า

เมื่อเราเลื่อนลงมาด้านล่างเราจะเจอกับ Product data โดยจะเป็น Simple products อยู่

1. ติ๊กเลือกที่ Virtual
2. ใส่ราคาสินค้าหรือบริการ
3. อัพโหลดรูปสินค้าหรือบริการ ที่ Product image

จากนั้นเราทำการเลือกหมวดหมู่สินค้า ถ้ายังไม่มี เราก็เพิ่มเข้าไปครับ

1. กด Add new category ใส่ชื่อหมวดหมู่ที่เราต้องการเพิ่ม
2. กดปุ่ม Add new category ด้านล่าง
3. กด Publish เพื่อเผยแพร่รายการสินค้าดังกล่าว

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

และอย่างที่ผมเคยแนะนำไว้ในหัวข้อก่อนหน้าว่า เราควรจะใช้ Link เป็นภาษาอังกฤษ ดังนั้นก็ให้เราทำการแก้ไข Link ให้เป็นภาษาอังกฤษ ตามรูปนี้ครับ เมื่อเราแก้ไขแล้ว เรากด OK จากนั้นอย่าลืมที่จะกด Publish หน้าสินค้าดังกล่าวด้วยนะครับ

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

การทำให้สินค้าสามารถดาวน์โหลดได้

มีขั้นตอน ดังนี้

1. เริ่มจากการเลือกที่ Downloadable
2. เมื่อเราเลือกแล้ว จะปรากฎกล่อง Downloadable files เพื่อให้เราใส่ไฟล์ โดยให้เราคลิกที่ปุ่ม Add File
3. จากนั้นเราทำการอัพโหลดไฟล์ที่จะให้ลูกค้าดาวน์โหลดได้ โดยเรากด Choose file โดยเราสามารถอัพโหลดจากเครื่องของเราได้โดยตรง ในกรณีที่เรายังไม่ได้อัพโหลดไว้ที่ระบบครับ
4. ต่อมาด้านล่างคือ Download limit คือ เราสามารถเลือกได้ว่าจะสามารถดาวน์โหลดได้กี่ครั้ง
5. และช่องถัดมาคือ Download expire หรือหลังจากที่ซื้อแล้วสามารถดาวน์โหลดได้ภายในกี่วัน
6. สุดท้ายกรอกคำอธิบายแบบย่อหรือแบบสั้น
   
   เมื่อเสร็จทุกขั้นตอนแล้วทำการกดปุ่ม Update เป็นอันเสร็จเรียบร้อยครับการตั้งค่าให้ลูกค้าสามารถดาวน์โหลดสินค้าได้

เรามาดูกันว่า ลูกค้าจะสามารถดาวน์โหลดสินค้าได้อย่างไรกันครับ โดยเรามาที่หน้า shop จากนั้นให้เรากด หยิบใส่ตะกร้า จากนั้นคลิก ดูตะกร้าสินค้า

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

เราจะเจอกับหน้า Checkout โดยด้านซ้ายมือจะเป็นข้อมูลผู้ซื้อ ตรงส่วนนี้ให้เรากรอกข้อมูลให้เรียบร้อยครับ ส่วนด้านขวามือจะเป็นรายละเอียดสินค้าที่สั่งซื้อไป

เมื่อกรอกข้อมูลผู้ซื้อเสร็จเรียบร้อยแล้ว ให้เรากดสั่งซื้อได้เลยครับ

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

เมื่อเราคลิกที่เมนูดาวน์โหลด เราจะเห็นว่า ยังไม่มีอะไร เพราะเรายังไม่ได้ชำระเงินนั่นเอง

การจัดการรายการคำสั่งซื้อ (Order) เบื้องต้น

สามารถทำได้ 2 วิธีครับ เรามาเริ่มกันที่วิธีแรกกันก่อนครับ ให้เราไป Woocommerce จากนั้นคลิกที่ Orders ที่มุมบน ด้านขวามือครับ เราจะเห็นว่า มีรายการออเดอร์ใหม่ขึ้นโชว์อยู่ โดยให้เราคลิกไปที่ปุ่ม Begin fulfillment

เราก็จะเข้าสู่หน้าจอของออเดอร์นั้น เราก็จะเลือกเปลี่ยนสถานะจาก On hold เป็น Completed จากนั้นกด Update อันนี้คือ วิธีแรกครับ

วิธีที่ 2 คือ ให้เราไปที่ Woocommerece และคลิกที่ Orders มุมบนด้านขวามืออีกครั้งครับ จากนั้น เราจะเห็นว่า มีรายการออเดอร์ใหม่ขึ้นโชว์อยู่ โดยให้เราคลิกไปที่ Manage all orders

จากนั้นเราจะเห็นว่า หน้าจอของ Orders สินค้า เราจะเห็นว่ามีรายการคำสั่งซื้ออยู่ ให้เราคลิกที่รูปดวงตาของรายการคำสั่งซื้อนั่นครับ

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

ให้เรากลับมาที่เมนู My account อีกครั้งครับ แล้วคลิกเลือกที่เมนูคำสั่งซื้อ เราจะเห็นว่าสถานะคำสั่งซื้อคือ ส่งของแล้ว ซึ่งก็คือ Completed แล้วนั่นเองครับ

แล้วให้เราคลิกเลือกที่เมนู ดาวน์โหลด เราจะเห็นว่า เราสามารถดาวน์โหลดไฟล์ได้แล้วครับ

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

การสร้างสินค้าประเภท Affiliate product และการตั้งค่าส่วนต่างๆ

เราเริ่มจากใส่ชื่อสินค้าและคำอธิบายให้เรียบร้อยครับ

จากนั้นให้เลื่อนลงมา แล้วทำตามขั้นตอนต่อไปนี้ครับ

1. ในส่วนของ product data ให้เราเลือกประเภทเป็น External/Affiliate product ก่อนครับ
2. ใส่ข้อมูล Affiliate product ให้เรียบร้อย โดยใส่ Product URL : เราจะใส่ url หรือ code ที่เป็น Affiliate ของสินค้าที่เราเป็นตัวแทนจำหน่ายจากเว็บแม่หรือเว็บต้นทางของสินค้าตัวนั้น
3. Button text : คือคำที่เราต้องการให้แสดงแทนปุ่ม add to cart ครับ
4. ใส่ราคาให้เรียบร้อยครับ ที่ Regular price
5. ใส่คำอธิบายของสินค้า
6. อัพโหลดรูปภาพของสินค้า ที่ Product image
7. เลือกหมวดหมู่ของสินค้า ที่ Product Category
8. กด Publish เพื่อเผยแพร่สินค้าของเราครับ

กลับมาที่หน้า Shop เราก็จะเห็นว่าสินค้า External/Affiliate product ที่เราสร้างไว้ โชว์ที่หน้าเว็บของเราแล้วครับ จากนั้นให้คลิกไปที่ Product นั้นครับ

เราก็จะเข้ามาที่หน้าของรายละเอียดของสินค้า External/Affiliate product นั้นครับ และหากเราทำการคลิกที่ปุ่ม ไปสั่งซื้อที่เว็บไซต์ ก็จะมีการ redirect ไปหาสินค้าตัวนี้ที่อยู่บนเว็บไซต์ต้นทางนั่นเองครับ

การสร้างสินค้าประเภท Grouped Product และการตั้งค่าส่วนต่างๆ

เริ่มจากเราเพิ่มตัวสินค้าหรือทำการ Add new จากนั้นใส่ชื่อสินค้า และทำการแก้ไขลิงค์ให้เป็นภาษาอังกฤษ รวมถึงใส่คำอธิบายสินค้า

ลงมาในส่วนของ product data ให้เราเลือกประเภทเป็น Grouped product คลิกไปที่ Linked Products ตรง Grouped products ให้เราพิมพ์ชื่อสินค้าที่เราต้องการมาจัดกลุ่มลงไปครับ จากนั้นใส่คำอธิบายสินค้า พร้อมอัพโหลดภาพที่จะนำมาใช้เป็นหน้าปกสินค้า สุดท้ายคือ กด Publish เพื่อเผยแพร่สินค้าครับ

เรามาดูที่หน้า Shop เราจะเห็นสินค้า Grouped product ที่เราสร้างไว้ โดยสังเกตจากในส่วนของราคาสินค้าจะถูกระบุเป็นช่วงราคาไว้ เนื่องจากสินค้ามีมากกว่า 1 รายการนั่นเองครับ จากนั้นกดที่ดูสินค้าครับ

เมื่อเราเข้าสู่หน้าสินค้า Grouped products ที่เราสร้างไว้ เราจะเห็นว่า เราสามารถที่จะกำหนดจำนวนสินค้าแต่ละรายการได้ครับ จากนั้นให้เราคลิก หยิบใส่ตะกร้า

เมื่อเราเปิดมาที่หน้าตะกร้าสินค้า (Cart) เราจะเห็นรายการสินค้าทั้งหมดจาก grouped product พร้อมทั้งจำนวนสินค้าแต่ละรายการ ที่เราเลือกหยิบใส่ตะกร้ามานั่นเองครับ

การสร้างสินค้าประเภท Variable product และการตั้งค่าส่วนต่างๆ

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

การสร้างสินค้าแบบมีตัวเลือก (Variable product) ใน Woocommerce นั้น มีขั้นตอนและคำอธิบาย ค่อนข้างซับซ้อน ผมจึงทำเป็นวีดีโอพิเศษ โดยเฉพาะเอาไว้ให้ดูครับ

กลับสู่สารบัญ

ขั้นตอนแรกไปที่ Product จากนั้นคลิกที่ All Products

คลิกที่ Add New เพื่อทำการเพิ่มสินค้า

เข้าสู่หน้า Add new product ให้เราทำการใส่ชื่อสินค้า และ ใส่คำอธิบายของสินค้า

เลื่อนลงมาด้านล่างที่ Product data ให้เราเลือกประเภทเป็น Variable product

คลิกที่เมนู Attributes แล้วทำการเลือก Attribute ที่ชื่อ color เพื่อทำการปรับแต่งคุณสมบัติสินค้า จากนั้นคลิกปุ่ม add

หลังจากที่เรากด Add แล้ว จะมีช่องที่ชื่อว่า Value(s): เพื่อให้เราใส่รายละเอียดของ ตัวเลือกต่างๆ ให้กับ Attribute หรือคุณสมบัติที่ชื่อว่า color นี้ โดยให้เราทำการเลือก Used for variations เพื่อที่จะให้ลูกค้าเลือกสินค้าได้ จากนั้นเราไปตั้งค่า Attribute ที่เรามี เช่น กรณีนี้คือ เราเพิ่ม Blue Red และ Yellow แล้วเรากด Save attributes ครับ

จากนั้นให้เรามาที่เมนู Variations ครับ แล้วให้เราเลือก Create variations from all attributes หรือการสร้างรูปแบบสินค้าจากทุกคุณสมบัติ แล้วคลิกที่ปุ่ม Go

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

ระบบก็จะแจ้งเรามาอีกทีว่าได้เพิ่มสินค้าคละแบบให้แล้วจำนวนเท่าที่นี้ ก็ให้เรากด ตกลง หรือ OK ไป

ระบบจะสร้างสินค้าขึ้นมาให้ 3 แบบตามที่เรากำหนดใน Attribute จากนั้นให้คลิกปุ่มลูกศรลง (ตามภาพ) เพื่อเพิ่มรายละเอียดสินค้าแต่ละตัว

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

จากนั้นให้คลิกปุ่มลูกศรลง (ตามภาพ) เพื่อเพิ่มรายละเอียดสินค้าแต่ละตัว

โดยเราจะทำการกรอก รายละเอียด ดังนี้

1. ใส่รูปภาพ
2. ใส่ SKU หรือ รหัสสินค้า
3. ใส่ราคาสินค้า Regular price และช่องด้านขวามือ สำหรับ ใส่ราคาขายที่ลดแล้ว หรือ Sale price
4. ใส่น้ำหนักสินค้า Weight (kg) หน่วยเป็นกิโลกรัม และ Dimensions (LxWxH)(cm) คือ ขนาดสินค้า ยาว x กว้าง x สูง หน่วยเป็นเซ็นติเมตร
5. ใส่คำอธิบายสินค้า หรือ description

ใส่รายละเอียดสินค้าแต่ละตัวให้ครบ

ทำการแก้ไข Link จากภาษาไทยให้เป็นภาษาอังกฤษ เลือกหมวดหมู่ของสินค้าให้เรียบร้อย จากนั้นกดปุ่ม Update

แล้วเราไปที่ Product Image เพื่อทำการใส่รูปภาพที่จะนำไปแสดงเป็นรูปภาพหน้าสินค้าตอนแสดงเป็นรายการหน้าเว็บไซต์ คลิก Set product image และเหมือนเดิมครับ หากเรายังไม่มีรูปภาพในระบบเราก็สามารถอัพโหลดจากเครื่องเราได้ครับ จากนั้นไป กำหนดชุดรูปภาพสินค้าที่ Add product gallery images

เรากลับมาดูที่หน้า Shop กันครับ เราจะเห็นว่า ตอนนี้สินค้าที่เราสร้างขึ้นจะมีทั้ง Simple product, Grouped product, Affiliate product และล่าสุดก็คือ Variable product ครับ โดยเราจะเห็นความแตกต่างของแต่ละสินค้าว่า

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

เมื่อเราทำการคลิกที่ Variable product ที่เราสร้างไว้ เราจะเห็นว่า สินค้ามีตัวเลือกให้เลือกคือ สี ซึ่งแต่ละสี ราคาและรายละเอียดสินค้าก็จะแตกต่างกันไป

การสร้าง Attribute เอง หรือ Custom product attribute

เราเริ่มจากไปที่ Attributes จากนั้นที่ Custom product attribute ให้กดปุ่ม Add ครับ

เมื่อเราคลิกปุ่ม Add จะมีช่องให้เราใส่ข้อมูลเพิ่มขึ้นมา ในช่อง Name ให้ใส่ชื่อของ Attribute หรือคุณสมบัติที่เรากำหนดขึ้นมา เช่น Size, Color เป็นต้น ส่วนในช่อง Value(s) ใส่ค่าแต่ละค่าที่เราต้องการซึ่งในทีนี่ ผมกำหนดเป็น Short|Long โดยระหว่างคำเราคั่นด้วยเครื่องหมาย | หรือ (เครื่องหมายไพป์) จากนั้นให้เราไปติ๊กเลือกที่ Used for variations เพื่อให้ลูกค้าสามารถเลือกได้ แล้วคลิกปุ่ม Save attributes ครับ

ต่อมาคลิกที่ Variations แล้วเรามาดูที่ตัวเลือกของ Attribute แต่ละรายการ เราจะเห็นว่ามี 2 ตัวเลือก คือ Short กับ Long ที่เรากำหนดไว้ก่อนหน้านี้ครับ

ทีนี้ถ้าเราต้องการจะ Add variation แบบ Manual ให้เราไปเลือกที่ Add variation แล้วกดปุ่ม Go

เราจะเห็นในส่วนของ Variation ที่เราต้องการจะเพิ่ม จากนั้นให้คลิกปุ่มลูกศรลง (ตามภาพ) เพื่อเพิ่มรายละเอียดสินค้าแต่ละตัว

ใส่รายละเอียดสินค้าให้เรียบร้อย ดังนี้ครับ

1. เลือก Variation หรือรูปแบบของสินค้า ในที่นี้ ผมเลือกเป็น Blue จากนั้น เราเลือกรูปแบบใน Blue เป็น Long ครับ
2. ใส่รูปภาพ
3. ใส่ SKU หรือ รหัสสินค้า
4. ใส่ราคาสินค้า Regular price และช่องด้านขวามือ สำหรับ ใส่ราคาขายที่ลดแล้ว หรือ Sale price
5. ใส่น้ำหนักสินค้า Weight (kg) หน่วยเป็นกิโลกรัม และ Dimensions (LxWxH)(cm) คือ ขนาดสินค้า ยาว x กว้าง x สูง หน่วยเป็นเซ็นติเมตร
6. ใส่คำอธิบายสินค้า หรือ description
7. กด Save changes

เราจะเห็นว่ามีตัวเลือกหรือ Variation ที่เราสร้างเอง แบบ Manual ขึ้นมา

เรากลับมาดูที่หน้ารายละเอียดสินค้าแบบ Variable product กันอีกครั้งครับ เราลองเลือกสีของเสื้อเป็น Red เราจะเห็นว่าตัวเลือกนั้นมีแค่ short อย่างเดียวให้เลือก

เราลองคลิกเลือกเป็น Blue กันดูบ้างครับ เราจะเห็นว่ามี 2 ตัวเลือก คือ Short กับ Long

จากนั้นให้เราคลิกเลือกที่ Long เราจะเห็นว่า รูปสินค้าเปลี่ยนจากแขนสั้นเป็นแขนยาว และราคากับคำอธิบายสินค้าก็เปลี่ยนเป็นไปตาม Variation ที่เราสร้างเองในแบบ Manual นั่นเองครับ

การปรับแต่งตัวเลือกด้วยปลั๊กอิน Variation Swatches for WooCommerce

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

ขั้นตอนการติดตั้ง Plugin ใน WordPress ง่ายๆ คือ ขั้นตอนแรกให้เราไปที่เมนู Plugin แล้วกดเลือก Add New ครับ

ค้นหา Plugin ที่ต้องการ โดยใช้ Keyword ที่เราต้องการค้นหา คือ Variations Swatches จากนั้น คลิก Install Now เพื่อติดตั้ง Plugin เมื่อเราติดตั้งเสร็จแล้ว กด Activate เพื่อเปิดการใช้งาน Plugin ได้เลย

เรามาเริ่มตั้งค่าให้กับปลั๊กอิน Variation Swatches for WooCommerce เริ่มจาก การตั้งค่าทั่วไป (Simple)

1. คลิกที่ Simple
2. ไปที่ Shape style เพื่อเลือกรูปแบบที่เราต้องการให้แสดงตัวอย่างหน้าเว็บไซต์ โดยผมเลือกเป็น Rounded Shape หรือ รูปแบบทรงกลม
3. กด Save Changes

การตั้งค่าที่ Advanced

1. Clear on Reselect คือ จะให้ Clear ค่าที่เราเลือกไว้หรือไม่ กรณีเลือกที่ตัวเลือกนั้นอีกครั้ง
2. Attribute behavior คือ ถ้าไม่มีตัวเลือก จะให้แสดงผลอย่างไร
3. Attribure image size คือ ขนาดของรูปกรณีใช้รูปในการแสดงตัวอย่าง
4. Width, Height คือ ขนาดของตัวอย่างที่แสดงผล
5. Font Size คือ ขนาดของตัวอักษร กรณีใช้ตัวอักษรเป็นตัวอย่าง

การตั้งค่าที่ Performance Section ให้ติ๊กเลือกทั้ง 2 รายการ จากนั้นกด Save Changes

ต่อมาเราไปที่ Products และ All Products แล้วคลิกเลือก Edit สำหรับสินค้าที่เราต้องการเข้าไปตั้งค่าเพื่อการใช้งานปลั๊กอิน Variation Swatches for WooCommerce

เมื่อเราเข้ามาที่หน้า Edit Product เราจะเห็นว่า เราไม่สามารถเข้าจัดการกับ Plugin ได้โดยตรงจากหน้านี้ ดังนั้นให้เราไปที่ Attributes ครับ

จากนั้น คลิกที่ Edit ของ Attribute ที่เราต้องการจะเข้าไปตั้งค่าการใช้งานปลั๊กอิน Variation Swatches for WooCommerce

เราจะเห็นว่ามี Type หรือชนิดของตัวอย่างให้เราเลือกว่า เราต้องการให้แสดงผลในรูปแบบใด ซึ่งจะมีทั้งหมด 3 ตัวเลือก คือ Color, image และ Button โดยผมจะเลือกที่ Color จากนั้นกด Update

เรากลับมาที่หน้า Attribute อีกครั้ง แล้วเราไปที่ Color โดยให้คลิกที่ Configure Terms เพื่อเข้าไปตั้งค่าการแสดงผลของตัวอย่างสีของสินค้าครับ

เมื่อเราเข้ามาที่หน้า Edit attribute ของ Color แล้ว เราจะเห็นว่ามีสีทั้งหมด 5 สี ให้เราทำการคลิกที่ Edit ครับ

ทำการเลือกสีที่เราต้องการใช้ แล้วกด Update

เลือกกำหนดค่าในส่วนของสีในแต่ละรายกาารให้เรียบร้อย

เรามาดูที่หน้าของสินค้า Variable product ที่เราปรับแต่งที่ตัวเลือกสี โดยใช้ปลั๊กอิน Variation Swatches for WooCommerce เราจะเห็นว่าเปลี่ยนเป็นรูปวงกลมและเป็นสีตามที่เรา Set ค่าไว้นั่นเองครับ

เราจะมาเพิ่ม Attribute กันต่อครับ ไปที่ Attributes จากนั้น

1. ใส่ชื่อ Attribute ที่เราต้องการเพิ่ม โดยผมจะใส่เพิ่มเป็น แขนเสื้อ
2. ใส่ Slug เป็นภาษาอังกฤษ
3. เลือกชนิดของตัวอย่างที่จะให้แสดงผลหน้าเว็บไซต์ โดยจะมี รูปแบบสี, รูปภาพ และปุ่ม โดยเราจะมาลองเลือกแบบปุ่มกันก่อนครับ
4. กด Add attributes

จากนั้นเราจะเห็นว่าที่ด้านขวามี Attributes เพิ่มขึ้นมา ก็คือ แขนเสื้อ แล้วให้เราคลิกที่ Configure Terms

เราทำการเพิ่ม Attribute ให้กับซ้อนเข้าไปที่ใน Attribute แขนเสื้อ โดยเราจะเพิ่มเป็น แขนสั้น กับแขนยาวครับ ขั้นตอนก็เหมือนเดิมครับ

1. ใส่ชื่อ Attribute
2. ใส่ Slug เป็นภาษาอังกฤษ
3. กด Add new แขนเสื้อ

เราจะเห็นว่าด้านขวามือ มี Attribute ของ แขนเสื้อเพิ่มขึ้นมาเรียบร้อยแล้วครับ คือ แขนยาว และ แขนสั้น

จากนั้นให้เรากลับมาที่หน้า All Products อีกครั้งครับ แล้วคลิกเลือกที่สินค้าที่เป็น Variable product ที่เราเพิ่ม Attribute เข้าไปก่อนหน้านี้ครับ

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

จากนั้นไปเลือก Attribute ที่เราไปสร้างไว้ ซึ่งก็คือ แขนเสื้อ จากนั้นกดปุ่ม Add ครับ

เราจะเห็นว่ามีช่องให้เราใส่รายละเอียดตัวเลือกของ Attribute แขนเสื้อ

1. เราเลือกใส่ แขนยาวและแขนสั้น
2. ติ๊กเลือก Used for variations
3. กด Save attibutes

คลิกที่ Variations จากนั้นเราก็จะเลือกตัวเลือกให้กับเสื้อแต่ละสี ว่าจะให้มีทั้งแขนสั้นและแขนยาว หรือจะให้มีแขนยาว หรือแขนสั้น เพียงรูปแบบเดียว แล้วเรากด Save changes ครับ

อย่าลืมกด Update ด้วยนะครับ

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

ให้เรากลับมาที่หน้า Attributes เหมือนเดิมครับ แล้วเลือก Edit ที่ Attribute ที่ชื่อ แขนเสื้อ

แล้วเราไปเลือก Type เป็น Image หรือว่ารูปภาพแทนครับ จากนั้นกด Update

กลับมาที่หน้า Attributes อีกครั้งครับ แล้วกดที่ Configure Terms

โดยเราจะทำการแก้ไขโดยกด Edit ที่ Attribute ทั้งแขนยาว และแขนสั้นกันครับ

เมื่อเราเข้ามาหน้า Edit ของแขนยาวแล้ว เราก็ไปกด Upload รูปภาพ หรือ Add image โดยเลือกรูปที่เราต้องการนำมาใช้เป็นรูปตัวอย่าง จากนั้นกด Update ครับ

เมื่อเรากลับมาที่หน้า Attribute ของ แขนเสื้อ เราจะเห็นว่า ที่ด้านซ้ายมือของ แขนสั้นและแขนยาวนั้นมีรูปที่เราเลือกไว้เรียบร้อยแล้วครับ

ขั้นตอนสุดท้าย อย่าลืมกด Update กันนะครับ

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

เป็นยังไงกันบ้างครับการใช้งาน ปลั๊กอิน Variation Swatches for WooCommerce ก็ไม่ยากอย่างที่คิดใช่มั้ยครับ

การตั้งค่าการรับชำระเงินรูปแบบต่างๆ ใน Woocommerce

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

ขั้นแรก ให้เราไปที่ WooCommerce แล้วไปที่ Settings ครับ

จะเห็น Tab ต่างๆ โดยเราจะเริ่มกันที่ Tab ที่ชื่อว่า Payments ครับ เมื่อเราคลิกไปที่ Tab จะเห็นว่า มีประเภทของการชำระเงินรูปแบบต่างๆ หรือ Payment Method เช่น

1) Direct Bank Transfer คือ การโอนชำระผ่านธนาคารนั่นเองครับ
2) Check Payments คือ การชำระด้วยเช็คนั่นเองครับ
3) Cash on Delivery คือ การชำระแบบเก็บเงินปลายทางครับ
4) Paypal คือ การชำระด้วยการใช้ Paypal เป็นตัวรับเงินครับ

แต่ถ้าเราต้องการจะเพิ่มรูปแบบการชำระเงินอื่นๆ เราสามารถเพิ่มได้ โดยการติดตั้งปลั๊กอินเพิ่มนั่นเองครับ โดยไปที่เมนู Plugin แล้วคลิก Add New ครับ

โดยปลั๊กอินที่เราจะติดตั้งนั้นชื่อ Omise WooCommerece ครับ ขั้นตอนการติดตั้ง Plugin มีดังนี้ครับ

1. ไปที่ Plugins แล้วไปที่ Add New
2. ค้นหา Plugin ที่เราต้องการ โดยใช้ Keyword ที่เราต้องการค้นหา คือ Omise
3. คลิก Install Now เพื่อติดตั้ง Plugin
4. ติดตั้งเสร็จแล้ว กด Activate เพื่อเปิดการใช้งาน Plugin ได้เลยครับ

วิธีการตั้งค่าชำระเงินผ่าน Direct bank transfer

ต่อมาเรากลับมาที่ WooCommerce และกด Settings ครับ เพื่อที่เราจะเข้าไปเปิดใช้งาน Payment Method ที่ชื่อว่า Direct bank transfer หรือ การโอนเงินผ่านบัญชีธนาคาร โดยให้เรามาที่ Tab ที่ชื่อว่า Payments กันอีกครั้ง จากนั้น เราคลิกที่ปุ่มเลื่อนเปิดการใช้งาน Direct bank transfer แล้วเราคลิกที่ Set up ครับ

เราก็จะเจอกับหน้าของ Direct bank transfer โดยเราทำตามขั้นตอนดังนี้ครับ

1. Title จะเป็นค่าที่แสดงอยู่บนหน้าจอการชำระเงินครับ ว่าเป็นการชำระเงินวิธีไหน
2. Description จะเป็นคำอธิบาย เกี่ยวกับวิธีการชำระเงินก่อนลูกค้ากดสั่งซื้อครับ
3. Instruction ก็คือคำสั่งครับ ซึ่งตรงนี้จะขึ้นที่หน้าจอก็ต่อเมื่อเรา ลูกค้าได้ทำการสั่งซื้อเสร็จเรียบร้อยแล้วนั่นเองครับ
4. Account details คือ รายละเอียดบัญชีธนาคารของผู้ขายครับ
   โดยเราสามารถเพิ่มบัญชีธนาคาร โดยกดปุ่ม Add account หรือ ลบบัญชีธนาคารของเรา โดยคลิกที่ปุ่ม Remove selected account(s) ได้ครับ
5. ใส่ข้อมูล รายละเอียดต่างๆ เรียบร้อยแล้ว กด Save changes

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

วิธีการตั้งค่าชำระเงินผ่าน Cash on Delivery

การตั้งค่าต่างๆ ของ Cash on delivery ง่ายกว่า Direct Bank Transfer ครับ

โดยเรากลับมาที่ Tab ที่ชื่อว่า Payments อีกครั้งครับ แล้วเราไปที่ Cash on delivery เมื่อเราเปิดการใช้งานแล้ว ให้เราคลิกที่ปุ่ม Mange ครับ

เราก็จะเจอกับหน้าของ Cash on delivery โดยเราทำตามขั้นตอนดังนี้ครับ

1. Title จะเป็นค่าที่แสดงอยู่บนหน้าจอการชำระเงินครับ ว่าเป็นการชำระเงินวิธีไหน
2. Description จะเป็นคำอธิบาย เกี่ยวกับวิธีการชำระเงินก่อนลูกค้ากดสั่งซื้อครับ และ Instruction ก็คือคำสั่งครับ ซึ่งตรงนี้จะขึ้นที่หน้าจอก็ต่อเมื่อเรา ลูกค้าได้ทำการสั่งซื้อเสร็จเรียบร้อยแล้วนั่นเองครับ
3. ใส่ข้อมูล รายละเอียดต่างๆ เรียบร้อยแล้ว กด Save changes

แต่ !! จะมีอีกสองอย่างครับที่ เราต้องดูคือ

• เราสามารถกำหนดได้ครับว่า วิธีการ Cash On Delivery นั้น จะใช้ได้กับการขนส่งแบบใด
• เราสามารถกำหนดได้ว่า ในสินค้าที่จับต้องไม่ได้ อย่างเช่น สินค้าที่เป็นบริการ เราจะให้กำหนดชำระเงินด้วยวิธีนี้หรือไม่ครับ

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

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

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

เมื่อเรามาที่หน้ารายการสั่งซื้อที่ได้รับ เราจะเห็นคำสั่งที่เราปรับเปลี่ยนไว้หลังจากลูกค้ากดสั่งซื้อ นอกจากนั้นข้อมูลบัญชีธนาคารที่เราใส่ไว้ ก็จะแสดงขึ้นมาเช่นกัน

เมื่อเรามาที่หน้า My account แล้วเราไปที่ คำสั่งซื้อ จากที่เราเลือกก่อนหน้าคือ ชำระโดยการโอนชำระเงินหรือ Direct bank transfer เราก็จะเห็นว่าสถานะเป็น รอการชำระเงิน หรือ On Hold อยู่

เราจะมาปรับสถานะการสั่งซื้อ โดยไปที่ Woocommerce แล้วไปที่ Orders เราจะเห็นว่าสถานะเป็น On Hold จากนั้นให้เรากดไปที่รูปดวงตา

เราจะเห็นหน้าจอเล็กๆ pop up ขึ้นมา โดยให้กดไปที่ Processing ซึ่งก็คือ กำลังดำเนินการอยู่ เพื่อเปลี่ยนสถานะจาก On Hold

เมื่อเราดูที่หน้า Orders เราจะเห็นว่าสถานะเปลี่ยน “Processing” เรียบร้อยครับ

เมื่อเรากลับมาที่หน้าคำสั่งซื้อ เราจะเห็นว่าสถานะเปลี่ยนเป็น “กำลังเตรียมสินค้าเพื่อจัดส่ง”

และทั้งหมดก็คือ การตั้งค่าเบื้องต้นสำหรับการรับชำระเงินใน WooCommerce เป็นยังไงบ้างครับ ไม่ยากอย่างที่คิดใช่มั้ยครับ

โดยผมได้ทำวีดีโออธิบาย วิธีการตั้งค่าเบื้องต้นสำหรับการรับชำระเงินใน WooCommerce อย่างละเอียดมาให้ดู ด้านล่างนี้ครับ

กลับสู่สารบัญ

วิธีการตั้งค่าชำระเงินผ่าน PayPal

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

ขั้นตอนแรก ให้เราไปที่ เว็บไซต์ https://www.paypal.com กันก่อนครับ สำหรับใครที่ยังไม่มี Account ของ Paypal ให้ไปที่ปุ่ม สมัครสมาชิก ครับ

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

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

ต่อมาเราจะมาดูในกรณีที่เรามี Account ของ PayPal อยู่แล้ว โดยเรากดปุ่ม เข้าสู่ระบบ

กรอกอีเมล์ที่เราเปิดใช้งานไว้แล้ว จากนั้นกดปุ่ม ถัดไป

กรอกรหัสหรือ Password ให้เรียบร้อย กดปุ่ม เข้าสู่ระบบ

เมื่อเราเข้าสู่หน้า Account ของเรา ให้เราไปที่ปุ่มรูป ฟันเฟือง ที่มุมบนด้านขวามือครับ

เมื่อเราเข้ามาหน้า Profile แล้วให้เราเลื่อนลงมา เราจะเจอคำว่า Upgrade to a Business account เพื่อการรับงานผ่านระบบของ PayPal ได้เลยครับ

เรากลับมาที่ระบบหลังบ้านของ WordPress กันครับ โดยเราจะไปตั้งค่า WooCommerce Payment ในส่วนของการรับเงินผ่าน PayPal กันครับ ให้ไปที่ Woocommerce จากนั้นกด Settings ครับ

ให้เรามาที่ Tab ที่ชื่อ Payment มาที่ส่วนของ PayPal Standard ให้เรากดปุ่มเลื่อนเพื่อเปิดการใช้งานตรงส่วนนี่ครับ จากนั้นไปคลิกที่ปุ่ม Set up

เราก็จะเข้ามาที่หน้า PayPal Standard ครับ จากนั้นให้เราทำการกรอกรายละเอียดต่างๆ ดังนี้ครับ

1. เราสามารถทำการปรับเปลี่ยน Title และ Description ในแบบที่เราต้องการได้ครับ
   – Title เราจะใช้ว่า ชำระด้วย PayPal
   – Desription เราใช้ว่า ชำระด้วย Account PayPal หรือบัตรเครดิตของคุณ
2. PayPal email กรอก E-mail ที่เราสมัครไปสมัครใช้งานใน PayPal เพื่อใช้รับเงิน หรือ Business Account หรือบางครั้งจะเรียก Merchant Account ซึ่งผมมีอยู่แล้ว โดยผมจะกรอกเป็น E-mail ที่ผมใช้
3. PayPal Sandbox จะเป็นในส่วนของ Account ที่เป็น Developer ครับ โดยเวลาที่เราทดสอบเว็บไซต์ ระบบก็ยังไม่ทำการตัดเงินไปจริงครับ
4. Debug log จะใช้ในกรณีที่หากระบบการชำระเงินเกิดปัญหา เราสามารถมาเปิดตรง log นี้ และทำการทดสอบได้ว่า เกิดปัญหาอะไร

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

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

• Receiver email ก็จะเป็นอีเมล์เดียวกับที่เรากรอกใน PayPal email ก่อนหน้านี้ครับ
• PayPal identity token คือ รหัสยืนยัน Account ของ Paypal ที่ผู้เป็นเจ้าของเว็บไซต์ต้องใช้เพื่อยืนยันการใช้ช่องทางการชำระเงินของ Paypal โดยเจ้าของเว็บไซต์สามารถเข้าไปเก็บ Paypal identity token ที่ http://www.paypal.com กันครับ
• Invoice prefix คำนำหน้าสำหรับหมายเลข Invoice ที่จะแสดงเมื่อเราส่งแจ้งลูกค้า
• Shipping details สำหรับส่งรายละเอียดการจัดส่งสินค้าเพื่อเป็น Record ให้กับ PayPal ในกรณีเกิดข้อพิพาทขึ้น
• Address override การให้ PayPal ตรวจสอบที่อยู่ ซึ่งแนะนำให้ปิดไว้ เนื่องจากเรากรอกไป เป็นภาษาไทยแล้ว ตรวจสอบแล้วผิด อาจจะเกิดปัญหาตรงส่วนนี้ได้ครับ
• Payment action ซึ่งจะมี 2 ตัวเลือกคือ Capture คือ เลือกให้ตัดเงินทันที และ Authorized ให้สิทธิ์ในการชำระครั้งต่อไป

API credentials คือ ข้อมูลรับรอง API สำหรับบัญชี PayPal เพื่อประมวลผลการคืนเงิน (Refund) โดยส่วนนี้เราจะต้องไปเอาข้อมูล API จาก PayPal มากรอกครับ ก่อนออกจากหน้านี้ อย่าลืมที่จะกด Save changes เพื่อบันทึกการตั้งค่าที่เราทำมาก่อนหน้านี้ด้วยนะครับ

จากนั้นให้เราไป log in เข้ามาในเว็บไซต์ http://www.paypal.com ส่วนของ Account ของเราครับ เมื่อเราเข้ามาที่หน้า Account ของเราแล้ว ให้เราไปที่ Account Profile แล้วคลิกที่ Account Settings

เมื่อเราเข้ามาที่หน้า Account Settings แล้ว ให้เราคลิกที่ Account access ด้านขวามือ เราจะเห็นคำว่า API access จากนั้นคลิกที่ Update ครับ

หลังจากกด Update เข้ามาแล้ว ให้เราเลื่อนลงมาเรื่อยๆ เราจะเจอคำว่า NVP/SOAP API integration (Classic) ให้เราคลิกที่ Manage API credentials

เราจะเห็นว่า ตอนนี้เราได้ API ทั้ง 3 รายการมาเรียบร้อยแล้วครับ คือ

• API Username
• API Password
• Signature

ให้เรากด Show ทั้ง 3 รายการ

ทำการ Copy API ทั้ง 3 รายการ โดยคลิกขวาจากนั้นกด Copy

นำ API ที่ได้มากรอกให้ครบทั้ง 3 รายการ API Username, API Password และ Signature แล้วกด Save changes

เรายังเหลือในส่วนของ PayPal identity token ที่เราจะต้องกรอกในการตั้งค่าให้ครบ โดยเราจะไปเอาตรงส่วนนี้มาจากลิงค์นี้ครับ https://docs.woocommerce.com/document/paypal-standard/ เมื่อเราเข้าไปหน้าลิงค์ดังกล่าว จากนั้นเลื่อนลงมาครับ เราจะเจอคำว่า PayPal IPN URL ให้เรา copy ลิงค์ Url ในข้อ 3 มา ดังรูปครับ

เรากลับมาที่หน้า Account Settings อีกครั้งครับ

เราจะเห็นคำว่า Notifications ซ้ายมือด้านล่าง ให้เราคลิกไปหนึ่งทีครับ

ด้านขวามือ เราจะเห็นคำว่า Instant payment notification ซึ่งตัวย่อของมันก็คือ IPN นั่นเองครับ แล้วให้เรากด Update ครับ

เมื่อเรากด Update แล้ว ให้เรากดที่ Choose IPN Settings ตามรูปครับ

หลังจากที่เรากด Choose IPN Settings เราจะเข้าสู่หน้าถัดไป จากนั้นให้เราวาง Url ที่เราทำการ Copy มาครับ แต่อย่าลืมแก้ชื่อโดเมน ให้เป็นชื่อของโดเมนของตัวเองกันด้วยนะครับ แล้วให้เราติ๊กเลือก Receive IPN message แล้วกด Save ครับ

หลังจากเรากด Save แล้วเราจะเห็นข้อความแจ้งขึ้นมาว่า We were unable to validate URL you have entered. Please check your entry and try again. เป็นเพราะว่า เราใช้ Url ที่เป็น Local อยู่ครับ การทำบนเครื่องตัวเองจะไม่สามารถทดสอบ Notifications IPN settings ได้ครับ

ข้อควรรู้คือ PayPal Account เมื่อเราตั้งค่า IPN ไปแล้ว จะลิงค์ได้เพียง 1 เว็บไซต์ เท่านั้นครับ

สิ่งที่เราต้องทำต่อคือ เรากลับมาหน้า Account Settings อีกครั้งครับ เลื่อนลงมาเราจะเห็นคำว่า Website payments ด้านขวามือ เราจะเห็นคำว่า Website preferences ให้เรากด Update ครับ

หลังจากเรากด Update แล้ว เมื่อเจอหน้าใหม่ ให้เราเลื่อนลงมา เราจะเจอคำว่า Auto retern ให้เราคลิกเลือกที่ On เราจะเห็นว่าจะมีช่องให้เรากรอก Link Url ว่าจะให้ return Url กลับไปที่หน้าใด

เราจะไปเอาตรงส่วนนี้มาจากลิงค์นี้ครับ https://docs.woocommerce.com/document/paypal-standard/ เมื่อเราเข้าไปหน้าลิงค์ดังกล่าว จากนั้นเลื่อนลงมาครับ เราจะเจอคำว่า Auto-Retern ให้เรา copy ลิงค์ Url ในข้อ 3 ดังรูปครับ

กลับไปที่หน้าของ Paypal ที่เราเลือก On ไว้ ให้เราวางลิงค์ที่ copy มาลงไปครับ อย่าลืมแก้ชื่อโดเมนเป็นชื่อโดเมนของเราด้วยนะครับ จากนั้นกด Save หลังจากเรากด Save แล้ว ระบบจะขึ้นแจ้งว่า Saved ดังรูปครับ

จากนั้นเลื่องลงมาเราจะเจอกับ Payment data transfer เราคลิกที่ On ครับ เมื่อเราคลิกที่ On เราจะเห็นว่า Identity token โชว์ขึ้นมา ให้เรา copy ไปครับ

เรากลับมาที่หน้า Settings Payment ในส่วนของ PayPal กันอีกครั้งครับ ที่เราทำค้างไว้ จุดเดียวคือ PayPal identity token ทำการวาง identity token ที่เรา copy มา ลงไปครับ

ขั้นตอนสุดท้ายคือกด Save changes ครับ

เราไปทำการทดสอบการซื้อ-ขายด้วย PayPal กันครับ โดยให้เราเปิดใน Browser ใหม่เพื่อให้เป็นการ log in จากลูกค้าครับ

จากนั้นให้เราไปที่หน้า Shop กันครับ กดปุ่ม หยิบใส่ตะกร้า

กดสั่งซื้อและชำระเงิน

หน้า Checkout ให้เรากรอกรายละเอียดผู้ซื้อให้เรียบร้อย จากนั้นเลือกชำระเงินด้วย PayPal และกดปุ่ม ดำเนินการต่อด้วย PayPal

ถ้าใครเคย login Paypal ไปแล้ว ก็จะขึ้นหน้าเว็บเป็นลิงค์ sandbox.paypal.com (เป็นโหมดทดสอบ) จากนั้นคลิกที่ปุ่ม Continue

แล้วให้เรากด Pay Now ได้เลยครับ

เมื่อเรากด Pay Now หน้าเว็บไซต์ก็จะทำการ Auto Redirect กลับไปที่หน้าเว็บไซต์ของเราครับ

เราจะเห็นว่า มีรายละเอียดของรายการสั่งซื้อที่เราได้กดสั่งซื้อไปและชำระเงินผ่านระบบของ PayPal เช่น เลขคำสั่งซื้อ, วันที่, อีเมล์, ยอดชำระทั้งหมด และวิธีการชำระเงิน

จากนั้นให้เราไปที่เมนู My account ไปที่ เมนูคำสั่งซื้อที่ด้านซ้ายมือ เราจะเห็นว่า สถานะเป็น รอการชำระเงิน เพราะว่าตัว Paypal ยังไม่มีในส่วนของ IPN setting เราไม่สามารถทำได้เพราะเราทำอยู่บนเครื่องของเรานั่นเองครับ ดังนั้นสิ่งที่เราต้องทำคือ ไปเช็คที่ PayPal ว่าเราได้รับเงินเข้ามาหรือยัง

กลับมาที่หน้า Home ของ Dashboard ใน PayPal ครับ (sandbox.paypal.com ซึ่งเป็นโหมดทดสอบอยู่) ทำให้เราไม่ต้องกังวลเรื่องจ่ายเงินครับ

เลื่อนลงมาที่ส่วนของ Notifications เราจะเจอกับ Recent activity รายการที่ลูกค้าชำระเข้ามาหรือรายการที่เราทดลองจ่ายเงินไว้ล่าสุด ให้เราคลิกลงไปครับ

เราจะเห็นว่า Payment Status เป็น UNCLAIMED คือ การจ่ายเงินยังไม่สมบูรณ์ เพราะถ้าสมบูรณ์แล้วจะต้องมี IPN ให้เรา

จากนั้นเราเลื่อนลงมา เราจะเจอกับ คำว่า Accept เราคลิกไปครับ

หลังเรากด Accept เราจะมาหน้าหน้าต่อไป ให้เรากด Submit

จะเห็นว่าตอนนี้ Payment Accepted เรียบร้อยแล้วครับ จากนั้นให้เราไปที่เมนู Home ของ Dashboard ครับ

เราก็จะกลับมาหน้า Home ของ Dashboard เลื่อนลงมาที่ส่วนของ Notifications เราจะเจอกับ Recent activity รายการที่ลูกค้าชำระเข้ามาหรือรายการที่เราทดลองจ่ายเงินไว้ล่าสุด ให้เราคลิกเข้าไปดูครับ

ตอนนี้สถานะก็เป็น Completed เรียบร้อย แต่เนื่องด้วยไม่มี IPN ไป เราก็จะต้องไป Manual update สถานะสินค้าของคำสั่งซื้อในเว็บไซต์ของเราเองครับ แล้วต้องไม่ลืมนะครับ แยกให้ออกว่า ตอนที่เราทดสอบอยู่นี้ เราใช้ Sandbox หรือเราใช้ PayPal ของจริงอยู่

เรากลับมาที่ระบบหลังบ้านของ WordPress ให้เราไปที่ WooCommerce แล้วคลิกไปที่ Orders ครับ

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

จากนั้นกด Completed ครับ

เมื่อสถานะสินค้าเป็น Completed แล้ว ตอนนี้ลูกค้าก็สามารถที่จะดาวน์โหลดไฟล์ต่างๆ ได้แล้วครับ

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

เราจะเห็นว่า ตอนนี้ลูกค้าสามารถดาวน์โหลดสินค้าได้แล้วครับ

ในกรณีที่เราต้องการสร้าง Paypal ที่เป็น Developer Account หรือว่า Sandbox mode นะครับ ให้เราไป search ในเว็บไซต์ google.com โดยค้นหาว่า paypal developer account จากนั้นคลิกไปที่ลิงค์ developer.paypal.com

เมื่อเราเข้ามาหน้าเว็บ developer.paypal.com ให้เราคลิกไปที่ Log in to Dashboard หลังจากนั้น ระบบก็จะให้เราทำการสร้าง Developer Account สร้างเป็น Sandbox Account ขึ้นมาได้ โดยเราจะต้องตั้งค่า email ที่เป็น merchant หรือเป็น customer ได้ รวมถึงการตั้งค่ารหัสผ่านด้วย แต่ถ้าใครไม่อยากยุ่งยากตรงส่วนนี้ ผมแนะนำว่า ให้เราสร้างสินค้าที่มีมูลค่าน้อย สำหรับการทดสอบ เราจะได้ไม่ต้องสร้าง Developer Account ครับ

เรามาทบทวนกันอีกนิดครับ สำหรับการ Set up PayPal ครับ โดยให้เราคลิกไปที่ Account Settings ถ้าใครมองไม่เห็น ให้สังเกตว่าจะมีรูปฟันเฟืองครับ

มาที่ Account access แล้วเราไปที่ API access ให้เรากด Update

หลังจากที่เรากด Update ให้เราเลื่อนลงมา เราจะเจอกับ NVP/SOAP API integration (Classic) ให้เราคลิกที่ Manage API credentials

เราจะเห็นว่า ตอนนี้เราได้ API ทั้ง 3 รายการมา คือ3

• API Username
• API Password
• Signature

กดให้ Show ทั้ง 3 รายการ จากนั้น Copy API Token ในแต่ละรายการ เอาไปใส่ใน PayPal Payment ของเราใน Woocommerce

จากนั้นกลัมาหน้า Account Settings อีกครั้งครับ แล้วมาที่ Notifications เหมือนเดิมเลยครับ ซึ่งต้องขอย้ำนิดนึงว่า IPN Setting หรือ Instant payment notifications ตรงนี้ เราจะสามารถตั้งค่าและใช้งานได้จริงก็ต่อเมื่อเราไปจดโดเมนกับโฮสติ้งมาเรียบร้อยแล้วนะครับ ถ้าเราไปทำใน Account ที่เราไม่ได้จดโดเมน โฮสติ้งไว้ หรือเว็บไซต์จำลองที่เราทำอยู่ จะไม่สามารถดำเนินการได้ครับ

จากนั้นเรากลับไปที่ Account Settings อีกครั้ง

ไปที่ Website prefercences แล้วกด Update

แล้วอย่าลืมเปิด Auto return ด้วยนะครับ ใส่ลิงค์เว็บไซต์ของเราลงไป แล้วกด Save

สุดท้ายคือ ให้เรามาที่ Payment data transfer แล้วกด On ครับ เพื่อให้ระบบโชว์ Identity Token ขึ้นมา ในการกด On แต่ละครั้ง เราจะต้อง Copy Identity Token ไปใส่ในระบบ PayPal Payment ของเราใน Woocommerce ทุกครั้ง ถ้าเราไปใช้ของเก่า เราจะใช้ไม่ได้ครับ

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

ผมได้ทำวีดีโอ วิธีการตั้งค่าชำระเงินผ่าน PayPal เอาไว้ที่นี่แล้วครับ

กลับสู่สารบัญ

การตกแต่งร้านค้าออนไลน์ด้วย Woocommerce Widgets

เครื่องมือสำหรับ ตกแต่งร้านค้าที่สำคัญอย่างมากอีกตัวหนึ่งก็คือ เจ้า Sidebar และ Widget ครับ เราเริ่มจาก เราจะมาดูกันว่า Widget จะเอาไปใส่ไว้ตรงส่วนไหนครับ โดยให้เราไปที่หน้า Shop เราจะเห็นว่าด้านขวามือของเรามี Sidebar อยู่

และถ้าใครยังไม่มีพื้นฐานด้าน WordPress Sidebar มาก่อน ผมแนะนำให้ลองดูวิดีโอด้านล่างนี้ก่อนครับ เพื่อทำความเข้าใจเรื่องวิธีการใช้ WordPress Sidebar ก่อนไปทำการติดตั้ง Woocommerce Widget ครับ

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

ก่อนอื่นเราไปดูกันก่อนครับว่าธีมที่เราใช้นั้น มี Sidebar อยู่กี่อันครับ โดยให้เราไปที่ Apperance จากนั้นคลิกที่ Widgets ครับ

จากรูปเราจะเห็นว่า ในธีมนี้ มี Sidebar หรือว่า Widget Area ที่อยู่ทางด้านขวามือของเนื้อหา มี Sidebar อยู่เพียง 1 อัน

Sidebar หรือ Widget Area ในระบบหลังบ้านของ WordPress

วิธีการสร้าง Woocommerce Sidebar

เราควรที่จะทำการแยก Sidebar เป็น Shop Sidebar, Product Sidebar และ Sidebar ในหน้าปกติ เราจะทำอย่างไร? ให้เราไปที่ Plugin แล้วกด Add New ครับ

เมื่อเราเข้ามาหน้า Plugin โดยเราค้นหา Plugin ที่ต้องการ โดยใช้ Keyword ที่เราต้องการค้นหา โดยเราจะทำการติดตั้งปลั๊กอิน Lightweignt Sidebar Manager จากนั้นคลิก Install Now เพื่อติดตั้ง Plugin

ติดตั้งเสร็จแล้ว กด Activate เพื่อเปิดการใช้งาน Plugin ได้เลย

เราไปเริ่มสร้าง Sidebar กันเลยครับ ให้ไปที่ Appearance เราจะเห็นว่ามีคำว่า Sidebars ขึ้นมา เราก็คลิกที่ Sidebars ครับ

เมื่อเราเข้ามาที่หน้า Sidebars เราคลิกที่ Add New

ขั้นตอนการเพิ่ม Sidebar

1. ตั้งชื่อ Sidebar
2. เลือกตำแหน่งว่า จะให้แทนที่ Sidebar จุดใด
3. ใส่คำอธิบายให้ Sidebar
4. เลือกว่าจะให้แสดงที่หน้าใดของเว็บไซต์ โดยเราสามารถเลือกได้มากกว่า 1 หน้า โดยคลิกที่ Add Display Rule
5. เราจะให้ใครสามารถเห็น Sidebar นี้ได้บ้าง
6. อย่าลืมกด Publish นะครับ

เพิ่ม Sidebar ที่สองกันครับ ผมจะเพิ่ม Product Sidebar

เรากลับมาดูที่หน้า Widget อีกครั้ง เราจะเห็นว่ามี Product Sidebar กับ Shop Sidebar เพิ่มขึ้นมาแล้วครับ

ทางด้านซ้ายมือ เราจะเห็น Widget ที่มีให้ใช้งานในระบบของเราครับ โดยให้ไปเลือก Widget ที่ต้องการ

เมื่อเราคลิกที่ Widget ที่เราต้องการแล้ว โดยผมจะเลือก Product Categories หรือ หมวดหมู่สินค้า จากนั้นให้เราเลือกชื่อ Sidebar ที่ต้องการเพิ่ม Widget ตัวนี้เข้าไป แล้วกดปุ่ม Add Widget ได้เลยครับ

เมื่อเรากดปุ่ม Add Widget ไปแล้ว เราจะเห็นว่า Widget ที่เราเลือกไปแสดงใน Sidebar ที่เราเลือกไว้ จากนั้นให้เราปรับแต่งค่า Widget ครับ ในที่นี้ผมเลือก Product Categories เราก็จะไปทำการปรับแต่งค่าต่างๆ ดังนี้ครับ

1. Title แก้ไขหัวข้อหรือชื่อของ Widget Title
2. Order by เลือกการจัดเรียงว่าจะให้เรียงจากอะไร โดยผมเลือกเป็น Name ครับ
3. เลือกรูปแบบที่จะให้แสดง จะมี ดังนี้ครับ
   – Show as dropdown คือ แสดงเป็นแบบ Dropdown
   – Show product counts คือ แสดงจำนวนสินค้า ในแต่ละหมวดหมู่
   – Show hierarchy คือ แสดงแบบลำดับชั้น
   – Only show children of the current category ถ้าเราเลือกไปในหมวดหมู่ จะให้แสดงเฉพาะลูกของหมวดหมู่นั้น
   – Hide empty categories ให้ซ่อนหมวดหมู่ที่ว่างหรือยังไม่มีสินค้า
4. Maximum depth เลือกว่าจะให้แสดงความลึกในแต่ละหมวดหมู่สินค้ากี่ชั้น

จากนั้นเรามาเลือกใส่ Product Search Widget โดยเราเลือก ใส่ไปที่ Product Sidebar ครับ

ขั้นตอนการปรับแต่ง Widget ก็เหมือนเดิมเลยครับ แก้ไขหัวข้อหรือชื่อของ Widget Title จากนั้นกด Save

เรามาดูทางด้านขวา ที่กล่อง Sidebar เราจะเห็นว่ามี Widget ที่เราใส่ไว้คือ Widget Product Search ที่ Product Sidebar และ Widget Product Categories ที่ Shop Sidebar

จากนั้นเรามาเลือกใส่ Product Tag Cloud Widget โดยเราเลือก ใส่ไปที่ Product Sidebar ครับ

เลือกใส่ Filter Products by Price Widget โดยเราเลือก ใส่ไปที่ Shop Sidebar ครับ

เลือกใส่ Products Widget โดยเราเลือก ใส่ไปที่ Product Sidebar ครับ

จากนั้นเรามาดูทางด้านขวา ที่กล่อง Sidebar เราจะเห็นว่ามี Widget ที่เราใส่ไว้ในกล่อง Product Sidebar และ Shop Sidebar

เรามาดูที่หน้า Shop กันครับ เราจะเห็น Shop Sidebar ซึ่งเราใส่ Widget ที่ปรับแต่งไว้ เช่น Filter ราคา, และ Product Categories หรือ หมวดหมู่สินค้า

จากนั้นเรามาดูที่หน้า Product เราจะเห็น Product Sidebar ซึ่งเราใส่ Widget ที่ปรับแต่งไว้ เช่น ค้นหาสินค้า, สินค้าที่น่าสนใจ, tags สินค้า

เพียงเท่านี้เราก็สามารถที่จะใช้ทำการแยก Sidebar ของหน้า Shop, Product และหน้า Blog โดยการใช้เจ้า Plugin Lightweignt Sidebar Manager เพื่อที่จะเลือก Sidebar ให้แสดงในหน้าที่เราต้องการได้แล้วครับ

สำหรับใครที่อยากดูวิธีการ ใส่ Widget แบบภาพเคลื่อนไหว ผมมีวิดีโอครับ

กลับสู่สารบัญ

สอนปรับแต่งหน้า Checkout ใน Woocommerce เพิ่มลด Fields ได้ตามใจ

สำหรับซีรีย์นี้ เราจะมาเรียนรู้กันต่อในเรื่องของการปรับแต่งหน้า WooCommerce Checkout แบบตามใจเรา ซึ่งเวลาที่เราจะปรับแต่ง fields หรือช่องที่ให้ลูกค้ากรอกข้อมูลบนหน้า Checkout นั้น เช่น เราต้องการให้ผู้ใช้กรอกข้อมูล Line id, Facebook profile ลงไป เราก็สามารถทำได้ครับ หรือในกรณีที่เราขายสินค้าที่ Download อย่างเดียว User ไม่ต้องกรอกข้อมูลในส่วนของที่อยู่ เราก็สามารถเลือกปิดตรงส่วนนี้ได้ครับ

ก่อนอื่นเรามาดูหน้าตาของหน้า Checkout กันก่อนครับว่า หน้าตาเป็นอย่างไร โดยเราจะต้อง Shopping สินค้าเข้าไปก่อน หลังจากที่เรา Shopping ไปแล้ว เราก็จะได้เห็นว่าหน้า Checkout เป็นอย่างไร

ให้เรามาที่หน้า Shop เลือกหยิบสินค้าใส่ตะกร้า จากนั้นกดปุ่ม ดูตะกร้าสินค้า

เมื่อเรามาที่หน้าตะกร้าสินค้า กดสั่งซื้อและชำระเงิน

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

โดยเรามาเริ่มกันที่ การติดตั้ง Plugin กันก่อนครับ ให้เราไปที่ Plugin จากนั้นคลิก Add New

เมื่อเราเข้ามาหน้า Plugin ให้เราค้นหา Plugin ที่ต้องการ โดยใช้ Keyword ที่เราต้องการค้นหา ในกรณีนี้ เราจะทำการติดตั้งปลั๊กอิน WooCommerce checkout field จากนั้นคลิก Install Now เพื่อติดตั้ง Plugin

ติดตั้งเสร็จแล้ว กด Activate เพื่อเปิดการใช้งาน Plugin ได้เลยครับ

หลังจากนั้นให้เราไปที่ WooCommerce แล้วคลิก Checkout Form

เราก็จะเจอกับหน้า Checkout Field Editor โดยจะแบ่งเป็น 3 ส่วนคือ

1. Billing Fields คือ ที่อยู่สำหรับการเก็บเงิน
2. Shipping Fields คือ ที่อยู่สำหรับการจัดส่ง
3. Additional Fields คือ อื่นๆ

เราจะมาเริ่มกันที่ Billing Fields กันครับ หากเราขายสินค้าเป็นลักษณะดิจิตอล เราไม่จำเป็นต้องให้ลูกค้ากรอกรายละเอียดที่อยู่ เราสามารถทำการ Disable ฟิลด์ที่เราไม่ต้องการให้แสดงไว้ได้ครับ

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

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

ให้เรากลับมาที่หน้า Checkout Fileds อีกครั้งครับ คราวนี้เราลองเปิดกลับคืนมาดูครับ ให้เราคลิกที่หน้าฟิลด์ที่เราต้องการเปิด จากนั้นกด Enable แล้วกด Save changes

กลับมาที่หน้า Checkout ของเราอีกครั้งครับ จากนั้นกด Refresh เราจะเห็นว่า ฟิลด์หรือช่องสำหรับให้ลูกค้ากรอกที่เราเปิด กลับมาโชว์เรียบร้อยแล้วครับ

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

เราจะเห็นว่าระบบแจ้งเตือนเราทันทีว่า ให้เราใส่ที่อยู่เพื่อการจัดส่ง

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

จากนั้นกดสั่งซื้อ

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

ส่วนร้านใดที่ขายสินค้าที่เป็น Physical Product หรือสินค้าที่จับต้องได้ ก็จะต้องใช้ระบบการจัดส่ง ซึ่งจำเป็นที่จะต้องมีฟิลด์สำหรับให้กรอกรายละเอียดที่อยู่ครับ ดังนั้นเราควรต้องกลับไปเปิดฟิลด์สำหรับให้กรอกรายละเอียดที่อยู่ครับ ขั้นตอนก็เหมือนเดิมเลยครับ ให้เรากลับมาที่หน้า Checkout Fileds อีกครั้งครับ จากนั้นคลิกที่หน้าฟิลด์ที่เราต้องการเปิดกลับคืนมา จากนั้นกด Enable แล้วกด Save changes ครับ

ขั้นตอนต่อมาคือ เราต้องการที่จะสร้างฟิลด์ให้ลูกค้ากรอก ตามที่เราต้องการ เช่นเราต้องการให้ลูกค้ากรอก Line ID, Facebook Profile เราสามารถเพิ่มได้ตามที่เราต้องการ เรายังอยู่ที่หน้า Checkout Fileds นะครับ โดยขั้นตอนแรกให้เราคลิกไปที่ปุ่ม Add Field

จะมีหน้า New Checkout Field ขึ้นมา ให้เรากรอกรายละเอียด ดังนี้ครับ

1. Name คือ ใส่ชื่อ Fied
2. Label คือ ใส่ชื่อ Label หรือชื่อหัวข้อของฟิลด์นั้นๆ
3. Placeholder คือ กรอกข้อความที่จะเป็นตัวอย่างการกรอกในฟิลด์
4. กด Save

ก่อนหน้าของการกด Save เราจะเห็นว่ามีรายการใ้หเราเลือก 4 รายการ คือ

• Required คือ จำเป็นที่จะต้องกรอก
• Enabled คือ เปิดการใช้งานฟิลด์นี้
• Display in Emails คือ ให้แสดงรายละเอียดฟิลด์นี้ในอีเมล์
• Display in Order Detail Pages คือ ให้แสดงรายละเอียฟิลด์นี้ในหน้า Order

หากหลังจากที่เรากด Save แล้ว มีการขึ้นแจ้งเตือนว่า NAME/ID must begin with a lowercase letter ([a-z]) and may be followed by any number of lowercase letter, digits ([0-9]) and underscores (“_”) นั้นหมายความว่า เราให้กรอกชื่อฟิลด์ โดยต้องใช้ภาษาอังกฤษพิมพ์เล็กนำหน้าจากนั้น สามารถตามด้วยตัวเลขและเครื่องหมายขีดล่าง _ ได้ครับ (จะสังเกตว่าในขั้นตอนก่อนหน้า ตรง Name ผมได้กรอกเป็น billing_Line ซึ่งไปใช้ L ตัวพิมพ์ใหญ่ ระบบก็เลยขึ้นแจ้งเตือนครับ

ต่อมาเรามาเพิ่มกันอีกซักฟิลด์นึงครับ คือ Facebook Profile โดยขั้นตอนก็เหมือนเดิมเลยครับ ให้เราคลิกไปที่ปุ่ม Add Field จะมีหน้า New Checkout Field ขึ้นมา ให้เรากรอกรายละเอียดต่างๆ คือ Name, Label และ Placeholder ให้ครบ จากนั้นกด Save ครับ

ให้เราไปทำการสั่งซื้อสินค้าจากหน้า Shop กันอีกครั้งครับ จากนั้นกดสั่งซื้อและชำระเงิน

เมื่อเรามาถึงหน้า Checkout เราจะเห็นว่า ฟิลด์ที่เราเพิ่มไว้ คือ Line ID กับ Facebook Profile โชว์ขึ้นมาเรียบร้อยแล้วครับ

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

เมื่อหน้า Edit Checkout Field แสดงขึ้นมาเราก็เข้าไปแก้ไขที่ Class ครับ แล้วแก้ไขจากเดิมที่เป็น from-row-wide ให้เราแก้ที่คำสุดท้าย คือ แก้เป็น from-row-first ครับ แล้วกด Save

จากนั้นให้เราไปที่ Edit ของฟิลด์ที่สองคือ Facebook Profile ครับ เมื่อหน้า Edit Checkout Field แสดงขึ้นมาเราก็เข้าไปแก้ไขที่ Class ครับ แล้วแก้ไขจากเดิมที่เป็น from-row-wide ให้เราแก้ที่คำสุดท้าย คือ แก้เป็น from-row-last ครับ แล้วกด Save

เรากลับมาที่หน้า Checkout อีกครั้งครับ แล้วกด Refresh หน้าเว็บไซต์ 1 ครั้ง เราจะเห็นว่า ฟิลด์ที่เราเพิ่มไว้ คือ Line ID กับ Facebook Profile โชว์ขึ้นมา โดยวางอยู่บรรทัดเดียวกันเรียบร้อยแล้วครับ

ส่วนต่อมาที่เราจะดูกันในหน้า Checkout ก็คือ Shipping details หรือ ฟิลด์กรอกรายละเอียดสำหรับการจัดส่งครับ

โดยให้เรากลับมาที่หน้า Checkout Fields แล้วให้เราคลิกไปที่ Shipping Fields ซึ่งก็จะลักษณะคล้ายกับ Editing Field ที่เราทำไปก่อนหน้านี้เลยครับ คือ ให้เราคลิกที่หน้าฟิลด์ที่เราต้องการจะ Disable หรือไม่ต้องการให้แสดง โดยผมเลือกที่ Shipping_company จากนั้นกดปุ่ม Disable แล้วอย่าลืมกดปุ่ม Save ด้วยนะครับ

จากนั้นให้เรามาที่ Additional Fields ซึ่งเราสามารถเพิ่มฟิลด์อื่นๆ ได้ นอกเหนือจาก Text field ครับ จากนั้นให้เราคลิกที่ Add field

เมื่อหน้า Edit Checkout Field แสดงขึ้นมาเราก็เข้าไปดำเนินการดังนี้ครับ

1. เลือก Type เป็น Select
2. ใส่ชื่อ field โดยผมใส่เป็น additional_gift
3. ใส่ชื่อ Label โดยผมใส่เป็น ห่อของขวัญ
4. มาที่ Options ผมจะใส่เป็น 2 ตัวเลือก (Option) โดยตัวเลือก แรกคือ ห่อ จากนั้นกดปุ่มที่มีเครื่องหมาย + เพื่อเพิ่มอีกตัวเลือก โดยตัวเลือกที่สอง คือ ไม่ห่อ จากนั้นกด Save

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

โดยให้เราคลิกที่เมนู My account ครับ จากนั้นไปที่ คำสั่งซื้อ เลือกหมายเลขคำสั่งซื้อล่าสุด คลิกเข้าไปดูกันครับ

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

เป็นอย่างไรกันบ้างครับ การปรับแต่งหน้า Checkout ใน WooCommerece และการเพิ่มลด Fields ต่างๆ ด้วยตัวเอง ไม่ยากเลยใช่มั้ยครับ

สำหรับคนที่ชอบ Version Video ผมมีวิดีโอ ปรับแต่ง หน้า Checkout ใน WooCommerce เพิ่มลด Fields ได้ตามใจเรา มาให้ดูกันด้านล่างนี้เลยครับ

กลับสู่สารบัญ

สอนวิธีจัดการ คำสั่งซื้อ ใน Woocommerce แบบมือโปร

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

สำหรับระบบการจัดการคำสั่งซื้อของระบบ Woocommerce จะอยู่ที่ตรงนี้ครับ ให้เราไปที่ Woocommerce จากนั้นคลิกที่ Orders ครับ

เมื่อเราเข้ามาที่หน้า Orders เราจะเห็นคำสั่งซื้อ ที่เราทดสอบเอาไว้ก่อนหน้านี้ครับ เราจะเห็นว่ามีสถานะต่างๆ เช่น On hold คือ ลูกค้าสั่งซื้อเข้ามาแต่ยังไม่ได้ชำระเงิน เช่น การสั่งซื้อแบบการโอนชำระเงิน, Processing คือ ลูกค้าชำระเงินเรียบร้อยแล้ว โดยอาจจะผ่าน PayPal หรืออาจจะเก็บเงินปลายทาง ดังนั้น จึงอยู่ในระหว่างการจัดส่ง, Completed คือ จัดส่งสินค้าเรียบร้อยแล้ว ซึ่งก็คือ สถานะที่เสร็จสมบูรณ์แล้วนั้นเองครับ

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

เราจะเห็นหน้ารายละเอียด Order ดังกล่าวโชว์ขึ้นมา ให้เรากดปุ่ม Completed เพื่อเปลี่ยนสถานะสินค้าจาก Processing เป็น Completed

กรณีลูกค้าต้องการเพิ่มสินค้าหรือรายละเอียดต่างๆ

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

เราจะเห็นหน้ารายละเอียด Order ดังกล่าวโชว์ขึ้นมา ให้เรากดปุ่ม Edit

ขั้นตอนแรกคือ ให้เราไปที่ Status หรือ สถานะ โดยเปลี่ยนจากสถานะ Processing มาเป็น On hold เพื่อให้สามารถเพิ่มสินค้าเข้าไปได้ และในกรณีที่เราต้องการแก้ไขรายละเอียดในส่วนของ Billing และ Shipping เราก็สามารถทำได้ครับ ได้ โดยการคลิกไปที่รูปดินสอ (ตามรูป) หลังจากเปลี่ยนสถานะเป็น On hold แล้วกด Update ได้เลย

หลังจากเรากด Update แล้ว ให้เราเลื่อนลงมาด้านล่าง เราจะเห็นว่ามีปุ่มให้สามารถเพิ่มสินค้าได้ โดยคลิกไปที่ปุ่ม Add item(s) ครับ

จากนั้นเราจะเห็นว่าที่ด้านขวามือมีปุ่ม Add product(s) ขึ้นมา ให้เราคลิกไปหนึ่งทีครับ เมื่อเราเห็นว่ามีหน้าเล็กๆ ชื่อ Add products โชว์ขึ้นมา ให้เราพิมพ์ค้นหาสินค้าที่เราต้องการเพิ่มลงไป ใส่จำนวนสินค้า แล้วกดปุ่ม Add ครับ

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

เราจะเห็นว่าตอนนี้ระบบได้ทำการคำนวณค่าสินค้าทั้งหมดให้ใหม่เรียบร้อยแล้ว

สุดท้ายอย่าลืมกด Update ด้วยนะครับ และการ Update ข้อมูลทั้งหมดตรงนี้ ก็จะไปแสดงที่หน้า My account ของลูกค้าด้วยครับ

กลับมาดูที่หน้าเมนู My account กันครับ ให้เราไปที่คำสั่งซื้อ จากนั้นคลิกที่หมายเลขคำสั่งซื้อ ที่เราได้ทำการเพิ่มสินค้าเข้าไปก่อนหน้านี้ครับ

เราจะเห็นว่าที่รายละเอียดการสั่งซื้อ มีสินค้าที่ Add เพิ่มเข้ามา และ บอดรวมคำสั่งซื้อทั้งหมด โชว์อยู่ที่รายละเอียดคำสั่งซื้อ เรียบร้อยครับ

การตั้งค่า Account และ Privacy ในส่วนของลูกค้า

ให้เรามาที่ WooComerce จากนั้นคลิกที่ Tab ชื่อ Account & Privacy โดยมีรายละเอียด ที่สำคัญๆ ดังนี้ครับ

Guest checkout จะมี 2 ตัวเลือก

• Allow customers to place orders without an account คือ ให้ Checkout ได้โดยไม่จำเป็นต้องมี Account
• Allow customers to log into an existing account during checkout คือ กรณีมี Account แล้ว ให้สามารถ login ได้ ในระหว่าง checkout (โดยเราเลือกที่ข้อนี้ครับ)

Account creation จะมี 4 ตัวเลือก

• Allow customers to create an account during checkout คือ ให้สามารถสร้าง Account ได้ในตอน Checkout (โดยเราเลือกที่ข้อนี้ครับ)
• Allow customers to create an account on the “My account” page คือ อนุญาตให้สร้าง Account ได้ ในหน้า My account (ซึ่งข้อนี้ผมไม่แนะนำครับ เพราะมันจะทำให้เราอาจจะเจอกับคนมาสร้าง Account มั่ว หรือมาสแปม ซึ่งไม่ปลอดภัยกับระบบครับ)
• When creating an account, automatically generate an account username for the customer based on their name, surname or email คือ ในตอนที่ลูกค้าสร้าง Account จะให้มีการสร้าง username โดยอัตโนมัติหรือไม่ (โดยเราเลือกที่ข้อนี้ครับ)
• When creating an account, automatically generate an account password คือ ในตอนที่ลูกค้าสร้าง Account จะให้มีการสร้าง password โดยอัตโนมัติหรือไม่

สุดท้าย อย่าลืมกด Save changes โดยหลังจากนี้หากมีลูกค้าใหม่ๆ เข้ามาสั่งซื้อสินค้าในเว็บไซต์ของเรา ก็จะต้องสร้าง Account ก่อนครับ

จัดการ กรณีลูกค้าต้องการคืนสินค้า (Refund)

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

เราจะเห็นหน้ารายละเอียด Order ดังกล่าวโชว์ขึ้นมา ให้เรากดปุ่ม Edit

เลื่อนลงมาด้านล่าง คลิกที่ปุ่ม Refund

โดยเราสามารถเลือกใส่ข้อมูลได้ ดังนี้

1. Refund amount ใส่จำนวนเงินที่เราจะคืนให้กับลูกค้า
2. Reson for Refund (optional) ใส่เหตุผลในการขอคืนเงิน
3. คลิกที่ปุ่ม Refund ซึ่งโดยปกติ ถ้าเรามีการเชื่อมต่อกับระบบ PayPal หรือ Payment gateway ที่รองรับการ refund แบบอัตโนมัติ ถ้าเรากดปุ่มนี้ปุ๊ป ระบบก็จะทำการคืนเงินให้ลูกค้า ใน Payment gate way เลย
4. กด ตกลง

จากนั้นเลื่อนขึ้นมา เลือก Status หรือ สถานะ เป็น Refund แล้วกด Update

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

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