100 WooCommerce Tips รวมเทคนิคเพื่อเว็บร้านค้าออนไลน์ ตอน 2

ปรับแต่ง Woocommerce

WooCommerce คือ ระบบตระกร้าสินค้า เพื่อทำเว็บร้านค้าออนไลน์ (E-commerce) ที่มีผู้ใช้งานมากที่สุดในโลก ยิ่งมีผู้ใช้งานมากการ ปรับแต่ง Woocommerce ได้ดั่งใจ ยิ่งมีรายละเอียดและลูกเล่นมาตามไปด้วย

ผมขอรวบรวม Tips & Trick เท่าที่ผมพอจะรู้มาให้ได้มากที่สุด ซึ่งบทความตอนสองนี้ จะค่อนข้าง Advance กว่าตอนแรกเข้าไปอีก ใครที่พลาดตอนแรกกับเขาไปดูย้อนหลังกันได้เลย ที่ 100 WooCommerce Tips part 1

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

100 เทคนิคสำหรับ ปรับแต่ง Woocommerce

51. เพิ่ม tab อธิบายข้อมูลสินค้าเพิ่มเติม

ใช้ปลั๊กอินตัวนี้เลยครับ Custom Product Tabs for WooCommerce

Custom Product Tabs

52. เว็บตัดภาพพื้นหลังออกจากสินค้า สำหรับคนที่ไม่เก่ง Photoshop

ไปที่เว็บนี้ครับ  https://clippingmagic.com/ แต่ไม่ฟรีนะมีค่าบริการรายเดือน เริ่มต้นเดือนละ 120 บาท ตัดได้ 15 รูป ถือว่าถูกมากหากต้องทำเองหรือคิดจะไปจ้างคนอื่นให้ช่วยทำให้

clippingmagic

53. ทำเว็บทัวร์ เว็บโรงแรม ใช้ woocommerce + Easy Booking.

ดาวน์โหลดปลั๊กอินที่นี่ WooCommerce Easy Booking

easy booking

54. ทำเว็บเสกลขนาดไหนเหมาะกับ Woocommerce มากที่สุด

หากเราแบ่งประเภทของเว็บร้านค้า อาจจำแนกได้ 2 ประเภทใหญ่ๆ

1) เว็บร้านค้ารายเดียว ที่ขายสินค้าต่างๆ

2 ) เว็บร้านค้าที่เป็นตลาดกลาง (Market place) ที่เปิดให้ร้านค้าหลายราย มาวางขายสินค้า ตัวอย่างเช่น Lazada, Amazon Kaidee

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

เพราะเว็บที่เป็น Market place มีความซับซ้อนของระบบมากกว่าหลายเท่า เพราะผู้ขายต้องมีสิทธิเอาสินค้ามาวางขาย และแก้ไขรายละเอียดของตัวเอง เช็คยอดเงิน / การส่งของต่างๆ (ซึ่งต้องกำหนดอีกมากว่า ใครส่ง ด้วยเงื่อนไขไหน ใครรับประกัน)

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

55. ปลั๊กอินสำหรับใช้ Woocommerce เป็น Marketplace

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

1) MCVendors

2) Dokan

3) WC-marketplace

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

56. การกำหนดจำนวนสินค้า/ราคา ขั้นต่ำ สำหรับการสั่งซื้อแต่ละครั้ง

เหมาะกับเว็บสินค้าที่ราคาต่อชิ้นไม่สูงมาก  เพื่อบังคับให้ลูกค้าเลือกจำนวนสินค้าขั้นต่ำในการสั้งซื้อ เราสามารถใช้ปลั๊กอินตัวนี้ทำได้ครับ Woocommerce Minimum and Maximum Quantity

57. ปลั๊กอินเปลี่ยนชื่อรูปเป็นภาษาอังกฤษทีเดียวทั้งเว็บ

เป็นที่รู้กันว่าหากเราตั้งชื่อรูปภาพต่างๆ เป็นภาษาไทย หากเราต้องมีการ Back up หรือย้ายเว็บ เมื่อไหร่ พวกรูปภาพที่เราตั้งชื่อเป็นไทย จะมี Error คือ รูปภาพมันจะไม่ตามมาด้วยนั้นเอง อาการจะเป็นแบบนี้ครับ

ปรับแต่ง Woocommerce

ถ้ารูปภาพไม่เยอะเราเข้าไปแก้รูปภาพที่ละใบ แต่หากรูปมีจำนวนมากใช้ปลั๊กอิน Media File Renamer ช่วยเปลี่ยนชื่อรูปได้ครับ

58. ห้ามแก้โค้ดลงไปที่ไฟล์ core ของธีมโดยตรงเด็ดขาด

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

แต่หากมีความจำเป็นต้องมีการแก้ไขโค้ด เช่น แก้พวก Css (เกี่ยวกับความสวยงาม) หรือพวก สคริปต์ php (เกี่ยวกับฟังชั่นเล็กๆ น้อย)

ถ้าธีมที่เราซื้อมามี Child theme ติดมาด้วย ให้เราลง Child theme (โดยมากหากเป็นธีมเสียเงินส่วนใหญ่จะมีมาให้อยู่แล้ว) ให้เราแก้ css ที่ในส่วนของ Child theme: Stylesheet (style.css) และแก้พวกที่เป็น ไฟล์ script ตรง Child: Theme Functions (functions.php)

หากธีมที่เราไม่มี child theme มาให้ การแก้ Css ให้เรามองหาฟังชั่น custom css ที่ส่วนของ theme option ดูก่อน ถ้าไม่มีอีก ค่อยลงปลั๊กอิน Simple Custom CSS และให้ใช้ปลั๊กอิน Code snippet แก้ไขพวก สคริปต์ functions.php ต่าง

59. ซ่อน “What is PayPal?”

hide paypal text

ให้วาง code นี้ที่ functions.php ผ่านปลั๊กอิน Code snippet

add_filter( ‘woocommerce_gateway_icon’, ‘loc_remove_what_is_paypal’, 10, 2 );
function loc_remove_what_is_paypal( $icon_html, $gateway_id ) {
if( ‘paypal’ == $gateway_id ) { $icon_html = ‘<img src=”/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png” alt=”Pay using PayPal”>’;}
return $icon_html;}

hide paypal text code snippet

60. ทำ countdown

ก่อน ปรับแต่ง Woocommerce ให้ดูที่ element ของธีมเราก่อนว่ามีฟังชั่นนี้มั้ย ถ้าไม่มีค่อยใช้ปลั๊กอินนี้ทำได้ Finale Countdown Timer

final countdown

61. สร้างปุ่ม add to cart ของสินค้าแต่ละชิ้นเอง

บางครั้งเราอาจอย่างวางสินค้าให้เป็นแบบตาราง (pricing table) แต่เราอาจจะงงว่า แล้วจะสร้าปุ่ม สั่งซื้อ (add to cart URL) แยกสินค้าแต่ละชิ้นเองได้อย่างไร ลองทำตามวิธีนี้ได้เลยครับ

custom add to cart url

1) ลงสินค้าแต่ละชิ้นเป็นแบบ single product ให้เรียบร้อย คู่มือลงสินค้า Woocommerce

2) เตรียม Product id ของสินค้าแต่ละตัว เข้าไป all product เอาเมาส์ไปชี้ที่ชื่อสินค้า ใต้ชื่อสินค้ามันจะแสดง product id ของสินค้าตัวนั้น

Woocommerce product id

3) ไปยังหน้า page ที่เราสร้างไว้ สร้างปุ่มกดสั่งซื้อ
ใส่ URL นี้เข้าไปหลังปุ่ม https://www.yourwebsite.com/yourpage/?add-to-cart=164

62. ธีมที่ผมแนะนำ

จากการลองใช้งานมาหลายธีม (ทุกธีมตัวขายดี บนโลกใบนี้ผมซื้อมาเล่นหมดแล้ว) ธีมที่มีฟังชั่นพื้นฐานเกี่ยวกับ Woocommerce ครบ และมี page builder ที่ใช้งานง่าย เหมาะสำหรับมือใหม่และผู้ที่ไม่มีความรู้เรื่อง Code ผมแนะนำธีมนี้ครับ Flatsome Theme

flatsome-theme

ข้อดีเบื้องต้นคือ Page Builder ของตัวเอง ชื่อว่า Ux builder ซึ่งเป็น builder ที่มี Live preview ดูผ่านหลังบ้านได้เลย และธีมนี้เขามีฟังชั่นพื้นฐานเกี่ยวกับทำเว็บร้านค้า มาให้ครบ ครบยังไงบ้าง เดี๋ยวบทความต่อๆ ไปผมจะมารีวิวจัดเต็ม และสอนวิธีการใช้งานธีมนี้ให้นะ

63. อย่าสร้างช่องทางชำระเงินเยอะเกินไป

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

เราต้องวิเคราะห์ว่าลูกค้าเราคือใคร สินค้าของเราโดยมากปิดการขายที่ Facebook , Line หรือผ่านทางระบบตระกร้าสินค้าที่เว็บ ถ้าลูกค้าส่วนใหญ่มาทาง Social media เราควรเพิ่มปุ่ม ติดต่อแม่ค้า ผ่าน messenger ของ facebook หรือ Line chat อยู่ด้านบนหรือด้านล่าง ปุ่ม Add to cart

ใช้งาน Woocommerce
line checkout on product

ส่วนที่ระบบตระกร้าสินค้าเราอาจจะสร้างช่องทางชำระสินค้าสัก 2 อย่างก็พอ

64. จัการสต็อกสินค้า Variable product

บางสินค้ามีตัวเลือกเยอะเช่น มีหลายสี หลายขนาด ทำให้การต้องไปแก้ stock ค่อนข้างลำบาก ตรงจุดนี้เราอาจแก้ปัญหาด้วยปลั๊กอินนี้ได้ครับ WooCommerce Stock Manager เราสามารถเพิ่ม/ลบ สินค้าได้บนหน้าเดียว

WooCommerce Stock Manager

65. ถ้าเว็บเรามีสินค้าเยอะ ที่หน้า Product อย่าลงข้อมูลซับซ้อน

เช่น การใช้ page builder ต่างมาจัด layout ในส่วน description (คำอธิบายขนาดยาว ด้านล่างสินค้า) ของสินค้านั้นๆ เพราะหากต้องการ export หรือ import มันจะได้ทำได้ง่าย ข้อมูลไม่เสียหาย แต่หากหน้าสินค้าเรามีการใช้ page builder อาจจะเกิด Error ในขั้นตอนอัพเดทขึ้นเว็บนั้นเอง

67. เพิ่มหรืออ้างสิทธิ์ในรายชื่อธุรกิจ บน Google map

ถ้าเรามีหน้าร้านขายของ อย่าลืมเข้าไปลงทะเบียนใช้งาน Google My Business

ช่วยให้เราได้ลูกค้าที่อยู่พื้นที่ใกล้ๆ ค้นหาเจอร้านค้าของเราได้ง่ายขึ้นนะ

google my business

67.บวกราคาสินค้าเพิ่ม สำหรับการชำระเงินด้วย บัตรเครดิต หรือ paypal

เป็นที่รู้กันหากเว็บเรามีระบบชำระเงินผ่านบัตรเครดิต ซึ่งเราต้องอาศัยพวก payment gateway เช่น PayPal หรือ Omise ทุกครั้งที่มีการชำระเงินเข้ามา เราต้องเสียค่าบริการ 3-4%

หากใครต้องการบวกส่วนต่างนี้เข้าไปที่สินค้าลองค้นคำว่า “add shipping costs and add an extra fee for paypal gateway” บน Google ดูนะ หรือจะลองใช้ปลั๊กอิน 2 ตัวนี้ดูก็ได้

– Payment Gateway Based Fees and Discounts

– WooCommerce Extra Charges To Payment Gateway

68. เพิ่มรูปภาพสินค้าที่อีเมลรายการสั่งซื้อสินค้า

email order picture

โดยปกติอีเมลรายการสั่งซื้อจะไม่มีรูปสินค้าติดมาด้วย ใครอยากให้มีรูปสินค้าติดมาบนเมลด้วย ให้วาง code นี้ที่ functions.php ผ่านปลั๊กอิน Code snippet ได้เลย

add_filter( ‘woocommerce_email_order_items_args’, ‘loc_display_product_picture_in_email’, 10, 1 );

function loc_display_product_picture_in_email( $args ) {

$args[‘show_image’] = true;

return $args; }

69. เว็บเรียนรู้เทคนิคที่เราอาจไม่เคยรู้เกี่ยวกับ Woocommerce

ผมชอบเขามาดูเทคนิคจากเว็บนี้ครับ linesofcode.se

70. ทำรูปสินค้าหมุน 360º

มีปลั๊กอินมาแนะนำอยู่ 3 ตัวครับ

– WooCommerce 360º Image

– Magic 360 for WooCommerce

– WooCommerce Product 360 Image by ithemelandco

71. ทำ E-commerce แบบไทยๆ

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

cart-to-chat

รูปภาพประกอบจากเว็บ seedthemes

เป็นยังไงกันบ้างเอ่ย คงพอได้ประโยชน์กันไม่มากก็น้อยนะ บทความตอนที่ 2 นี้รวบรวมเพิ่มจากตอนแรกมาอีก 20 tips ยังติดค้างอยู่อีก 30 tips เอาไว้เป็นตอนต่อไปแล้วกันนะ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *