Part of 10306241 ระบบบริหารจัดการเว็บไซต์ (Web Content Management System)

Lab: ติดตั้ง WooCommerce 10.x บน Docker และเปิดร้านค้าครบวงจร

บทความนี้คือคู่มือแบบฝึกหัดบทที่ 11 (อีคอมเมิร์ซด้วย WooCommerce) ฉบับลงมือทำจริงทุกขั้นตอน — ไม่ใช่แค่สรุปสไลด์ ทุกภาพในบทความนี้เป็นสกรีนช็อตจากร้านจริงที่ติดตั้งบนเครื่องผู้เขียนผ่าน Docker และทุกเครื่องมือที่ใช้เป็นแบบฟรี 100% (WordPress + WooCommerce + MariaDB เป็นโอเพนซอร์ส, การชำระเงินใช้โหมดทดสอบของเกตเวย์ ไม่มีการเรียกเก็บเงินใด ๆ)

ทำไมต้องรันด้วย Docker

การจำลอง WordPress ในเครื่องด้วย Docker ให้ประโยชน์ตรงกับวิชานี้มาก:

1. แยกจากเครื่องจริงทั้งหมด - ลบทิ้งได้ครั้งเดียวสะอาดเงา ไม่เปื้อนระบบ
2. สภาพแวดล้อมเหมือนกันทุกเครื่อง - สอน/ส่งงาน/สอบไม่มีปัญหา "ในเครื่องผมรันได้"
3. ข้อมูลอยู่ใน volume - ปิดเครื่องรีสตาร์ตร้านยังอยู่ครบ
4. ใกล้เคียง production - บทถัดไป (บทที่ 12) จะพาขึ้นโฮสติ้งจริง ซึ่งเซิร์ฟเวอร์ส่วนใหญ่ก็รันผ่าน container เช่นกัน

ขั้นที่ 1-2: สร้างไฟล์โปรเจกต์และสตาร์ตระบบ (ผมรันให้แล้ว นักศึกษาคัดลอกไปรันเองได้)

สร้างโฟลเดอร์ woocommerce-lab แล้วสร้างไฟล์ docker-compose.yml ดังนี้:

services:
  db:
    image: mariadb:10.11
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: wslab-root
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wslab-pass
    volumes:
      - db_data:/var/lib/mysql
    healthcheck:
      test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
      interval: 10s
      timeout: 5s
      retries: 5
 
  wordpress:
    image: wordpress:latest
    restart: unless-stopped
    depends_on:
      db:
        condition: service_healthy
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wslab-pass
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wp_data:/var/www/html
 
  phpmyadmin:
    image: phpmyadmin:latest
    restart: unless-stopped
    depends_on:
      - db
    ports:
      - "8081:80"
    environment:
      PMA_HOST: db
 
volumes:
  db_data:
  wp_data:

ตัวแปร WORDPRESS_DB_HOST/USER/PASSWORD/NAME เหล่านี้เป็นรูปแบบมาตรฐานที่อิมเมจ WordPress ทางการรองรับ (ดู เอกสารอิมเมจ WordPress บน Docker Hub) จากนั้นสั่ง:

docker compose up -d
docker compose ps          # ตรวจว่าทุก container Up

ผลที่ต้องเห็น: db สถานะ healthy, wordpress และ phpmyadmin ทำงานบนพอร์ต 8080/8081 แล้วเปิด http://localhost:8080 ได้หน้าติดตั้ง WordPress

ขั้นที่ 3: ติดตั้ง WordPress (นักศึกษาทำแล้ว)

เปิด http://localhost:8080 เลือกภาษา ตั้งชื่อไซต์ สร้างผู้ดูแล (admin + รหัสที่จดไว้) แล้วกด Install WordPress — หน้าจอมาตรฐาน 5 นาทีของ WordPress

ขั้นที่ 4: ติดตั้ง WooCommerce และตั้งค่าร้าน (ใบงาน A1-A2)

ไปที่ Plugins → Add New Plugin ค้นหา "WooCommerce" เลือกตัวของ Automattic กด Install Now → Activate จากนั้นตัวช่วยตั้งค่า (Setup Wizard) จะพาไล่ถาม:

1. รายละเอียดร้าน - ประเทศ: Thailand, เมือง: เชียงใหม่, รหัสไปรษณีย์: 50290
2. อุตสาหกรรม - เลือกหมวดที่สนใจ (เช่น Food and drink)
3. ประเภทสินค้า - ข้ามส่วนขยายเสียเงินทั้งหมด (หัวใจของแล็บนี้คือฟรี 100%)
4. ธีม - เลือกฟรีตัวแรก

หลังจบตัวช่วย ตรวจที่ WooCommerce → Settings → General ว่าสกุลเงินเป็น Thai Baht (฿) แล้วกด Save

สังเกตเมนูด้านซ้ายจะมีเพิ่ม: WooCommerce (Home/Orders/Analytics), Products, Analytics — ครบตามสไลด์หน้า 15

ขั้นที่ 5: สร้างสินค้า Simple และ Variable (ใบงาน A3-A4)

สินค้า Simple - Organic Coffee Beans 250g

Products → Add New ตั้งชื่อสินค้า เขียนคำอธิบาย แล้วตั้งค่าในกล่อง Product data:

• General → Regular price: 250
• Inventory → SKU: COFFEE-250, เปิด "Track stock quantity", คงเหลือ 50

ใส่หมวดหมู่ (Coffee), แท็ก (coffee, organic), รูปสินค้า แล้วกด Publish

สินค้า Variable - Handmade T-Shirt (S และ M ราคาต่างกัน)

สร้างใหม่อีกชิ้น เลือก Product data → Variable product แล้ว:

1. แท็บ Attributes → เพิ่ม attribute ชื่อ Size ค่า S | M → ติ๊ก Used for variations → Save attributes
2. แท็บ Variations → กด Generate variations → ได้ 2 แถว
3. ขยายแต่ละแถวตั้งราคา: S = 300, M = 350 (ใส่ SKU ต่างกันได้ เช่น TSHIRT-S / TSHIRT-M) → Save changes

หมวดหมู่ Featured Items (ใบงาน A5) สร้างที่ Products → Categories → ตั้งชื่อ → Add New Category

ขั้นที่ 6: Block Cart และ Block Checkout (ใบงาน B1-B5)

ตั้งแต่ WooCommerce 8.3 ร้านใหม่ทุกแห่งใช้ Cart และ Checkout แบบบล็อก (React) เป็นค่าเริ่มต้น — ไม่ใช่ shortcode แบบเก่าอีกต่อไป ตรวจได้โดยเปิด Pages → Cart → Edit จะพบบล็อก Cart ในตัวแก้ไข (ถ้าเจอ [woocommerce_cart] ให้ลบแล้วแทรกบล็อก Cart แทน)

การเพิ่มช่อง Order Note ทำผ่านหน้าแก้ไข Checkout: เปิด List View (ไอคอน 3 เส้นบนมุมบล็อก) จะเห็นบล็อกลูก Contact Information / Shipping Address (+ Order notes) / Shipping Options / Payment / Order Summary จัดลำดับ ซ่อน/แสดงช่องได้จากแผงตั้งค่าของแต่ละบล็อก

ขั้นที่ 7: ตั้งค่าการจัดส่ง - Flat Rate 50 บาท + ส่งฟรีเมื่อยอดถึง 500 (ใบงาน D1-D3)

ไปที่ WooCommerce → Settings → Shipping → Add Zone:

1. ตั้งชื่อโซน Thailand เลือกภูมิภาค: ประเทศไทย
2. Add shipping method → Flat rate → แก้ Cost เป็น 50
3. Add shipping method → Free shipping → กด Edit → "Minimum order amount" = 500

ผลที่ทดสอบได้จริงเมื่อตะกร้ามีกาแฟ 250 + เสื้อ M 350 = 600 บาท (เกิน 500) — หน้าชำระเงินจะให้เลือก ส่งฟรี ได้:

ส่วนตะกร้าที่ต่ำกว่า 500 บาท จะเห็นแค่ Flat Rate ฿50 อย่างเดียว — ทดสอบทั้งสองกรณีก่อนส่งงาน

ขั้นที่ 8: เกตเวย์การชำระเงินและคำสั่งซื้อทดสอบ (ใบงาน C, เช็กลิสต์ข้อ 6-7)

ในแล็บนี้เราใช้เกตเวย์ในโหมดทดสอบทั้งหมด ไม่มีการตัดเงินจริง:

8.1 เกตเวย์ฟรีในตัว (COD + โอนธนาคาร)

WooCommerce → Settings → Payments เปิด Cash on delivery และ Direct bank transfer ใช้ทดสอบ flow การสั่งซื้อได้ทันทีโดยไม่ต้องสมัครอะไร

8.2 Stripe Test Mode (แนะนำ - ฝึกบัตรเครดิตจำลอง)

1. สมัครบัญชีฟรีที่ dashboard.stripe.com/register
2. ติดตั้งปลั๊กอิน "WooCommerce Stripe Payment Gateway" (โดย WooCommerce/Stripe) จากหน้า Plugins
3. ใน Stripe Dashboard เปิด Test mode → Developers → API keys → คัดลอก pk_test_... และ sk_test_...
4. WooCommerce → Settings → Payments → Stripe → วาง Test keys → เปิด test mode → Save
5. ทดสอบชำระด้วยบัตรจำลอง 4242 4242 4242 4242, วันหมดอายุอนาคตอะไรก็ได้ (เช่น 12/34), CVC 3 หลักอะไรก็ได้ — หมายเลขนี้เป็นบัตรทดสอบทางการของ Stripe (docs.stripe.com/testing) ไม่มีการหักเงินจริง

8.3 สั่งซื้อทดสอบจนได้ออเดอร์ Processing

จำลองเป็นลูกค้า: เพิ่มสินค้า → ชำระเงิน → กรอกที่อยู่ → เลือกวิธีชำระ (COD จะให้สถานะ Processing ทันที / โอนธนาคารจะเป็น On hold รอยืนยัน) → กดสั่งซื้อ

ขั้นที่ 9: จัดการคำสั่งซื้อและ Analytics (ใบงาน D4-D5)

สถานะคำสั่งซื้อ (สไลด์หน้า 32)

WooCommerce Analytics + COGS (ใหม่ใน WC 9.0+)

Analytics → Overview/Revenue แสดงรายได้จากออเดอร์ทดสอบทันที และถ้าใส่ "Cost" ต่อสินค้า (Product data → General) ระบบจะคำนวณ Profit ให้ด้วย — บอกได้ว่าสินค้าตัวไหน "กำไรจริง" ไม่ใช่แค่ "ขายดี"

เช็กลิสต์ตรวจผล 10 ข้อ (หน้า 35 ของสไลด์)

ทุกข้อในตารางนี้ทำได้จริงในแล็บนี้และมีภาพประกอบครบตามลำดับข้างต้น

คำสั่งจัดการระบบที่ควรรู้

docker compose stop      # ปิดร้าน (ข้อมูลยังอยู่)
docker compose start     # เปิดร้านต่อ
docker compose down      # ลบ container (ข้อมูลใน volume ยังอยู่)
docker compose down -v   # ลบทั้งหมด เริ่มใหม่จากศูนย์ (ระวัง!)

สรุป

จากใบงานสไลด์หน้า 34-35 เราได้ครบทุกส่วน: A (ติดตั้ง + สินค้า Simple/Variable/หมวดหมู่), B (Block Cart/Checkout + Order Note + ทดสอบตะกร้า), C (เกตเวย์ + สั่งซื้อทดสอบได้ออเดอร์จริง), D (Shipping Zones + Analytics) — โดยไม่ใช้เงินแม้แต่บาทเดียว ทักษะชุดนี้คือฐานของบทถัดไป (บทที่ 12): การนำร้านขึ้นโฮสติ้งจริงด้วย Cloudflare, Git Deploy และ Staging → Production

แหล่งอ้างอิง

• WordPress docker image — เอกสารทางการ (ENV variables)
• WooCommerce Setup Wizard — woocommerce.com
• Stripe Testing — บัตรทดสอบทางการ
• PayPal Sandbox — developer.paypal.com
• PayPal Standard (ถูกแทนที่ด้วย PayPal Payments)
• การสร้างฐานข้อมูล WordPress — developer.wordpress.org