WooCommerce
100 WooCommerce Tips รวมเทคนิคเพื่อเว็บร้านค้าออนไลน์ ตอน 2
WooCommerce คือ ระบบตระกร้าสินค้า เพื่อทำเว็บร้านค้าออนไลน์ (E-commerce) ที่มีผู้ใช้งานมากที่สุดในโลก ยิ่งมีผู้ใช้งานมากการ ปรับแต่ง Woocommerce ได้ดั่งใจ ยิ่งมีรายละเอียดและลูกเล่นมาตามไปด้วย
ผมขอรวบรวม Tips & Trick เท่าที่ผมพอจะรู้มาให้ได้มากที่สุด ซึ่งบทความตอนสองนี้ จะค่อนข้าง Advance กว่าตอนแรกเข้าไปอีก ใครที่พลาดตอนแรกกับเขาไปดูย้อนหลังกันได้เลย ที่ 100 WooCommerce Tips part 1
เผื่อเป็นประโชน์ไม่มากก็น้อยสำหรับผู้ที่สนใจ หากเห็นว่ามีประโยชน์อย่าลืมแชร์ต่อด้วยน้า
100 เทคนิคสำหรับ ปรับแต่ง Woocommerce
51. เพิ่ม tab อธิบายข้อมูลสินค้าเพิ่มเติม
ใช้ปลั๊กอินตัวนี้เลยครับ Custom Product Tabs for WooCommerce
52. เว็บตัดภาพพื้นหลังออกจากสินค้า สำหรับคนที่ไม่เก่ง Photoshop
ไปที่เว็บนี้ครับ https://clippingmagic.com/ แต่ไม่ฟรีนะมีค่าบริการรายเดือน เริ่มต้นเดือนละ 120 บาท ตัดได้ 15 รูป ถือว่าถูกมากหากต้องทำเองหรือคิดจะไปจ้างคนอื่นให้ช่วยทำให้
53. ทำเว็บทัวร์ เว็บโรงแรม ใช้ woocommerce + Easy Booking.
ดาวน์โหลดปลั๊กอินที่นี่ WooCommerce 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
โดยส่วนตัวผมก็ยังไม่เคยซื้อมาลองเล่นดูนะ เพราะดูแล้วหากทำจริงจังคงจะซ้ำซ้อนเกินไป เสียเวลาทำด้วย แต่จากการพวกรีวิวต่างๆ ส่วนใหญ่บอกว่า ตัว Mcvendors ดีที่สุด พวกเราลองไปหาข้อมูลเพิ่มเติมกันต่อนะ
56. การกำหนดจำนวนสินค้า/ราคา ขั้นต่ำ สำหรับการสั่งซื้อแต่ละครั้ง
เหมาะกับเว็บสินค้าที่ราคาต่อชิ้นไม่สูงมาก เพื่อบังคับให้ลูกค้าเลือกจำนวนสินค้าขั้นต่ำในการสั้งซื้อ เราสามารถใช้ปลั๊กอินตัวนี้ทำได้ครับ Woocommerce Minimum and Maximum Quantity
57. ปลั๊กอินเปลี่ยนชื่อรูปเป็นภาษาอังกฤษทีเดียวทั้งเว็บ
เป็นที่รู้กันว่าหากเราตั้งชื่อรูปภาพต่างๆ เป็นภาษาไทย หากเราต้องมีการ Back up หรือย้ายเว็บ เมื่อไหร่ พวกรูปภาพที่เราตั้งชื่อเป็นไทย จะมี Error คือ รูปภาพมันจะไม่ตามมาด้วยนั้นเอง อาการจะเป็นแบบนี้ครับ
ถ้ารูปภาพไม่เยอะเราเข้าไปแก้รูปภาพที่ละใบ แต่หากรูปมีจำนวนมากใช้ปลั๊กอิน 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?”
ให้วาง 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;}
60. ทำ countdown
ก่อน ปรับแต่ง Woocommerce ให้ดูที่ element ของธีมเราก่อนว่ามีฟังชั่นนี้มั้ย ถ้าไม่มีค่อยใช้ปลั๊กอินนี้ทำได้ Finale Countdown Timer
61. สร้างปุ่ม add to cart ของสินค้าแต่ละชิ้นเอง
บางครั้งเราอาจอย่างวางสินค้าให้เป็นแบบตาราง (pricing table) แต่เราอาจจะงงว่า แล้วจะสร้าปุ่ม สั่งซื้อ (add to cart URL) แยกสินค้าแต่ละชิ้นเองได้อย่างไร ลองทำตามวิธีนี้ได้เลยครับ
1) ลงสินค้าแต่ละชิ้นเป็นแบบ single product ให้เรียบร้อย คู่มือลงสินค้า Woocommerce
2) เตรียม Product id ของสินค้าแต่ละตัว เข้าไป all product เอาเมาส์ไปชี้ที่ชื่อสินค้า ใต้ชื่อสินค้ามันจะแสดง product id ของสินค้าตัวนั้น
3) ไปยังหน้า page ที่เราสร้างไว้ สร้างปุ่มกดสั่งซื้อ
ใส่ URL นี้เข้าไปหลังปุ่ม https://www.yourwebsite.com/yourpage/?add-to-cart=164
62. ธีมที่ผมแนะนำ
จากการลองใช้งานมาหลายธีม (ทุกธีมตัวขายดี บนโลกใบนี้ผมซื้อมาเล่นหมดแล้ว) ธีมที่มีฟังชั่นพื้นฐานเกี่ยวกับ Woocommerce ครบ และมี page builder ที่ใช้งานง่าย เหมาะสำหรับมือใหม่และผู้ที่ไม่มีความรู้เรื่อง Code ผมแนะนำธีมนี้ครับ Flatsome Theme
ข้อดีเบื้องต้นคือ Page Builder ของตัวเอง ชื่อว่า Ux builder ซึ่งเป็น builder ที่มี Live preview ดูผ่านหลังบ้านได้เลย และธีมนี้เขามีฟังชั่นพื้นฐานเกี่ยวกับทำเว็บร้านค้า มาให้ครบ ครบยังไงบ้าง เดี๋ยวบทความต่อๆ ไปผมจะมารีวิวจัดเต็ม และสอนวิธีการใช้งานธีมนี้ให้นะ
63. อย่าสร้างช่องทางชำระเงินเยอะเกินไป
เราควรสร้างช่องทางการชำระเงินไว้สัก 1-2 ช่องทางก็พอ ยิ่งตัวเลือกเยอะ ลูกค้ายิ่งตัดสินใจนาน จนบางครั้งเขาคิดได้ (สติเริ่มมา) ว่าไม่ซื้อดีกว่า ตอนที่ลูกค้ากำลังอยากได้อะไร เราควรรีบปิดการขาย เก็บเงินให้ไวที่สุดนั้นเอง
เราต้องวิเคราะห์ว่าลูกค้าเราคือใคร สินค้าของเราโดยมากปิดการขายที่ Facebook , Line หรือผ่านทางระบบตระกร้าสินค้าที่เว็บ ถ้าลูกค้าส่วนใหญ่มาทาง Social media เราควรเพิ่มปุ่ม ติดต่อแม่ค้า ผ่าน messenger ของ facebook หรือ Line chat อยู่ด้านบนหรือด้านล่าง ปุ่ม Add to cart
ส่วนที่ระบบตระกร้าสินค้าเราอาจจะสร้างช่องทางชำระสินค้าสัก 2 อย่างก็พอ
64. จัการสต็อกสินค้า Variable product
บางสินค้ามีตัวเลือกเยอะเช่น มีหลายสี หลายขนาด ทำให้การต้องไปแก้ stock ค่อนข้างลำบาก ตรงจุดนี้เราอาจแก้ปัญหาด้วยปลั๊กอินนี้ได้ครับ WooCommerce Stock Manager เราสามารถเพิ่ม/ลบ สินค้าได้บนหน้าเดียว
65. ถ้าเว็บเรามีสินค้าเยอะ ที่หน้า Product อย่าลงข้อมูลซับซ้อน
เช่น การใช้ page builder ต่างมาจัด layout ในส่วน description (คำอธิบายขนาดยาว ด้านล่างสินค้า) ของสินค้านั้นๆ เพราะหากต้องการ export หรือ import มันจะได้ทำได้ง่าย ข้อมูลไม่เสียหาย แต่หากหน้าสินค้าเรามีการใช้ page builder อาจจะเกิด Error ในขั้นตอนอัพเดทขึ้นเว็บนั้นเอง
67. เพิ่มหรืออ้างสิทธิ์ในรายชื่อธุรกิจ บน Google map
ถ้าเรามีหน้าร้านขายของ อย่าลืมเข้าไปลงทะเบียนใช้งาน 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. เพิ่มรูปภาพสินค้าที่อีเมลรายการสั่งซื้อสินค้า
โดยปกติอีเมลรายการสั่งซื้อจะไม่มีรูปสินค้าติดมาด้วย ใครอยากให้มีรูปสินค้าติดมาบนเมลด้วย ให้วาง 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 Product 360 Image by ithemelandco
71. ทำ E-commerce แบบไทยๆ
คนไทยส่วนมากชอบคุยชอบแชทกับแม่ค้า พ่อค้า ก่อนซื้อกันเป็นส่วนใหญ่ เราเลยขอแนะนำ วิธีเปลี่ยนปุ่ม Add to Cart เป็นปุ่มที่กดแล้วแชทกับร้านค้า
รูปภาพประกอบจากเว็บ seedthemes
เป็นยังไงกันบ้างเอ่ย คงพอได้ประโยชน์กันไม่มากก็น้อยนะ บทความตอนที่ 2 นี้รวบรวมเพิ่มจากตอนแรกมาอีก 20 tips ยังติดค้างอยู่อีก 30 tips เอาไว้เป็นตอนต่อไปแล้วกันนะ
รูปสินค้าใน woo ไม่อยากให้คลิกที่รูปเพื่อโชว์ป๊อบอัพ ค่ะ สามารถแก้โค๊ดได้มั้ยคะ
ขึ้นอยู่กับธีมที่เลือกใช่ครับ บางธีมก็จะมี option ให้ปรับว่าจะให้เป็นแบไหน แบบ zoom หรือ popup ลองหาดูในส่วนของ Theme option ในธีมที่เราเลือกใช้นะ
ขอสอบถามค่ะ เราไปเปลี่ยนสีราคาสินค้า ราคาเต็ม ราคาลด ยังไงหรอคะ
อย่างเช่นราคาเต็ม เป็นสีดำ ราคาลดก็จะเป็นสีแดงค่ะ
การปรับแต่งทางเทคนิค อาจลองไปตั้งกระทู้ถามในกลุ่มนี้ดูครับ https://www.facebook.com/groups/wpalliance/ ในกลุ่มจะมีผู้เชี่ยวชาญ WordPress หลายคน เดี๋ยวพวกเขาจะช่วยเราหาคำตอบได้นั้นเอง ทางผมตอนนี้อาจยังไม่สะดวกหาคำตอบมาให้ครับผม
ร้านมีระบบผ่อน แต่ให้ผ่อนเฉพาะยอดเกิน 10000 มีตัวช่วยมั้ยครับ
ขอบคุณครับ
ตัวนี้น่าจะพอทำได้นะ https://yithemes.com/themes/plugins/yith-woocommerce-deposits-and-down-payments/ แต่ต้องลองอ่านรายละเอียดเขาดูอีกทีครับ บางระบบผมยังไม่เคยทำอาจตอบแบบฟันธงให้ไม่ได้ครับ
สวัสดีครับ อยากสอบถามเรื่องการใส่ review ในเว็บไซต์ครับ
ไปกดเลือกฟังก์ชั่นใน หน้าwoocommerce>>setting>>products แล้วครับ แต่ในหน้าเว็บหลักก็ไม่แสดงรีวิว สินค้าครับ ผมไปเลือกซ์้อ ธีมของคนไทยมาครับ
มีธีมไหนแนะนำไหมครับผม หรือพี่มีธีมที่ปรับแต่งง่ายๆจำหน่ายไหมครับ
ขอบคุณครับ
ธีมที่ออกแบบมาเพื่อ Woocommerce โดยเฉพาะ ใช้งานง่าย และมีประสิทธิภาพ ผมแนะนำธีมนี้ครับ Flatsome Theme อันนี้เป็นคู่มือการใช้งานธีมนะ https://flatsome.padveewebschool.com/
WooCommerce มีการกำหนดราคา เป็นแบบส่วนลดสินค้าตามปริมาณได้มั้ยคะ ที่ลดเลยไม่เกี่ยวคูปอง หรือต้องใส่ปลั๊กตัวไหนเพิ่มคะ ….. “Lปลั๊กอิน” เจอข้อความแบบนี้ในหลายเว็บเลยค่ะ ไม่เข้าใจ
ลองดูตัวนี้ครับ WooCommerce Dynamic Pricing & Discounts
ขอบคุณค่ะ
กรณีที่เราทำเว็บ 2 ภาษา ตอนทำสต็อคสินค้าให้ลูกค้าเลือกซื้อสินค้า เราต้องสร้างแบบไหนคะ ในกรณีที่สร้าง 2 หน้า แล้วตรงจำนวนสินค้าเราต้องจัดการแบบไหนคะ
…ขอบคุณคะ
อยากขอความเห็น Theme XStore ว่าเป็นยังไงบ้างครับ Flatsome
ธีมก็เหมือนโปรแกรม ไม่มีธีมไหนดีที่สุด มีแค่ธีมที่เราเชี่ยวชาญกับไม่เชี่ยวชาญ ก่อนจะเลือกใช้งานธีมไหน นอกจากฟังชั่นการใช้งานของธีม เราต้องคำนึงถึงการทำงามร่วมกับ WordPress และปลั๊กอินต่างๆด้วย แนะนำให้เราลองดูคลิปนี้ก่อน https://youtu.be/b93PHDZ-_hE เป็นความรู้พื้นฐาน WordPress รวมถึงหลักการเลือกใช้ธีมและปลั๊กอินต่างๆ ครับ
แนะนำปลั๊กอินที่เราสามารถเลือกมุมมองการดูสินค้า ให้เป็นแบบ grid/table/list หน่อยค่ะ
ผมสามารถสร้ง coupon หรัสหมายเลข เช่น 10000-90000 โดยที่ไม่ต้องเสียเวลาในการ add ที่ละ coupon ได้หรือเปล่า ซึ่งมันเป็นส่วนลดเดียวกันทั้งหมด ผมสามารแจ้งไขตรงไหนได้บ้างครับ
อยากทราบวิธีการทำหน้า
ที่อยู่ด้านล่าง ของหน้าเพจครับ