เชี่ยวชาญ WooCommerce ด้วย Elementor: คู่มือฉบับสมบูรณ์สำหรับมือใหม่

การปรับแต่งเว็บไซต์ WooCommerce ให้ตรงใจด้วย Gutenberg editor เพียงอย่างเดียวเป็นเรื่องยาก มีฟอนต์น้อย วิดเจ็ตจำกัด และพื้นที่เล่นน้อยมาก นี่คือที่มาของ Elementor ทุกส่วนของเว็บไซต์ WooCommerce สามารถปรับแต่งได้ เพื่อให้ลูกค้าได้ประสบการณ์ช้อปปิ้งที่ดีที่สุด คุณรู้แล้วว่าประสบการณ์ช้อปปิ้งยิ่งดี ยิ่งเพิ่มการแปลง (conversions) บทความนี้เกี่ยวกับ วิธีใช้ WooCommerce กับ Elementor

การตั้งร้าน WooCommerce ครั้งแรกอาจดูน่ากลัว แต่จริงๆ แล้วง่ายมาก WordPress และ WooCommerce ถูกออกแบบมาให้เข้าถึงได้สำหรับผู้สร้างเนื้อหา ไม่ใช่แค่นักพัฒนา

Elementor ตอนแรกก็อาจดูสับสน แต่มีศักยภาพให้ "บางอย่างพิเศษ" (je ne sais quoi) กับร้านค้าของคุณ

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

เริ่มจากพื้นฐาน: สร้างเว็บไซต์ WordPress ยังไง? หากตั้งร้าน WooCommerce ไปแล้ว ข้ามไปส่วนเข้าใจและสำรวจ Elementor ได้เลย

สร้างเว็บไซต์ WordPress

มีขั้นตอนหลักบางขั้นในการสร้างเว็บก่อนปรับแต่ง: เลือกโฮสต์ สร้างโดเมน ติดตั้ง WordPress และเพิ่ม SSL (Security Socket Layer) นี่คือบทความที่พูดถึงการตั้งเว็บ WordPress จากศูนย์ แต่ขั้นตอนสรุปมีดังนี้:

1. เลือกโฮสต์: สิ่งที่ควรพิจารณา: ความต้องการคืออะไร โฮสต์มีการสนับสนุนเพียงพอหรือไม่ ราคาถูกพอหรือไม่ มีโฮสต์เยอะมาก แนะนำให้ใช้เวลาค้นหาให้เข้ากับความต้องการและงบประมาณ ข้อควรระวัง: ตัวเลือกที่ถูกที่สุด редคราวจะเป็นทางออก หากอยากเริ่มทันที เราโฮสต์เว็บทดสอบบน Cloudways การสร้างเว็บ WooCommerce บน Cloudways ง่ายมาก และมาพร้อม WooCommerce ติดตั้งแล้ว เป็นจุดเริ่มต้นที่ดี แดชบอร์ดโฮสติ้งมีข้อมูลเว็บมากมาย หากคุณสนใจ

2. จดทะเบียนโดเมน: โดเมนคือชื่อเว็บไซต์ ก่อนเลือกโดเมน คิดถึงเป้าหมายเว็บไซต์ ขายอะไร ลูกค้าคือใคร ด้วยเหตุนี้ สมดุลหาชื่อโดเมนที่จดจำง่ายและระบุตัวตนได้
3. ติดตั้ง WordPress: ขั้นตอนต่างกันเล็กน้อยตามโฮสต์ ดูเอกสารโฮสต์หรือติดต่อฝ่ายสนับสนุน บน Cloudways ต้องเลือก WooCommerce เมื่อสร้างแอปพลิเคชันใหม่ บน Hostinger เลือก WordPress จะติดตั้งอัตโนมัติ
4. เพิ่ม SSL: อีกครั้ง ต่างกันตามโฮสต์ บางโฮสต์ให้ SSL ฟรีกับโฮสติ้ง บางที่ต้องใช้ Certificate Authority บน Cloudways ใบรับรองความปลอดภัยเพิ่มอัตโนมัติ หลังมีใบรับรอง ตั้งค่าได้ง่ายด้วยปลั๊กอิน Really Simple SSL

ตั้งค่าร้าน WooCommerce

ตอนนี้มีเว็บ WordPress พื้นฐานแล้ว ขอติดตั้ง WooCommerce และตั้งค่า WooCommerce ขับเคลื่อนร้านค้า ตั้งแต่รายการสินค้า จัดการลูกค้า จนถึงการชำระเงิน

ในส่วนนี้ เราจะพูดถึงพื้นฐานการตั้งค่า WooCommerce และสิ่งที่ควรทำก่อนเริ่มปรับแต่งหน้าด้วย Elementor นี่คือสิ่งที่ควรทำ:

1. ติดตั้ง WooCommerce: หากใช้ Cloudways สร้างเว็บ WooCommerce ข้ามข้อนี้ได้ หากไม่ใช่ วางเมาส์ที่ plugins คลิก Add New ค้นหา WooCommerce plugin คลิก Install และ Activate

2. ตั้งค่า WooCommerce ด้วย Setup Wizard: ด้วย Setup Wizard เพิ่มรายละเอียดร้าน WooCommerce ได้ เช่น รายละเอียดร้านพื้นฐาน ตัวเลือกชำระเงินที่ชอบ รายละเอียดจัดส่ง และ add-ons เพิ่มเติม มีบทความช่วยเหลือเพิ่มเติม คลิก WooCommerce ในแถบด้านข้างเพื่อเริ่มต้น
3. ติดตั้ง Hello Theme: Hello Theme เป็นธีมพื้นฐานของ Elementor ออกแบบมาเพื่อประกอบ page builder ไม่บังคับต้องทำข้อนี้ แต่ช่วยให้คุ้มค่ากับ Pro license ติดตั้งได้โดยไม่ต้องติดตั้ง Elementor ก่อน คลิก Appearance แถบด้านข้าง และ Theme คลิก Add New ค้นหา Hello ในช่องค้นหา คลิก Install และ Activate

4. ตั้งค่าร้านค้า: เพิ่มสินค้า รูปภาพ คำอธิบาย ราคา หมวดหมู่ นโยบายความเป็นส่วนตัว นโยบายคืนเงิน ฯลฯ ให้ได้ผืนผ้าใบปฏิบัติตามเมื่อเริ่มแก้ไขด้วย Elementor

ตอนนี้พร้อมเพิ่มวิธีชำระเงินแล้ว

เพิ่มวิธีชำระเงิน

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

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

1. เลือกวิธีชำระเงิน: เลือก Cash on Delivery (เก็บเงินปลายทาง) หรือใช้ payment gateway เลือก gateway ตามว่าลูกค้าชอบจ่ายยังไง ค่าธรรมเนียมธุรกรรม และร้านตั้งอยู่ที่ไหน
2. ติดตั้ง payment gateway: เลือกตัวเลือกที่ชอบแล้ว ต้องติดตั้งปลั๊กอินและผสานรวมบัญชีเข้ากับ WooCommerce มีบทความผสานรวม WooCommerce กับ Stripe และ PayPal สองตัวเลือกยอดนิยมที่ครอบคลุมตัวเลือกชำระเงินและภูมิศาสตร์กว้าง

3. ทดสอบวิธีชำระเงิน: ผ่านกระบวนการซื้อ ดูประสบการณ์เหมือนลูกค้าซื้อสินค้าจากคุณ นอกจากนี้ยังดูได้ว่าหน้าสินค้า ตะกร้า และชำระเงินเริ่มต้นเป็นอย่างไร หลาย payment plugins มีฟีเจอร์ test หรือ sandbox ให้จำลองกระบวนการ

ติดตั้ง Elementor บนเว็บไซต์ WooCommerce

เราแนะนำให้ลงทุนใน Pro version เพราะมี WooCommerce widgets ยอดเยี่ยมมากมายให้ใช้ ขั้นตอนมีดังนี้:

1. ติดตั้งและเปิดใช้งาน Elementor: กลับไปที่แดชบอร์ด WordPress คลิก Plugins แล้ว Add New ค้นหา Elementor ในช่องค้นหา คลิก Install เมื่อเจอปลั๊กอินที่ถูกต้อง คลิก Activate เมื่อเสร็จ

2. สร้างบัญชี: จะถูก redirect ไปหน้าสร้างบัญชีและเลือกแผน มี 3 ใบอนุญาตให้เลือก และมี free version เราจะบอกความแตกต่างในส่วนต่อไป เสร็จแล้ว กลับไปที่ WP dashboard

ทำความเข้าใจ Elementor Page Editor

Elementor เป็น design powerhouse ช่วยสร้างหน้าเว็บกำหนดเองด้วย interface ลากวางที่ง่าย ช่วงตัวเลือกอาจดูหลายมากตอนแรก แต่别担心 แค่ปรับเล็กน้อยก็คุยเคยได้ แค่คุณมี backup การลองทำจริงคือวิธีเรียนรู้ Elementor ที่ดีที่สุด

ด้วยความคิดนี้ ส่วนนี้จะช่วยทำให้คุ้นเคยกับเลย์เอาต์ของ page editor

1. เปิดหน้าเพื่อแก้ไข: วางเมาส์ที่ Pages บนเมนูด้านข้าง คลิก All Pages วางเมาส์ที่หน้าใดหนึ่ง คลิก Edit เมื่อ page editor เปิด คลิก Edit with Elementor จะนำไปสู่ Elementor page editor
   
   นี่คือรูปลักษณ์:

มีหน้าสำคัญหลายหน้าบนร้านค้าที่ส่งผลโดยตรงต่อประสบการณ์ช้อปปิ้งของลูกค้า สำคัญคือ บางหน้าจะมี shortcode ที่ลักษณะดังนี้:

สิ่งนี้สำคัญ อย่าลบ มัน เว้นแต่คุณใช้ WooCommerce widgets ของ Elementor Pro แต่สามารถวางรูปภาพหรือข้อความก่อนหรือหลัง shortcode ได้

ตอนนี้มาพูดถึงวิธีแก้ไขหน้า

2. เพิ่ม Sections (ส่วน): หากวางเมาส์ต่างส่วนของหน้า จะเห็นกล่องสีน้ำเงินปรากฏ แสดง section ของหน้า คลิกสัญลักษณ์ 6 จุดกลาง section เพื่อแก้ไข คลิก + ในกล่องเส้นประ จะสร้าง section ใหม่
3. เลือก Columns (คอลัมน์): แต่ละ section แบ่งเป็นคอลัมน์ วางเมาส์ที่ section บล็อกเนื้อหาต่างๆ จะไฮไลท์ด้วยกล่องสีน้ำเงิน คอลัมน์มีองค์ประกอบเดี่ยว ที่ปรับแต่งได้แยกกัน สามารถเลือกเลย์เอาต์คอลัมน์ที่ต้องการ พร้อมลากวางองค์ประกอบใหม่แล้ว
4. เพิ่ม Elements (องค์ประกอบ): ด้านซ้ายจะเห็นไลบรารี Elements จัดหมวดหมู่ เช่น Site และ WooCommerce ลากวาง element เข้าไปในคอลัมน์ แก้ไข element นี้ในแถบด้านข้าง คลิกปากกาสีน้ำเงินที่มุมขวาบนของคอลัมน์ แถบด้านข้างจะเปลี่ยนแสดงการปรับแต่งต่างๆ (ขึ้นอยู่กับ element ในคอลัมน์นั้น) ถ้าแก้ไขข้อความ จะเห็น text editor ด้านซ้าย
5. Preview การเปลี่ยนแปลง: Preview การเปลี่ยนแปลงได้โดยคลิกปุ่มตาที่ด้านล่างของแถบด้านข้าง
6. ตรวจสอบเว็บในโหมด Responsive: คลิกโลโก้ Responsive mode ที่ด้านล่าง Preview หน้าในมุมมองต่างๆ เพื่อดูหน้าตาบนมือถือ เดสก์ท็อป และขนาดหน้าจออื่นๆ
7. Publish/Update เว็บไซต์: เสร็จแล้ว สามารถ save draft, update หรือ publish หน้าได้โดยคลิกปุ่มมุมซ้ายล่าง

ตอนเข้าใจเลย์เอาต์ page editor แล้ว นี่คือคำอธิบายวิดเจ็ตพื้นฐานบางตัว

แก้ไขข้อความ

1. ลากวาง Headline หรือ Text Editor element: เพิ่ม section เลือกจำนวนคอลัมน์ แล้วลากวาง Headline หรือ Text Editor element จากแถบด้านข้าง จะเพิ่ม "Add Text Here" บนหน้า

2. ใส่ข้อความที่ถูกต้อง: เลือกข้อความทั้งหมด แทนที่ด้วยข้อความที่ต้องการ
3. ปรับแต่งข้อความ: เลือกข้อความ คลิก Style ในแถบด้านข้าง เปลี่ยนสีโดยเลือกจากแถบสี นอกจากนี้ เปลี่ยนฟอนต์ได้โดยคลิกดินสอข้าง Typography ยังสามารถเปลี่ยนประเภท stroke เพิ่มเงา หรือเปลี่ยนการจัดวางของ text editor ได้

เพิ่มรูปภาพ

1. ลากวาง Image element: เพิ่ม section หากต้อง และเลือกจำนวนคอลัมน์ แล้วลากวาง Image element
2. เพิ่มรูปภาพ: คลิกโลโก้ดินสอที่มุมขวาบนของรูปภาพ ในแถบด้านข้าง วางเมาส์ที่รูปภาพ เลือก Choose Image แทนที่รูปเริ่มต้นด้วยของคุณ

3. แก้ไขรูปภาพ: เปลี่ยนขนาด หรือการจัดวาง เพิ่มคำบรรยาย หรือลิงก์ไปยัง media file หรือ URL

เพิ่มปุ่ม

1. ลากวาง Button element: เมื่อมีคอลัมน์แล้ว ลากวาง button element
2. ปรับแต่งปุ่ม: เปลี่ยนประเภทปุ่ม ข้อความบนปุ่ม การจัดวาง สี หรือขนาด เพิ่มลิงก์หรือ action

พื้นฐานเหล่านี้อยู่ระหว่างดำเนินการ นี่คือเคล็ดลับที่จะลดงานให้น้อยลงมาก:

สร้าง Site Settings (การตั้งค่าเว็บไซต์)

สามารถสร้างธีมสี ตั้งค่าฟอนต์ระดับ global และตั้งค่าเทมเพลตสำหรับ header, footer และปุ่ม คลิกไอคอน hamburger มุมซ้ายบนของ page editor คลิก Site Settings เมื่อออกแบบเว็บไซต์เสร็จ ฟีเจอร์นี้จะประหยัดเวลามากเมื่อรวมหน้าใหม่ในอนาคต

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

วิธีใช้ WooCommerce กับ Elementor Pro

หากเปิดใจสร้างหน้าเว็บ WooCommerce ด้วย Elementor Pro license ส่วนนี้จะบอกว่าใช้วิดเจ็ตไหนสำหรับหน้าไหน

วิธีแก้ไขหน้าสินค้า WooCommerce ด้วย Elementor

นี่คือหน้าที่ลูกค้าเรียนรู้สินค้ามากขึ้น ขั้นตอนแก้ไขหน้าสินค้าเดี่ยวมีดังนี้:

1. แก้ไขหน้าสินค้า: สามารถแก้ไขเทมเพลตมีอยู่ของ Elementor หรือสร้างใหม่จากศูนย์ แก้ไขเทมเพลตง่ายกว่าหากไม่รู้ว่าวิดเจ็ตไหนวางไหน สามารถแก้ไขวิดเจ็ตมีอยู่ได้
2. ปรับแต่งด้วยวิดเจ็ต: หากต้องการสร้างจากศูนย์ นี่คือวิดเจ็ตที่เพิ่มได้:

• Product title (ชื่อสินค้า): วิดเจ็ตรวมชื่อสินค้า แก้ไขในแถบด้านข้างได้
• Product image (รูปสินค้า): แก้ไขขนาดรูปในแถบด้านข้าง เลือกรูปและสำรวจการตั้งค่าด้านขวา
• Product Rating (คะแนนสินค้า): วิดเจ็ตที่ช่วยลูกค้ามาก เห็นความคิดเห็นของคนอื่น
• Short description (คำอธิบายสั้น): วิดเจ็ตเพิ่มคำอธิบายตามที่ใส่ตอนเพิ่มสินค้า
• Product price (ราคาสินค้า): เพิ่มวิดเจ็ตนี้เพื่อแสดงราคา ราคาจะ populate อัตโนมัติเมื่อเพิ่มสินค้าใน WooCommerce
• Add to cart (เพิ่มในตะกร้า): ปุ่มเพิ่มสินค้าในตะกร้า เปลี่ยนสี ข้อความ หรือขนาดในแถบด้านข้างได้
• Woo Breadcrumbs (เบรดครัมบ์): ฟีเจอร์แสดงหมวดหมู่สินค้า เช่น หากซื้อรองเท้าผู้ชายสีดำจากเว็บแฟชั่น เบรดครัมบ์อาจเป็น Home/Men's Fashion/Shoes/Black Leather Shoes
• Product related (สินค้าที่เกี่ยวข้อง): ส่วน "Related Products" ที่มักเห็นบนเว็บอีคอมเมิร์ซ เพิ่มได้โดยลากวางวิดเจ็ต Products Related
• Upsells widget: วิดเจ็ตขับเคลื่อนส่วน "You may also like" ของหน้าสินค้า

วิดเจ็ตแต่ละตัวปรับแต่งได้ทั้งฟอนต์ สี การจัดวาง ตำแหน่ง และมากกว่านั้น

2. ตรวจสอบการเปลี่ยนแปลง: คลิก responsive mode ดูหน้าตาบนอุปกรณ์ต่างๆ
3. Publish หรือ update: ถ้าดีแล้ว สามารถ publish หรือ update หน้าได้

คำแนะนำตอนแก้ไขหน้าสินค้า:

• เพิ่มรูปภาพคุณภาพสูงสำหรับสินค้า
• เขียนคำอธิบายสินค้าที่ดี
• เลือกชื่อสินค้าที่อธิบายได้และมีความหมาย

วิธีแก้ไขหน้าร้าน WooCommerce (Shop Page) ด้วย Elementor

หรือเรียกว่า archive page นี่คือที่ลูกค้าเห็นสินค้าทั้งหมด เป้าหมายคือสร้างหน้าที่ลูกค้าหาของที่ต้องการได้ง่าย

1. แก้ไขเทมเพลตหรือสร้างหน้าใหม่: ในส่วนต่อไปจะพูดถึงการสร้างเทมเพลตใหม่ สามารถใช้เทมเพลตมีอยู่หรือเริ่มจากศูนย์ หากสร้างจากศูนย์ วางเมาส์ที่ Pages คลิก Add New แล้วเพิ่มวิดเจ็ตต่อไปนี้:
2. เพิ่มวิดเจ็ตเพื่อปรับแต่ง: นี่คือวิดเจ็ตที่แนะนำสำหรับประสบการณ์ช้อปปิ้งที่ดี:

• Product Categories (หมวดหมู่สินค้า): ช่วยลูกค้ากรองสินค้าตามหมวดหมู่
• Menu Cart (ตะกร้าในเมนู): เพิ่มโลโก้ตะกร้าในเมนู ลูกค้าเห็นว่ามีอะไรในตะกร้า
• Products (สินค้า): แสดงสินค้าทั้งหมดที่เพิ่มในร้าน
• Archive Product: ให้ลูกค้าจัดเรียงได้ตาม default, popularity, latest หรือ price
• Custom Add to Cart: ปรับแต่งปุ่ม add to cart เปลี่ยนข้อความ สี หรือขนาด
• WooCommerce Breadcrumbs: แสดงหมวดหมู่ทั้งหมดและตำแหน่งสินค้าใน archive เหมือนทางจากหน้าแรกไปหน้าปัจจุบัน
• Archive title ad description: เพิ่ม title และ description แก้ไขได้ในแถบด้านข้าง

3. ตรวจสอบหน้า: แก้ไขเสร็จ ตรวจสอบหน้าตาบนอุปกรณ์ต่างๆ พอใจแล้ว คลิก Publish

วิธีแก้ไขหน้าตะกร้า WooCommerce ด้วย Elementor

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

สามารถใช้ Elementor Cart widget ปรับแต่งหน้าตะกร้าเต็มรูปแบบ ขั้นตอนมีดังนี้:

1. แก้ไขหน้าตะกร้าที่มีอยู่: วางเมาส์ที่ Pages คลิก All Pages คลิก Edit เมื่อวางเมาส์ที่ Cart page แล้วคลิก Edit with Elementor
2. แทนที่ short code ด้วยวิดเจ็ต: Shortcode คือโค้ดที่เพิ่มฟีเจอร์เข้าไปในหน้า ด้วย Cart widget ไม่ต้องใช้ shortcode ลบ short code ออก แทนที่ด้วยวิดเจ็ตจากแถบด้านข้าง
3. ปรับแต่งหน้า: ตรวจสอบแถบด้านข้าง สำรวจการตั้งค่า ลองทำดังนี้:

• General: เลือกจำนวนคอลัมน์ในแต่ละส่วน ทำให้คอลัมน์บางคอลัมน์ sticky ได้โดย toggle ในแถบด้านข้าง
• Order Summary: เปลี่ยนปุ่ม Update Cart หากต้องการ
• Totals (ยอดรวม): ปรับแต็บ label, การจัดวาง และมากกว่านั้นสำหรับส่วน cart total รวมถึงปุ่ม Proceed to Checkout
• Additional Options: Toggle ความสามารถให้ตะกร้าอัปเดตอัตโนมัติ

หากคลิก Style ในแถบด้านข้าง สิ่งที่ปรับแต่งได้มีดังนี้:

• Sections: ควบคุมสไตล์ส่วนต่างๆ เช่น เพิ่ม drop shadow หรือ background color
• Typography: ข้อความทั้งหมดเปลี่ยนได้เพื่อให้เข้ากับ aesthetics ของเว็บ
• Buttons: เปลี่ยนสี ข้อความ ขนาด และมากกว่านั้น
• Order Summary: ปรับแต่งลักษณะ order summary
• Totals: แก้ไขส่วน Cart Total
• Checkout Button: ปรับแต่งสี ขนาด ข้อความ และการจัดวางของปุ่ม checkout

4. ตรวจสอบในมุมมองมือถือ: เสร็จแล้ว ตรวจสอบหน้าใน Mobile view หากพอใจ คลิก Publish

วิธีแก้ไขหน้าชำระเงิน WooCommerce ด้วย Elementor

ใช่ นี่คือหน้าสำคัญที่สุดของเว็บอีคอมเมิร์ซ หน้าสุดท้ายที่ลูกค้าเห็น และตัดสินใจซื้อ หน้าชำระเงินมีอัตราการออก (drop-off) สูงสุด จึงต้องทำให้ลื่นไหลที่สุด (friction-less)

Elementor Pro มี Checkout widget ทำให้แก้ไขหน้าชำระเงินง่าย ทำงานร่วมกับ Cart และ My Account widgets ทำให้แก้ไขหน้าชำระเงินที่มีอยู่ได้ ด้วยวิดเจ็ตนี้ สามารถเปลี่ยนแปลงดีไซน์หน้าชำระเงินได้ เช่น สีข้อความ การจัดวาง ส่วนต่างๆ และอีกมากมาย

1. เปิดหน้าชำระเงินด้วย Elementor editor: วางเมาส์ที่ Pages คลิก All Pages วางเมาส์ที่ Checkout Page คลิก Edit ที่ด้านบน คลิก Edit with Elementor รอสักครู่ จะเปิดหน้าใน Elementor editor
2. แทนที่ Checkout shortcode ด้วย Checkout Widget: Shortcode เป็นวิธีของ WooCommerce รวมฟิลด์ชำระเงินเข้าหน้า ลักษณะดังนี้:

3. ปรับแต่งหน้า: สำรวจการตั้งค่ามากมายของ Elementor Checkout Widget ในแถบด้านข้าง นี่คือการตั้งค่าบางอย่างที่เปลี่ยนได้:

• General: เลือกเลย์เอาต์ 1 หรือ 2 คอลัมน์ ทำให้คอลัมน์หนึ่ง sticky ได้ เพิ่ม offset เพื่อไม่ให้ header รบกวนคอลัมน์
• เปลี่ยนฟอร์มการเรียกเก็บเงินหรือจัดส่ง: แก้ไข header สำหรับแต่ละฟอร์ม placeholder และฟิลด์แต่ละรายการ
• Additional information: ส่วนที่ลูกค้าเพิ่มคำสั่งหรือข้อมูลเกี่ยวกับออเดอร์
• Coupon settings: ปรับแต่งการจัดวางและ typography ของคูปอง
• Payment: ปรับแต่งทุกด้านของปุ่มชำระเงิน เช่น การจัดวางและสี

แก้ไขเพิ่มเติมได้โดยคลิก Style:

• Purchase button: เปลี่ยนสี ข้อความ ระยะห่าง ฯลฯ ของปุ่มซื้อ นี่คือปุ่มที่ลูกค้าจะกดเพื่อดำเนินการชำระเงินต่อ
• Order summary: เลือก typography และระยะห่างของรายการสินค้าที่สั่ง
• Typography: ปรับแต่งข้อความทั้งหมดยกเว้นฟอร์ม
• Forms: ปรับแต่ง typography และสีของฟอร์ม ใช้ Rows Gap settings เพื่อเพิ่มระยะห่าง

4. ตรวจสอบหน้าใน Mobile View: ตรวจสอบว่าเว็บดูดีใน mobile view ด้วย

คำแนะนำตอนแก้ไขหน้าชำระเงิน:

• มีตัวเลือกชำระเงินเพียงพอ
• ลบฟิลด์ที่ไม่จำเป็น
• เก็บข้อมูลชำระเงินทั้งหมดไว้หน้าเดียว

วิธีสร้างเทมเพลตด้วย Elementor

ด้วย Elementor สามารถสร้าง custom templates ที่เข้ากับแบรนด์ ปรับแต่ง header และ footer ตัวอย่าง ให้ปรากฏพร้อมแบรนด์บนทุกหน้า ในส่วนนี้ เราจะสร้าง custom template สำหรับ header วิธีทำมีดังนี้:

1. สร้างเทมเพลตใหม่ (Create New Template): Global Header element คือสิ่งที่เห็นบนทุกหน้า เพื่อสร้างเทมเพลต คลิก Elementor ในแถบด้านข้าง แล้วคลิก Theme Builder ตอนนี้คลิก Add New Template
2. เลือกประเภทเทมเพลตที่ถูกต้อง: หากสร้าง header เลือก Header ใน dropdown ประเภทเทมเพลต ใส่ชื่อที่มีความหมาย เพื่อระบุได้ง่ายภายหลัง คลิก Create Template
3. 瀏覽 template library: ตอนนี้เลือกจาก predefined templates ในไลบรารี คลิก Insert ทุกเทมเพลตปรับแต่งได้เต็มรูปแบบ เลือกตัวที่ใกล้เคียงกับที่ต้องการมากที่สุด
4. แก้ไขและปรับแต่งเทมเพลต: ใช้ editor สร้างเทมเพลตฝัน เล่นกับสี รูปภาพ ฟอนต์ ฯลฯ
5. เผยแพร่เทมเพลต (Publish template): เสร็จแล้ว คลิก Publish ด้านล่างแถบด้านข้าง จะพรอมต์ให้เลือกว่าจะแสดงเทมเพลตที่ไหน เลือกจาก dropdown คลิก Save and Close จะ redirect กลับ editor แต่เทมเพลตใหม่จะ live แล้ว
6. ตรวจสอบ (Review): คลิก Have a Look ในป๊อปอัปด้านล่าง จะนำไปหน้า preview ปรับแต่งเพิ่มเติมได้

วิธีสร้าง eCommerce pop-up ด้วย Elementor

หากต้องการเพิ่ม popup ขั้นตอนมีดังนี้:

1. สร้าง popup template: คลิก Template ในแถบด้านข้าง คลิก Popups และ Add New ใส่ชื่อเทมเพลต คลิก Create Template
2. สร้าง popup: สร้างจากศูนย์ หรือแก้ไขเทมเพลต Elementor เลือกสี ข้อความ ฯลฯ
3. เผยแพร่ popup: บันทึก popup เป็นเทมเพลตที่ลิงก์ได้ภายหลัง คลิก Publish และ Save and Close
4. แก้ไขหน้า: คลิก Pages ในแถบด้านข้าง และ All Pages เลือกหน้าที่ต้องการเพิ่ม popup คลิก Edit with Elementor
5. เพิ่มปุ่ม: เปิด page editor แล้ว ลากวาง Button widget จากแถบด้านข้าง ใส่ข้อความที่ต้องการ ทำสีที่ต้องการ
6. ลิงก์ไป popup: ในแถบด้านข้าง ภายใต้ Layout เลือก Link, Dynamic, Actions และ Popup แล้วคลิก Open Popup และเลือก popup ที่สร้าง
7. ตรวจสอบ (Review): ทดสอบการทำงานของปุ่ม คลิก Update เมื่อพร้อม

Elementor เทียบ Elementor Pro: เมื่อไหร่ควรสลับ?

Elementor เวอร์ชันฟรี มีเครื่องมือออกแบบหน้าพื้นฐาน เหมาะสำหรับบล็อก แต่เว็บ WooCommerce ควรซื้อ license Elementor Pro เพราะมี widgets และ elements มากมาย ที่ออกแบบมาเฉพาะสำหรับประสบการณ์ WooCommerce ที่ยอดเยี่ยม

นี่คือรายการวิดเจ็ตยอดเยี่ยมที่ควรลอง:

1. Product Category: ช่วยลูกค้าจัดเรียงสินค้าตามหมวดหมู่ ทำให้หาและซื้อของง่ายขึ้นมาก
2. Add to Cart: ปรับแต่งปุ่มให้เข้ากับแบรนด์ได้ง่ายมาก เปลี่ยนสี ขอบ ฟอนต์ ฯลฯ
3. Product Upsell widget: เคยเห็นส่วน Related Products บน Amazon ไหม? นี่คือสิ่งเดียวกัน แสดงสินค้าอื่นที่ลูกค้าอาจสนใจ ตามสินค้าปัจจุบันที่กำลังดู
4. Empty Cart Message: เพิ่มข้อความน่าสนใจเมื่อลูกค้าพยายาม checkout ตะกร้าว่าง วิธีดึงดูดให้กลับดูสินค้าอีกครั้ง
5. Product Rating: Social proof เป็นแรงจูงใจทรงพลัง สร้างความเชื่อมั่นในสินค้าและเว็บไซต์ อาจขอ review จากลูกค้าเก่าสำหรับเหตุผลนี้
6. Product Review: นำความน่าเชื่อถือให้สินค้าสำหรับลูกค้าใหม่

ข้อดีและข้อเสียของ Elementor

Elementor ไม่ใช่ page builder ตัวเดียว นักพัฒนาหรือนักออกหลายคนมี preference ของตัวเอง เราชอบ Elementor เพราะแพร่หลายและใช้ง่าย แต่ความต้องการของคุณอาจต่างออกไป เราแบ่งการพิจารณาเลือก page builder เป็นข้อดีข้อเสียดังนี้ หากฟีเจอร์จำเป็นอยู่ในข้อเสีย อาจต้องหา page builder อื่น

ข้อดี (Pros)

• ใช้งานง่าย (Ease of use): ฟังก์ชันลากวาง (drag and drop) ง่ายมาก ปรับแต่งหน้าได้จริงโดยไม่ต้องเขียนโค้ดหรือใช้ปลั๊กอินอื่น
• คุ้มค่า (Value for money): มี WooCommerce-specific elements 24 ตัว พร้อม Pro version ทั้งหมดเป็นด้านสำคัญของกระบวนการช้อปปิ้ง ออกแบบมาเพื่อสร้างประสบการณ์ที่ดีกว่าให้ลูกค้า
• Responsive design built-in: ต่างจาก Gutenberg ที่ต้อง preview บนแท็บใหม่ Elementor คือ what you see is what you get เปลี่ยนมุมมองและแก้ไขต่อได้

ข้อเสีย (Cons)

• ราคา (Cost): เวอร์ชันฟรีช่วยปรับแต่งเว็บพื้นฐานได้ แต่魔法แท้จริงอยู่ที่ Pro version มี 3 แผน ราคา $49 ถึง $999 ต่อปี
• อัปเดตมีบั๊ก และการสนับสนุนไม่พอ (Glitchy updates and not enough support): เคยมีปัญหาอัปเดตมีบั๊ก และการสนับสนุนน้อย สำหรับเจ้าของเว็บ
• ปัญหากับ WooCommerce: บางครั้ง Elementor หยุดทำงานบนเว็บ WooCommerce มีส่วนต่อไปพูดถึงวิธีแก้ไข

Elementor ไม่ทำงานกับ WooCommerce? วิธีแก้ไข

พบบ่อยหากติดตั้ง WooCommerce หลังจากติดตั้ง Elementor ไปแล้ว นี่คือวิธีลองแก้ไข:

• อัปเดต Elementor, WordPress และ WooCommerce ให้เป็นเวอร์ชันล่าสุด: ตรวจสอบว่าปลั๊กอินและ PHP ทั้งหมดทันสมัย มีบทความอัปเดตปลั๊กอินอย่างปลอดภัยที่อาจช่วยได้
• เปิดใช้งาน Switch Editor Loader Method: คลิก Elementor ในแถบด้านข้าง คลิก Settings ไปที่แท็บ Advanced เปิด Switch Editor Loader Method โดยติ๊ก checkbox
• ล้างแคช (Clear cache): หากมีปลั๊กอินแคช ล้างแคชดู หากช่วยได้ หรือปิดปลั๊กอินแคชชั่วคราว จะช่วย bypass ปัญหาแคช
• ตรวจสอบปลั๊กอินอื่นรบกวน Elementor หรือไม่: ปิดปลั๊กอินทั้งหมด ดูว่าโหลด Elementor ได้ไหม หากได้ เปิดปลั๊กอินทีละตัว จน Elementor ทำงานอีกครั้ง จะรู้ว่าปลั๊กอินไหนเป็นปัญหา ทิ้งปลั๊กอินนั้นไว้ปิด หรือ roll back ไปเวอร์ชันเก่า

ปลั๊กอินแนะนำสำหรับเว็บ WooCommerce

• BlogVault: ปกป้องทุกออเดอร์ การซื้อ ลูกค้า และธุรกรรมบนร้าน WooCommerce ด้วยการสำรองแบบเรียลไทม์ของ BlogVault ระบบอัตโนมัติเต็มรูปแบบ สำรองซิงค์ทุก 5 นาที เก็บ offsite เพื่อความปลอดภัยมากขึ้น
• MalCare: ปลั๊กอินความปลอดภัย WordPress ระดับดีที่สุด เพียงตัวเดียวพอที่จะปกป้องเว็บจากแฮกเกอร์และมัลแวร์ สแกนและทำความสะอาดมัลแวร์ได้ในไม่กี่คลิก ป้องกันมัลแวร์เข้ามาด้วยไฟร์วอลล์ขั้นสูง ปกป้องรายละเอียดลูกค้าจากการถูกแฮกเกอร์เข้าถึง
• Google Analytics: เครื่องมือวิเคราะห์ต้นแบบ (OG) วิเคราะห์トラフィก และเข้าใจลูกค้าดีกว่า มีบทความผสานรวม Google Analytics เข้า WooCommerce
• YITH WooCommerce Order Tracking: ปลั๊กอินช่วยจัดการข้อมูลจัดส่งง่ายขึ้น อนุญาตให้ลูกค้าติดตามการซื้อ
• YITH Advanced Refund System for WooCommerce: ปลั๊กอินช่วยตั้งระบบคืนเงิน

ข้อคิดสุดท้าย

หากพร้อมลงทุนใน page builder Elementor อาจเป็นตัวเลือกที่ดี แต่ก่อนเปลี่ยนแปลงใดๆ ให้สำรองเว็บไซต์ด้วย BlogVault วิธีปกป้องเว็บจากอุบัติเหตุ และเป็นประกันภัยกรณีมีอะไรผิดพลาดร้ายแรง

FAQ

Elementor ดีแค่ไหนสำหรับเว็บ WooCommerce?

Elementor ดีมากสำหรับเว็บ WooCommerce เพราะมี elements มากมายที่ปรับแต่งได้ โดยเฉพาะเพื่อทำให้การเดินทางของลูกค้าดีขึ้น ด้วย Elementor Pro ไม่ต้องใช้ปลั๊กอินอื่นเพื่อสร้างเว็บ WooCommerce ที่ทำงานได้ดี

Elementor เป็น page builder ที่ดีที่สุดไหม?

Elementor เป็นหนึ่งใน page builder plugins ที่ดีที่สุด ระหว่างตัวอื่นๆ เช่น SeedProd และ WPBakery ใช้ง่าย ปรับแต่งได้สูง และคุ้มค่ากับราคา

Add-ons ที่ดีที่สุดสำหรับ WooCommerce คืออะไร?

Add-ons ที่จำเป็นสำหรับเว็บ WooCommerce ได้แก่ BlogVault สำหรับ backup, MalCare สำหรับความปลอดภัย, YITH WooCommerce Order Tracking, และ YITH Advanced Refund System for WooCommerce

เพิ่ม Elementor เข้า WooCommerce ยังไง?

ติดตั้ง Elementor จาก plugin directory ของ WordPress admin ต่อมา activate และเพิ่ม license key หากใช้ Pro version พร้อมสร้างเว็บไซต์ที่ต้องการแล้ว

WooCommerce ฟรีกับ Elementor ไหม?

WooCommerce ฟรี Elementor มีทั้งฟรีและเสียเงิน แม้แต่สำหรับ WooCommerce ควรซื้อเวอร์ชันเสียเงินของ Elementor

แก้ไข WooCommerce ด้วย Elementor ได้ไหม?

ได้ แก้ไขเว็บ WooCommerce ได้ง่ายด้วย Elementor จริงๆ ทุกตารางนิ้วของเว็บ WooCommerce แก้ไขได้ด้วย Elementor เพียงติดตั้ง เปิดใช้งาน และเริ่มปรับแต่ง

Elementor ใน WooCommerce คืออะไร?

Elementor คือปลั๊กอิน page builder สำหรับ WordPress และ WooCommerce มีทั้งฟรีและเสียเงิน ติดตั้งแล้ว มี elements หลากหลายให้ลาก วาง และปรับแต่ง