สอน 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 ที่อธิบายไว้เรียบร้อยแล้ว สามารถดูได้ผ่านช่องทางด้านล่างนี้เลยครับ

เราสร้าง 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 และ บัตรเครดิต อาจจะต้องรอการคืนเงินในรอบบิลถัดไปครับ

การแก้ไขรายละเอียด การสั่งซื้ออื่นๆ ใน Order

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

จากนั้นเลื่อนลงมา ให้คลิกที่ ปุ่ม Add item(s)

จากนั้นกด ปุ่ม Add fee

กรอกค่าธรรมเนียมที่เราต้องการเพิ่ม แล้วกด ตกลง

จากนั้น หากเราต้องการแก้ไขรายละเอียด ค่าธรรมเนียม โดยให้เรากดไปที่รูปดินสอ

ใส่รายละเอียดที่เราต้องการระบุ เกี่ยวกับค่าธรรมเนียม ที่เราต้องการเก็บเพิ่ม เช่น Wrap 10 times แล้วกด Save

เลื่อนขึ้นไปด้านบน จากนั้นกด Update

กรณีที่เราต้องการจะให้ส่วนลดลูกค้า

เรายังคงอยู่ที่หน้าเดิมนะครับ ให้เราไปที่ Add items(s)

กด ปุ่ม Add fee ใส่จำนวนส่วนลดที่เราจะให้กับลูกค้า (การใส่ส่วนลดจะต้องมีเครื่องหมายลบ – นำหน้าตัวเลข) แล้วกด Save ครับ

เราสามารถเข้าไปแก้ไขในส่วนของรายละเอียด จากนั้นกด Save

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

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

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

วิธีการใช้งาน Woocommerce Analytics

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

ให้เราไปที่ Analytics จากนั้น คลิก Revenue

โดยเราจะต้องเลือก Data Range เพื่อที่จะเลือกช่วงเวลาในการดูข้อมูลสถิติยอดขายได้ โดยผมจะเลือกเป็น Month to Date คือ ตั้งแต่ 1 เดือน จนถึงวันนี้ จากนั้นกด Update

เราก็จะเห็นทั้งในส่วนของยอดขาย, ยอดค่าจัดส่ง, ยอดการคืนสินค้า เป็นต้น

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

หรือเราจะเลือกเป็นช่วงเวลาก็ได้เช่นกันครับ ให้ไปคลิกเลือกที่ Data Tange จากนั้นเลือก Custom แล้วกดเลือกช่วงวันที่ที่เราต้องการดูข้อมูล จากวันที่เท่าไหร่ ถึง วันที่เท่าไหร่ จากนั้นกด Update

เเละเนื่องจากว่าเราได้เลือกเป็นช่วงวันที่ 1-2 ซึ่งระยะเวลาเพียง 2 วัน ก็อาจจะไม่เห็นข้อมูลมากนัก เราก็จะเห็นทั้งในส่วนของยอดขาย, ยอดค่าจัดส่ง, ยอดการคืนสินค้า เป็นต้น

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

ตรง Show: All Orders แล้วเลือก Advanced Filters

กด Add a Fitler แล้วคลิกเลือก Order Status

เลือก Order Status เป็น Is Processing แล้วกด Filer ครับ

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

เราลอง Add filter เพิ่มเข้าไปดูกันครับ โดยด้านล่าง Order Status ให้เรากดไแที่ Adda Filter แล้วเลือกคำว่า Products ครับ

เลือก Order Status เป็น Is On hold ด้านล่างในส่วนของ Product คลิกเลือก includes จากนั้นค้นหาสินค้าที่เราต้องการดูข้อมูล โดยผมเลือก Album ครับ แล้วกด Filter

เราจะเห็นว่าระบบได้โชว์ Report ในส่วนของรายการตามที่เรา Filter ไว้ ก็คือ สินค้าคือ Album และอยู่ในสถานะ On hold ซึ่งมีรายการสั่งซื้อ 1 รายการ นั่นเองครับ

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

ให้เราไปที่ Product ครับ

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

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

ที่ Show: คลิกเลือก Comparison

ในส่วนของ Compare Categories ให้เราพิมพ์ค้นหาสินค้าที่เราต้องการจะทำการเปรียบเทียบข้อมูลต่างๆ (อย่างน้อย 2 รายการ) จากนั้นกดปุ่ม Compare

เราก็จะเห็นว่าระบบได้แสดงจำนวนสินค้าใน 3 หมวดหมู่ ที่เรากรองมา คือ Clothing, Hoddies, Accesories คือ ขายไปได้ 8 ชิ้น ยอดขายรวม 1,359 บาท จำนวน 5 Orders ครับ

เราลองเลือกช่วงเวลาแบบเป็น Year to Date กันบ้างครับ แล้วให้เราไปเลือกที่ Show: โดยเลือกโชว์แบบ Single Category จากนั้นไปค้นหาสินค้าที่เราต้องการเปรียบเทียบข้อมูล แล้วกดปุ่ม Compare ครับ

จากนั้นให้เราพิมพ์ค้นหาสินค้าที่เราต้องการเปรียบเทียบข้อมูลทางด้านยอดขาย

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

ต่อมาให้เราไปที่ Analytics แล้วเลือกที่ Revenue ครับ

ให้เราเปลี่ยนจาก Month to Date โดยคลิกที่ Tab แล้วเลือก Year to Date แล้วกด Update ครับ

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

ให้เรากลับมาที่ Analytics แล้วคลิก Products ครับ

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

ตอนนี้เราสามารถที่จะดูข้อมูลต่างๆ ในเรื่องของยอดขาย (Net sales), คำสั่งซื้อ (Orders), รายได้ (Revenue) ของสินค้าต่างๆ ในร้านค้าออนไลน์ของเราได้แล้วครับ เมื่อเรารู้วิธีการจัดการร้านค้าออนไลน์ของเรา ไม่ว่าจะเป็น จัดการคำสั่งซื้อ และดูยอดขายของเราได้ ช่วยเราได้มาก ในเรื่องของการบริหารจัดการร้านค้าออนไลน์ของเรา เก็บสถิติยอดขายสินค้าในร้านเราได้ครับ

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

สอนใช้ Coupon (คูปอง) ใน Woocommerce ทำ Promotion

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

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

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

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

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

วิธีการสร้างคูปองใน WooCommerce

ให้เราไปที่ WooCommerce จากนั้น คลิกที่ Coupons

และเนื่องจากว่า เราไม่เคยสร้างคูปองมาก่อน เราจะทำการเพิ่มคูปองเข้าครับ โดยกดที่ Add coupon

ขั้นตอนการสร้างคูปองแบบ Percentage discount

การตั้งค่าส่วนของ General

1. เมื่อเราเข้ามาที่หน้า Add new coupon เริ่มจากเราสร้างคูปอง โค้ด เพื่อจะให้ผู้ใช้นำไปกรอกเพื่อรับส่วนลดครับ
2. แล้วใส่คำอธิบายเพื่อให้เรารู้ว่า โค้ดดังกล่าวนี้เกี่ยวข้องกับโปรโมชั่นอันไหน อะไรแบบนั้นครับ
3. ถัดมาคือ ให้เราลงมาในส่วนของ Coupon data แล้วเลือก เราจะเริ่มจากการตั้งค่าในส่วนของ General หรือการตั้งค่าทั่วไป ส่วนแรกที่เราจะเจอคือ Discount type หรือประเภทคูปองลดราคา ซึ่งจะมีทั้งหมด 3 ประเภท คือ
   – Percentage discount คือ ให้ส่วนลดเป็นเปอร์เซ็นต์
   – Fixed cart discount คือ ให้ส่วนลดทั้งตะกร้าสินค้าเป็นจำนวนเงิน
   – Fixed product discount คือ ให้ส่วนลดที่ตัวสินค้าโดยตรง
   เราจะเริ่มจาก Percentage discount กันก่อนครับ
4. Coupon amount ใส่จำนวนเปอร์เซ็นต์ที่เราจะให้เป็นส่วนลดกับลูกค้า
5. Coupon expire data ใส่วันหมดอายุของคูปอง
6. ขั้นตอนสุดท้าย อย่าลืมกด Publish ด้วยนะครับ

โดย Discount type เป็นการเลือกประเภทคูปองลดราคา ซึ่งผู้ใช้สามารถเลือกได้ 4 ประเภทด้วยกัน

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

เราจะเห็นว่า ในส่วนของรายการสั่งซื้อ มีข้อมูลส่วนลด 10% ที่เรากำหนดค่าไว้ โชว์ขึ้นมา จากนั้นเราจะเห็นว่า ด้านขวามือของส่วนลด จะมีคำว่า [ลบออก] อยู่ ให้เรากดทำการลบออกรหัสคูปองนี้ไปก่อนครับ

ขั้นตอนการสร้างคูปองแบบ Fixed cart discount

เรากลับมาที่หน้าคูปอง โค้ด ที่เราสร้างก่อนหน้า โดยเราจะเปลี่ยนการตั้งค่า Discount type เป็น Fixed cart discount จากนั้นกด Update ครับ

เรามาที่หน้า Shop แล้วเพิ่มสินค้าเข้ามาอีก 1 ชิ้นครับ

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

เมื่อเรามาดูที่ ยอดรวม เราจะเห็นว่ามีการทำ ส่วนลด 10 บาท ตามที่เรากำหนดไว้เรียบร้อยครับ

ขั้นตอนการสร้างคูปองแบบ Fixed product discount

เรากลับมาที่หน้าคูปอง โค้ด ที่เราสร้างก่อนหน้า โดยเราจะเปลี่ยนการตั้งค่า Discount type เป็น Fixed product discount จากนั้นกด Update ครับ

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

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

เรามาดูที่ส่วนของ รายการสั่งซื้อ เราจะเห็นว่าที่ส่วนลดนั้น เป็น -20 ทั้งๆ ที่เราตั้งค่าส่วนลดไว้ 10 บาท นั่นเป็นเพราะว่า สินค้าที่เราเลือกซื้อมีจำนวน 2 ชิ้นนั่นเองครับ

และนี่ก็คือ ความหมายของส่วนลดทั้ง 3 แบบครับ

การตั้งค่า Usage restriction

Usage restriction หรือ ข้อจำกัดการใช้งาน หมายถึง การที่เราสามารถกำหนดยอดสั่งซื้อขั้นต่ำในการใช้คูปอง, ยอดขั้นสั่งซื้อขั้นสูงสุดที่จะสามารถใช้คูปอง รวมทั้งหมวดหมู่ของสินค้าที่สามารถใช้คูปองได้ครับ

ให้เรากลับไปที่ General แล้วเลือก Discount Type กลับไปเป็น Percentage discount แล้วกด Update ครับ

• จากนั้นให้เรามาที่ Usage restriction ส่วนแรกคือ Minimum spend เป็นการให้เราใส่ยอดสั่งซื้อขั้นต่ำใช้การใช้คูปอง ซึ่งเราจะใส่เป็น 10,000 บาท ไปครับ
• ถัดมาคือ Maximum spend เป็นการใส่ยอดสั่งซื้อขั้นสูงสุดที่จะใช้คูปองนี้ได้ ซึ่งเราจะใส่เป็น 5,000 บาท ไปครับ
• ติ๊กถูกเลือกที่ Individual use only หรือ ไม่อนุญาติให้ใช้ร่วมกับคูปองอื่นๆ ในกรณีถ้าหากลูกค้าใส่ส่วนลดคูปองอื่นไปแล้ว จะไม่สามารถใช้คูปองนี้ได้
  สำหรับตัวเลือกด้านล่างที่เราไม่ได้ติ๊กเลือกนั้นคือ Exclude sale item หมายถึง อนุญาติให้ใช้กับสินค้าลดราคาได้หรือไม่ ถ้าหากว่าในตะกร้าสินค้ามีสินค้าชิ้นใดชิ้นหนึ่งที่ลดราคาอยู่แล้ว จะไม่สามารถใช้คูปองนี้ได้
• กด Update

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

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

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

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

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

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

การตั้งค่า Usage restriction ในส่วนของ Products

ในส่วนของ Products ใน Usage restriction คือ การกำหนดสินค้าที่สามารถใช้ร่วมกับคูปองนี้ โดยให้เราไปที่ลบข้อมูลตัวเลขที่เรากำหนดไว้ใน ช่องใส่ข้อมูล Minimum Spend และ Maximum Spend จากนั้นลงมาที่ Products โดยทำการพิมพ์ค้นหาสินค้าที่เราต้องการให้สามารถใช้ร่วมกับคูปองนี้ได้ โดยผมจะเลือก Products เป็นเสื้อกีฬา แล้วกด Update ครับ

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

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

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

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

การตั้งค่า Usage restriction ในส่วนของ Product categories

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

ให้เราไปที่ Product categories จากนั้นค้นหาหมวดหมู่สินค้า เพื่อจะกำหนดให้ใช้ร่วมกับคูปองใบนี้ได้ แล้วกดปุ่ม Update ครับ

เมื่อเรามาที่หน้า Cart แล้ว (ในกรณีมีส่วนลดของคูปองที่เรากรอกไปก่อนหน้าให้กดคำว่า [ลบออก] เพื่อเคลียร์ค่าเก่า) จากนั้นทำการกรอกคูปอง โค้ด แล้วกด ใช้คูปอง

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

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

การตั้งค่า Usage restriction ในส่วนของ Exclude categories

Exclude Categories คือ การกำหนดหมวดหมู่สินค้าที่ไม่สามารถใช้ร่วมกับคูปองนี้ได้

ให้เราไปที่ Exclude Categories จากนั้นค้นหาหมวดหมู่สินค้า เพื่อจะกำหนดให้ไม่สามารถใช้ร่วมกับคูปองใบนี้ได้ แล้วกดปุ่ม Update ครับ

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

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

การตั้งค่า Usage limits

คือ การจำกัดการใช้งาน (Usage limits) เป็นการกำหนดลิมิตจำนวนการใช้งานต่อคูปอง และลิมิตจำนวนการใช้งานต่อผู้ใช้งาน

ก่อนอื่นให้เราทำการ reset ค่าเก่าที่เราตั้งไว้ในส่วนของ Usage restriction ออก จากนั้น ไปที่ Usage limits ครับ

เราจะเห็นว่ามีช่องให้กรอกทั้งหมด 3 ส่วน คือ

• Usage limit per coupon คือ ระบุจำนวนครั้งจำกัดในการใช้งานคูปอง
• Limit usage to X items คือ ระบุจำนวนสินค้าในการใช้งานคูปองต่อการสั่งซื้อในแต่ละครั้ง
• Usage limit per user คือ ระบุการจำกัดจำนวนในการใช้งานคูปองต่อคน

ให้เราไปที่ Usage limit per coupon ครับ จากนั้นใส่ค่าจำกัดจำนวนในการใช้คูปองตามที่เราต้องการ จากนั้นกดปุ่ม Update

เมื่อเรามาที่หน้า Cart แล้ว จากนั้นทำการกรอกคูปอง โค้ด แล้วกด ใช้คูปอง

เราจะเห็นว่าหลังจากเรากรอก คูปอง โค้ด เข้าไป สามารถใช้งานได้ตามปกติ

จากนั้นกดปุ่ม สั่งซื้อ เพื่อให้จบกระบวนการสั่งซื้อในออเดอร์นี้ครับ

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

การเพิ่ม, การแก้ไขและการลบคูปอง

สำหรับการเพิ่มคูปอง ให้เราไปที่เมนู WooCommerce แล้วคลิกที่ Coupons

การเพิ่มคูปอง ไปที่ Add counpon
การแก้ไขคูปอง นำเมาส์ชี้ที่แถวคูปองที่ต้องการแก้ไข แล้วคลิก Edit
การลบคูปอง นำเมาส์ชี้ที่แถวคูปองที่ต้องการแก้ไข แล้วคลิก Trash

ในการ Add คูปองเข้าไปใหม่ในแต่ละครั้ง พยายามไปที่ Usage Restriction แล้วติ๊กเลือก Individual use only ทุกครั้ง ซึ่งก็คือ ในการซื้อสินค้าแต่ละครั้ง ใช้ได้เพียง 1 คูปองเท่านั้น เพื่อป้องกันไม่ให้มีการกรอกคูปองส่วนลดหลายอันต่อการซื้อในแต่ละครั้ง ซึ่งจะทำให้ส่วนลดที่เกิดขึ้นมากเกินกว่าที่เราต้องการ เราอาจจะขาดทุนได้นั่นเองครับ

ทั้งหมดนี้ก็คือ เรื่องการสร้างและการบริหารจัดการคูปอง (Coupon) ในระบบ Woocommerce เพื่อทำ Promotion ครับ

สำหรับคนที่ชอบ Version Video สามารถรับชมได้ที่ วิดีโอทางด้านล่างนี้ครับ

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

สอนวิธีการคิดค่าขนส่ง ใน Woocommerce

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

โดยใน Woocommerce เราจะแบ่งเป็น

1. ​Shipping Zone
2. Shipping Option
3. Shipping Class

การตั้งค่าขอบเขตการขนส่ง (Shipping Zone)

ให้เราไปที่ WooCommerce แล้วคลิก Settings

เลือก Tab ที่ชื่อว่า Shipping จากนั้นกด Add shipping zone ครับ

เราจะมาเริ่มจากเขตพื้นที่กรุงเทพฯ กันก่อนครับ โดยให้เราใส่ชื่อเขตพื้นที่การจัดส่ง (Zone name) ว่า Bangkok จากนั้นเลือกจังหวัดที่ต้องการให้อยู่ในเขตพื้นที่นี้ (Zone regions) เราเลือก Bangkok, Thailand แล้วกด Add shipping method

Add shipping method ตรงนี้ให้เราเลือกเป็น Flate rate แล้วกดปุ่ม Add shipping method ครับ

แล้วให้เรามาที่ Flate rate ที่เราเพิ่มเข้ามา แล้วคลิกที่ Edit

โดยเราสามารถที่จะแก้ไขที่ Method title เป็นข้อความที่เราต้องการได้ เช่นในที่นี้ ผมจะใช้เป็น EMS ครับ จากนั้นระบุค่าจัดส่งที่เราจะใช้กับการจัดส่งแบบ EMS ในเขตพื้นที่กรุงเทพฯ ดังกล่าว สุดท้ายอย่าลืมกด Save changes ครับ

จากนั้นให้เรา Add shipping method เพิ่มไปอีกครับ โดยเราจะเลือกเป็น Free shipping หรือ ส่งฟรีนั่นเองครับ แล้วกดปุ่ม Add shipping method

ให้เรามาที่ Free shipping แล้วกด Edit

เข้ามาแก้ไขที่ Method title เป็น “ส่งฟรี” ในส่วนของ Free shipping reqires กรณีที่เราเลือกเป็น A minimum order amount หรือกำหนดยอดสั่งซื้อขั้นต่ำจึงจะส่งฟรี และที่ Mininmum order amount ให้เราใส่ยอดสั่งซื้อขั้นต่ำ โดยผมจะกำหนดเป็น 2,000 บาท แล้วกด Save changes ครับ

อีกในกรณีนึงของ Free shipping reqires คือ ถ้าเราเลือกเป็น A minimum order amount OR a coupon หมายถึง การกำหนดยอดสั่งซื้อขั้นต่ำและให้ใช้คูปองส่วนลดได้ด้วย

เราลองเพิ่ม Shipping method โดยเลือกเป็น Local pickup แล้วกดปุ่ม Add shipping method

กดเข้าไป Edit ที่ Local pickup

ขั้นตอนก็เหมือนเดิมเลยครับ แก้ไขที่ Title เป็นข้อความที่เราต้องการ เช่นในที่นี้ ผมจะใช้เป็น “มารับเอง” ครับ จากนั้นในส่วนของ Cost หรือค่าจัดส่งเป็น 0 แล้วกด Save changes ครับ

การเพิ่มเขตพื้นที่การจัดส่ง

ให้เราไปที่ Shipping zones

กด Add shipping zone

ลองใส่เป็นเขตพื้นที่ต่างจังหวัดกันดูบ้างครับ โดยให้เราใส่ชื่อเขตพื้นที่การจัดส่ง (Zone name) ว่า Phuket จากนั้นเลือกจังหวัดที่ต้องการให้อยู่ในเขตพื้นที่นี้ (Zone regions) เราเลือก Phuket, Thailand แล้วกด Add shipping method

แก้ไขที่ Method title เป็น EMS จากนั้นระบุค่าจัดส่ง (Cost) ที่เราจะใช้กับการจัดส่งแบบ EMS ในเขตพื้นที่จังหวัดภูเก็ต สุดท้ายอย่าลืมกด Save changes ครับ

เมื่อเราทำการ Add shipping method ให้กับเขตพื้นที่ภูเก็ตเรียบร้อยแล้ว เราสามารถเพิ่ม Shipping zones เป็นทั่วประเทศไทย โดยคิดค่าจัดส่งทั่วประเทศไทย ที่ไม่ใช่พื้นที่กรุงเทพฯ และภูเก็ต

เราจะเห็นว่าจะมีในส่วนของ Locations not covered by your other zones หมายถึง การจัดส่งไปประเทศอื่นๆ โดยให้เรานำเมาส์ไปชี้ที่ด้านล่าง เราจะเห็นคำว่า Manage shipping methods ให้เราคลิกที่ตรงนี้ครับ

ขั้นตอนก็เหมือนเดิมครับ เลือก Flat rate แล้วกด Add shipping method

กด Edit ที่ Flat rate

แก้ไขที่ Method title โดยผมจะใช้เป็น Rest of The World จากนั้นระบุค่าจัดส่ง (Cost) ที่เราจะใช้กับการจัดส่งใน Shpping zone ต่างประเทศ แล้วกด Save changes ครับ

การตั้งค่าตัวเลือกที่ใช้ในการจัดส่ง (Shipping options)

Shipping options การกำหนดตัวเลือกให้กับการขนส่งสินค้า ไม่ว่าจะเป็น ราคา ปริมาณ ผู้ให้บริการขนส่ง เป็นต้น

1. ให้เรามาที่ Shipping options
2. Calculations เป็นการตั้งค่าการคำนวณค่าขนส่ง
   ติ๊กเลือก Enable the shipping calculator on the cart page หากต้องการเปิดการใช้งานการคำนวณค่าขนส่งสินค้าในหน้า Cart หรือตะกร้าสินค้า
3. ติ๊กเลือก Hide shipping costs until an address is entered ซ่อนค่าขนส่งจนกว่าลูกค้าจะป้อนที่อยู่
4. Shipping Destination เป็นการตั้งค่าที่อยู่ในการจัดส่งสินค้า ซึ่งมีอยู่ 3 ตัวเลือก คือ
   – Default to customer shipping address ดีฟอลต์ที่ที่อยู่ในการส่งสินค้า
   – Default to customer billing address ดีฟอลต์ไว้ที่ที่อยู่ในการออกใบเสร็จ (โดยผมเลือกข้อนี้ครับ)
   – Force shipping to the customer billing address บังคับส่งไปยังที่อยู่ในการออกใบเสร็จ
   โดยเราสามารถเลือกให้เป็นอย่างใดอย่างหนึ่ง การตั้งค่าตรงนี้เป็นเพียงการตั้งค่าพื้นฐานไว้ให้ลูกค้าเท่านั้น ลูกค้าสามารถเปลี่ยนแปลงที่อยู่ในการจัดส่งได้ด้วยตัวเอง
5. กด Save changes

เราลองทำการสั่งซื้อสินค้าที่ต้องใช้การจัดส่ง เพื่อมาลองทดสอบการตั้งค่าต่างๆ ที่เราทำกันครับ โดยให้เราเลือกเป็นการจัดส่งใน กรุงเทพฯ เราจะเห็นว่ามีตัวเลือก 3 รายการขึ้นมา คือ EMS, Kerry และมารับเอง ตามที่เราตั้งค่าไว้

แล้วเราลองทำการเพิ่มยอดสั่งซื้อเข้าไป เพื่อให้ครบตามเงื่อนไข ยอดสั่งซื้อถึง 2,000 บาท จัดส่งฟรี เราจะเห็นว่า ตัวเลือกในการจัดส่ง มี “ส่งฟรี” เพิ่มขึ้นมาอีกอันนึง

จากนั้นเราลองเปลี่ยนเป็นจังหวัดภูเก็ตกันดูครับ เราจะเห็นว่า การจัดส่งเหลือเพียง 2 ตัวเลือกคือ EMS และ DHL

คิดค่าจัดส่งต่อจำนวนชิ้น

ให้เรากลับมาที่ Shipping zone แล้วไปเลือกแก้ในโซนที่เราต้องการ เช่นเราต้องการไปแก้ที่ การจัดส่งแบบ EMS ในพื้นที่กรุงเทพฯ เราก็เข้ามาที่ส่วนของ EMS แล้วเข้ามาแก้ไขที่ Cost โดยเมื่อเราเอาเมาส์ชี้ไปที่เครื่องหมาย Question mask ก็จะมีการแจ้งรายละเอียดในการใส่ตัวแปรต่างๆ

โดยเราจะใส่ว่า 50*([qty]/2) คือ 50 บาท ต่อชิ้นหาร 2 (qty คือ ต่อชิ้น) จากนั้นกด Save changes

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

เราลองเพิ่มจำนวนสินค้าเข้าไปเป็น 4 ชิ้น ค่าจัดส่งก็จะเป็น 100 บาท ตามสูตรที่เราตั้งค่าไว้ครับ

อันนี้ก็คือ การใส่สูตรใน Shipping method ที่เป็น flat rate แต่ละอันของระบบ WooCommerce ครับ

การคิดค่าจัดส่งสินค้าตามกลุ่มสินค้า (Shipping classes)

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

อันดับแรกเลย ให้เราไปที่ Shipping classes เมื่อเราเข้ามาในหน้า Shipping classes จะยังไม่มี class อะไร ให้เราไปกด Add shipping class

Shipping classes อันแรกเราอาจจะใส่เป็น “สินค้าทั่วไป” และในส่วนของ slug เราจะต้องใส่เป็นภาษาอังกฤษเท่านั้น Description หรือ คำอธิบายจะใส่หรือไม่ใส่ก็ได้ครับ โดยผมจะใส่เป็น “วิธีการขนส่งสินค้าทั่วไป” จากนั้นกด Add shipping class

โดยเราอาจจะเพิ่มสินค้าแตกหักง่ายไปอีกซัก class ครับ จากนั้นให้เราไปที่ Products แล้วคลิกที่ All Products

เรามาคลิกเลือก Edit ในสินค้าที่เราต้องการตั้งค่า Shipping class

เมื่อเราเข้ามาที่หน้า Edit Product ของสินค้าตัวนั้นแล้ว เราเลื่อนลงมาด้านล่าง ในส่วนของ Product data แล้วไปที่ Shipping เราจะเห็นว่ามีในส่วนของ Shipping class ให้เราเลือกตั้งค่าตามที่เรากำหนด class ไว้ 2 class คือ สินค้าทั่วไปและสินค้าแตกหักง่าย โดยผมจะเลือกเป็น สินค้าทั่วไป ก่อนครับ

แล้วกด Update ครับ

จากนั้นให้เราไปเลือกตั้งค่าให้กับ class ที่เป็นสินค้าแตกหักง่าย โดยผมจะเลือกเป็นแว่นกันแดด (Sunglasses) ให้เราคลิกที่ Edit ครับ

เมื่อเราเข้ามาที่หน้า Edit Product ของสินค้าตัวนี้แล้ว เราเลื่อนลงมาด้านล่าง ในส่วนของ Product data แล้วไปที่ Shipping ให้เราเลือก Shipping class เป็น “สินค้าแตกหักง่าย” แล้วอย่าลืมไปกด Update ด้วยนะครับ

การตั้งราคาให้แตกต่างกันในแต่ละ Shipping class

โดยเรามาที่ WooCommerce แล้วเลือก Settings

จากนั้นกดเลือก Edit โซนที่เราต้องการ โดยผมจะเลือกที่ Bangkok

แล้วเลือกแก้ไขที่ Flat rate ที่เราต้องการ เราจะเลือกคลิก Edit ที่ EMS ครับ

เมื่อเราเข้ามาที่หน้า Flat rate Settings เราจะเห็นว่ามีในส่วนของ Shipping class costs เพิ่มขึ้นมา โดยเราจะไปคิดค่าขนส่งเพิ่มในส่วนของ “สินค้าแตกหักง่าย” แล้วเลือก Calculations type เป็น Perclass: Charge shipping for each shipping class individually ซึ่งก็คือ การเลือกคิดค่าขนส่งใน Class นั้น โดยเฉพาะครับ จากนั้นกด Save changes

แล้วเรากลับมาที่หน้าเว็บไซต์ เลือกซื้อสินค้าที่เราตั้ง shipping class ไว้เป็น สินค้าแตกหักง่าย ซึ่งก็คือ แว่นกันแดด (Sunglasses) เมื่อเรามาที่หน้าตะกร้าสินค้า เราจะเห็นว่า ค่าขนส่งเป็น 70 บาท โดยถูกบวกเพิ่มมา 20 บาท จากที่เรากำหนดไว้ว่า ถ้าเป็นสินค้าแตกหักง่าย Shipping classs cost จะเป็น 20 บาทนั่นเองครับ

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

ต่อมาเราลองมาเลือก Calculations type เป็น Per order: Charge shipping for the most expensive shipping class กันดูบ้างครับ

โดยอันดับแรกคือ ให้เราไปใส่ค่าขนส่งใน No shipping class cost เป็น 30 บาท แล้วเลือก Calculations type เป็น Per order: Charge shipping for the most expensive shipping class ซึ่งก็คือ ในหนึ่งออเดอร์จะถูกคิดค่าขนส่งครั้งเดียว โดยคิดจาก Shipping class ที่แพงที่สุด แล้วกด Save changes

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

และนอกจากนั้น เวลาที่เราสร้าง Shipping class เราก็สามารถที่จะใส่สูตรเข้าไปได้เหมือนกับที่เราใส่ใน Cost ก่อนหน้านี้ เมื่อเราเอาเมาส์มาวางที่เครื่องหมาย Question mask (?) ก็จะมีคำอธิบายที่เป็นตัวแปรสูตรขึ้นมาให้เราครับ และที่สำคัญคือ ต้องไม่ลืมว่า Cost ที่เราใส่ในส่วนของด้านบนที่เป็น flat rate กับส่วนของ Shipping class จะบวกกันเสมอครับ

เป็นยังไงบ้างครับสำหรับการตั้งค่า Shipping class หรือวิธีคิดค่าขนส่งใน WooCommerce นั้น ไม่ยากเลยใช่มั้ยครับ

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

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

แนะนำธีมที่ใช้กับ Woocommerce ทั้งแบบฟรี และ PREMIUM

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

สำหรับการหาธีมฟรีใช้งาน เราสามารถไปที่ Appearance แล้วคลิกที่ Themes

จากนั้นกด Add New

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

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

ต่อมาอีกธีมที่เราจะมาดูก็คือ OceanWP ครับ ธีมนี้ก็เป็นธีมฟรียอดนิยมอีกตัวหนึ่งที่สามารถนำมาทำร้านค้าออนไลน์ได้ครับ นำชื่อธีมไปค้นหา จากนั้นให้เราลองกด Install ดูครับ

กด Activate เพื่อเปิดการใช้งานธีมกันเลยครับ

เมื่อเรามาดูที่หน้าเว็บไซต์ เราจะเห็นว่า มีไอคอน ตะกร้าสินค้ามาให้เราทางด้านขวามือ แต่ธีมเหล่านี้ไม่ว่าจะเป็น Astra หรือ OceanWP เราจะต้องตกแต่งธีมด้วย Page Builder เองครับ เราไม่สามารถที่จะทำแบบสำเร็จรูปเหมือนกับธีม StoreFront ที่เราทำมาในบทเรียนก่อนหน้านี้ได้ครับ

Page Builder ที่ยอดนิยมก็คือ Elementor ครับ ซึ่งเรานำมาใช้ได้ฟรี แต่ในส่วนของการดึงข้อมูลสินค้าใน WooCommerce มาใส่ จะต้องใช้ Addon ครับ ถ้าใครใช้เวอร์ชั่นฟรี ก็จะเป็น Essential Addons เราสามารถใส่ลงไปได้ครับ เพื่อให้มี Widget Woocommerce แต่ถ้าใครกำลังซื้อ ก็อาจจะใช้เป็น Elementtor Pro เราสามารถที่จะใช้ธีมของ Elementor ที่ชื่อว่า Hello ในการออกแบบเว็บไซต์ได้เลยครับ

ต่อมาธีมพรีเมียมหรือที่เราต้องจ่ายเงิน ธีมที่ผมค่อนข้างจะมั่นใจและแนะนำต่อได้ก็คือ Astra ถ้าเราใช้เวอร์ชั่นพรีเมียมจะมีฟังก์ชั่นการใช้งานค่อนข้างครบ โดยผมแนะนำว่าถ้าใครทำเว็บไซต์หลายๆ เว็บไซต์ อาจจะเกิน 5 เว็บขึ้นไป ก็อาจจะเลือกใช้ แบบ Lifetime โดยใช้เป็น Astra Pro ครับ จะค่อนข้างคุ้ม เพราะใช้ได้แบบ Unlimited website เลย หรือถ้าใครพอจะมีทุนหน่อย ก็อาจจะไปใช้เป้น Mini Agency Bundle เพราะว่าจะแถมตัว Ultimate Addons มาให้เราใช้งานกับ Elementor ด้วยครับ

ธีมต่อมาที่เรียกได้ว่า คุ้มค่ามากๆ คือ ธีม Flatsome ซึ่งเป็นธีมที่ค่อนข้างอเนกประสงค์ เราจะทำร้านค้าออนไลน์ก็ได้ หรือจะทำเว็บไซต์ธรรมดาก็ได้ แต่ข้อแตกต่างจาก Astra ก็คือ เราจ่าย 59$ เราจะใช้ได้แค่ธีมเดียว แต่ข้อดีของมันก็คือ เราใช้แค่ธีม Flatsome อย่างเดียว เราแทบไม่ต้องใช้ Plugin อื่นๆ เลยครับ เรียกได้ว่า สมบูรณ์ในตัวเองเลยทีเดียว ที่สำคัญคือ ธีม Flatsome จะค่อนข้างเร็ว เมื่อใช้คู่กับ Page Builder ของตัวธีมเองครับ อีกทั้งยังสามารถใช้ร่วมกับ Elementor ได้ ก็ต้องยอมรับกันตามตรงว่า Page Builder ของ Flatsome เอง ยังสู้ Elementor ไม่ได้ แต่ feature ของ Flatsome เอง ก็เพียงพอสำหรับการทำเว็บไซต์ที่เป็นร้านค้าออนไลน์ครับ

ตัวอย่างการใช้งาน Theme Flatsome

ขั้นตอนการติดตั้งธีม Flatsome

ในการที่เราจะติดตั้งธีมที่เราไปซื้อมา เราต้องไปที่ Appearance คลิก Themes แล้วเมื่อเราเข้ามาที่หน้า Themes ให้เรากด Add New ก่อนครับ

จากนั้นให้เราคลิกที่ปุ่ม Upload Themes

แต่ก่อนที่เราจะไปทำการ Upload Theme ขึ้นไปนั้น ให้เรามาดูที่ไฟล์ที่เราดาวน์โหลดมากันก่อนครับ เราจะได้ไฟล์ที่เป็น Zip file มา ให้เราทำการแตกไฟล์มาก่อนครับ

ผมมีวิดีโอ เกี่ยวกับการการแตก ZIP ไฟล์ง่ายๆ ทั้งใน Windows และ Mac โดยเฉพาะเอาไว้ สามารถดูได้ ด้านล่างนี้ครับ

หลังจากที่เราแตกไฟล์ ZIP ออกมาแล้ว เราจะเจอกับ folder ที่ชื่อว่า flatsome-main

เรากลับมาที่หน้า Add Themes จากนั้นคลิก Choose File

จากนั้นไปที่ folder ที่ชื่อ flatesome-main ที่เราแตกไฟล์ ZIP ออกมา

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

จากนั้นกด Install Now

ตอนนี้ flatsome ธีมแม่ติดตั้งเรียบร้อยแล้ว จะขึ้นแจ้งตามรูปด้านล่างนี้ครับ

เรามาติดตั้งธีมลูก เมื่อเรากด Choose File ให้เราเลือก child ธีม แล้วกด Open

จากนั้นกด Install Now

ตอนนี้เราก็ติดตั้งธีมลูกหรือ Child Theme เรียบร้อยแล้วครับ ตอนนี้เราก็พร้อมที่จะไป Activate ธีมกันได้เลยครับ

ให้เราไปที่ Appearance แล้วคลิกที่ Themes

เราจะเห็นว่ามี Flatsome กับ Flatsome Child ให้เราทำการ Activate ธีม Flatsome Child ครับ เมื่อเราทำการ Activate Flatsome Child ไปแล้ว แล้วเรามีการแก้ไข modify ที่ธีมลูก สิ่งที่เราแก้ไว้มันก็จะไม่หายไป ถือว่าเป็นข้อดีของ Child Theme เลยทีเดียวครับ

การใช้ Customizer ปรับแต่งธีม Flatsome

แล้วเรามาดูกันต่อในส่วนของ Feature ของธีม Flatsome กันครับ ว่ามีอะไรน่าสนใจบ้าง แล้วแต่ละ feature ใช้งานอย่างไร โดยให้เราไปที่ Appearance แล้วคลิก Customizer

เราจะมาดูที่ Header กันก่อนครับ

เมื่อเราเข้ามาในส่วนของ Header เราจะเจอกับ Header Builder ซึ่งอยู่ด้านล่าง โดยเราสามารถที่จะหยิบส่วนต่างๆ เข้าออกได้ ด้วยการใช้เมาส์ลากและวางในจุดที่เราต้องการ โดยเราจะลองเลือกหยิบ search icon ที่อยู่ด้านซ้ายมือของเมนูหลัก ด้วยการใช้เมาส์คลิกค้างไว้

จากนั้นลากและวางในจุดที่เราต้องการ คือ หลังตะกร้าสินค้า

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

เราสามารถที่จะเลือกปรับแต่งในรูปแบบทั้งของโหมดหน้าจอ Desktop และ Mobile/Tablet ได้ หากเราต้องการปรับแต่ง ก็เพียงคลิกไปที่ปุ่ม Mobile/Tablet

การเปลี่ยน Logo

เรายังคงอยู่ที่ Header Customizing ให้เราไปที่ Logo & Site Identity

จากนั้นให้เราไปที่ Select image

เลือกไฟล์ภาพที่เราต้องการใช้เป็น Logo จากนั้นกด Select

เราจะเห็นว่า Logo ถูกเปลี่ยนเป็นรูปที่เราเลือกไว้เรียบร้อยแล้ว

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

การปรับความกว้างในส่วนของ Header Main

เราอยู่ที่ Header Customizing ให้เราคลิกไปที่ Header Main

เราสามารถปรับขนาดในส่วนของ Nav หรือ เมนูหลัก โดยให้เราคลิกเลือกที่ขนาดไซส์ที่เราต้องการ

การใช้งาน Footer Customizer

ให้เราไปที่ Footer

เมื่อเข้ามาในส่วนของ Footer ซึ่งก็จะมีตัวปรับแต่งต่างๆ ไม่ว่าจะเป็นการเปิดใช้ footer Widget, การปรับสีตัวอักษร, การปรับสีพื้นหลัง, การเลือกใช้รูปเป็นพื้นหลัง เป็นต้น

ในส่วนของ Copyright ซึ่งอยู่ในส่วนของ Bottom Text – Primary เราสามารถแก้ไขได้ โดยคลิกไปที่จุดที่เราต้องการแก้ไข แล้วเราสามารถเข้าไปพิมพ์แก้ไขในด้านซ้ายมือได้ครับ

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

การปรับแต่งหน้า Shop ให้เราคลิกที่เมนู Shop เราสามารถที่จะจัดการ Catalog Layout ได้ โดยคลิกไปที่ปุ่ม Catalog Layout

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

• การเลือก List Style หรือการจัดวางหน้า Catalog
• EQUAL IMAGE HEIGHTS คือ การทำให้ภาพทุกภาพสูงเท่ากัน
• Products per Page คือ เลือกที่จะให้แสดงสินค้ากี่ชิ้นต่อหน้า
• Products per row คือ การแสดงสินค้ากี่ชิ้นต่อแถว

และนี่ก็คือ การปรับแต่งคร่าวๆ สำหรับหน้า Shop ครับ

การจัดการหน้า Homepage

ให้เราไปที่ Pages คลิก All Pages

คลิก Edit หน้าที่เราใช้เป็น Homepage หรือ Front page

จากนั้นให้เราไปเลือกตั้งค่า Page Attributes เป็น Page – Full Width แล้วกด Update ขั้นตอนต่อไปคือ กด Edit with UX Builder ซึ่ง UX Builder เป็น Feature ของ Flatsome เท่านั้นครับ

และเมื่อเราใช้ UX Builder ในการสร้างหน้าเว็บไซต์ของเราไปแล้ว ในภายหลังเราต้องการที่จะเปลี่ยนธีม เวลาที่เราย้ายไปธีมอื่น UX Builder ไม่ได้ไปด้วยนะครับ อันนี้ก็คือ ข้อดี ข้อเสีย ของธีม Flatsome ครับ

เมื่อเราเข้ามาในส่วนของ Page Builder แล้ว เราจะเห็นในส่วนของ Blocks เราสามารถลบออกได้ครับ โดยเอาเมาส์ชี้ไปที่รูปฟันเฟือง แล้วกด Delete ครับ

จากนั้นให้เราทำการเลือก Insert Template เข้าไปครับ

หลังจากที่เรา Insert Template เข้าไป เราสามารถแก้ไขในส่วนต่างๆ ได้ โดยการคลิกที่ Section ที่เราจะทำการแก้ไข จากนั้นเราสามารถพิมพ์แก้ไขในด้านซ้ายมือได้ โดยจะพิมพ์ในกล่องที่เป็น Coding ได้ หรือกดปุ่ม Open Text Editor

หลังจากเรากดปุ่ม Open Text Editor เราก็สามารถที่จะแก้ไขจากตรงนี้ได้เช่นกัน

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

เราสามารถปรับแต่งรายละเอียดต่างๆ ได้ เช่น ปรับแต่ง Icon เพิ่มเติมได้ และใส่ Link ที่ปุ่มได้ เป็นต้นครับ

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

เราสามารถปรับแต่ง Layout ของการแสดงผลตัวสินค้า โดยจะปรับได้ 4 แบบ คือ Slider, Full Slider, Row, Masonry, Grid แล้วถ้าเราเลือกในแต่ละรูปแบบก็จะมี Feature ให้เราปรับแต่งได้อีกครับ

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

ให้เราคลิกที่ Banner

ในด้านซ้ายมือ เราสามารถที่จะเลือกลบ Banner ได้ โดยการคลิกไปที่ Banner ที่เราต้องการลบ จากนั้นกด Delete

การแก้ไขหัวข้อ (Title)

ให้เราคลิกที่ Title ที่เราต้องการแก้ไข จากนั้นที่ด้านซ้ายมือ เราสามารถพิมพ์แก้ไขหัวข้อได้ตามที่เราต้องการ แล้วกดปุ่ม Apply

และนี่ก็คือ ในส่วนของ Logo และ Banner ของเว็บไซต์ที่เราทำการปรับแต่งเรียบร้อยแล้วครับ

และการปรับแต่งหัวข้อในและการปรับแต่ง Layout ของตัวสินค้าแต่ละ Section

และนี่ก็คือ เดโมการใช้งานคร่าวๆ ในส่วนของ UX Builder ของธีม Flatsome ครับ

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

• Astra PRO Unlimited Site
  https://go.palamike.com/wpastra
• Flatsome
  https://go.palamike.com/flatsome

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

สรุป และ การต่อยอด

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

ขอให้ทุกท่านสร้างเว็บไซต์ได้สำเร็จนะครับ 🙂
พลากร สอนสร้างเว็บ