สร้าง SalePage ด้วย Plant Theme

โดยปกติหากเพื่อนๆเคยใช้ WordPress ทำเว็บขายสินค้าเพื่อนๆคงจะนึกถึง เว็บไซต์ E-Commerce ใช่มั้ยครับ โดยหลายคนก็คงใช้ Plugin ที่มีชื่อว่า woocommerce แต่แนวโน้มการซื้อของออนไลน์ระยะหลังการซื้อของออนไลน์ด้วยระบบ E-Commerce พบว่าปิดการขายได้ยาก เนื่องจากระบบที่ซับซ้อนเกินไป กล่าวคือ การใช้เว็บไซต์ E-Commerce โดยทั่วๆไปเนี่ย ต้องเริ่มตั้งแต่การ สมัครสมาชิกเว็บไซต์ เลือกสินค้าลงตะกร้า กดเข้าตะกร้า เพิ่มที่อยู่ เลือกวิธีชำระเงิน แจ้งชำระเงิน พบว่ามันต้องผ่านหลายหน้ามากๆ แต่ SalePage สามารถจบทุกอย่างภายในหน้าหน้าเดียว แต่ถ้าเพื่อนๆยังไม่เห็นภาพก็ลอง คลิ๊ก เพื่อดูตัวอย่างเว็บ SalePage ที่ผมสร้างไว้ได้ครับ
เพื่อนคงเริ่มสนใจกันแล้วใช่มั้ยครับงั้นไปดูวิธีสร้าง SalePage ด้วย Plant Theme กันเลย

Plant Theme

ก่อนอื่นผมต้องบอกก่อนว่า Plant Theme เป็นธีมที่เราต้องเสียเงินซื้อ ผมได้เขียนรายละเอียดของธีมนี้ไว้ในบทความ รีวิว Plant Theme ธีมจากคนไทย | เทพทำเว็บ ได้เลยครับ

เริ่มสร้าง SalePage กันเลย

ติดตั้ง Theme และ Plugin ให้เรียบร้อย

ก่อนอื่นให้เพื่อนๆติดตั้ง Plant Theme ให้เรียบร้อย

พอติดตั้ง Theme เรียบร้อยก็ให้เพื่อนๆติดตั้ง Plugin ดังนี้

  • Kirki Customizer Framework (อันนี้จำเป็นต้องติดตั้งเนื่องจาก Theme ต้องใช้ Code บางส่วน)
  • Forminator (จำเป็นเหมือนกัน เอาไว้ทำฟอร์มชำระเงิน และ เก็บที่อยู่ติดต่อ)
  • GenerateBlocks หรือ Block Editor อื่นๆ (ติดตั้งหรือไม่ก็ได้ เอาไว้สร้างหน้าเว็บสวยๆ)

สร้างหน้า

อันนี้สร้างหน้าปกติเลยครับ ไปที่เมนู หน้า > เขียนหน้าใหม่ ต่อไปก็มองหน้าตัวเลือก คุณสมบัติหน้า แล้วเลือก เทมเพลต เป็น SalePage

ตั้งค่า

พอเราเลือกเทมเพลตเป็น SalePage แล้วจะสังเกตมีตัวเลือกของ SalePage เด้งขึ้นมา

Product

ตัวเลือกนี้เป็นการตั้งค่าเกี่ยวกับตัวสินค้า

  • Layout (เป็นการตั้งค่ารูปแบบการจัดเรียงสินค้า สามารถตั้งค่าแยก Mobile Desktop ได้)
  • Products (เอาไว้จัดการสินค้า ภาพ ชื่อ คำอธิบาย ราคา ค่าส่ง)
  • Currency (เอาไว้ตั้งค่าการแสดงสกุลเงิน)

Shipping

ตัวเลือกนี้เป็นการตั้งค่าค่าส่ง

  • None (ไม่แสดงค่าส่ง)
  • Free (ส่งฟรี)
  • Flat Rate (ค่าคงที่)
  • Flat + Free Shipping (ใช้ในกรณี หากชื้อ…เป็นต้นไปจะส่งฟรี จากค่าส่งปกติ)
  • Calculation (การคำณวนค่าส่งในรูปแบบอื่นๆ)

Payment Form

เป็นการตั้งค่าระบบชำระเงิน

ก่อนอื่นให้เพื่อนไปสร้างฟอร์ม ชำระเงินก่อน โดยกลับไปที่หน้าควบคุม เลือกเมนู Forminator > Forms เลือก Import แล้วก็อป Code ด้านล่างนี้ไปใส่เลยครับ หรือไปดูโค้ดที่ Sale Page Payment Form ตั้งค่าฟอร์มแจ้งชำระเงิน – Seed Webs Docs

{"type":"form","data":{"fields":[{"id":"textarea-1","element_id":"textarea-1","form_id":"wrapper-263-7126","type":"textarea","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-263-7126","input_type":"line","limit_type":"characters","field_label":"รายการสั่งซื้อ","placeholder":"","required":false,"required_message":"กรุณาเลือกสินค้า","default-height":"0","custom-class":"order_summary","condition_action":"show","condition_rule":"any"},{"id":"number-1","element_id":"number-1","form_id":"wrapper-3571-6493","type":"number","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-3571-6493","calculations":"true","limit_min":"","limit_max":"","field_label":"ยอดรวม","placeholder":"","required":false,"required_message":"กรุณาเลือกสินค้า","limit_message":"false","condition_rule":"any","condition_action":"show","custom-class":"order_total"},{"id":"html-1","element_id":"html-1","form_id":"wrapper-4643-5046","type":"html","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-4643-5046","field_label":"","variations":"<h2>2. เลือกวิธีชำระเงิน</h2>"},{"id":"radio-1","element_id":"radio-1","form_id":"wrapper-4682-5313","type":"radio","options":[{"label":"โอนเงินเข้าบัญชี","value":"BANK","key":"4802-5057","default":true},{"label":"เก็บเงินปลายทาง","value":"COD","key":"7473-2941","default":false}],"cols":12,"conditions":[],"wrapper_id":"wrapper-4682-5313","value_type":"radio","field_label":"เลือกวิธีชำระเงิน","layout":"vertical","required":true,"required_message":"กรุณาเลือกวิธีชำระเงิน","custom-class":"order_payment"},{"id":"upload-1","element_id":"upload-1","form_id":"wrapper-6890-2256","type":"upload","options":[],"cols":12,"conditions":[{"element_id":"radio-1","rule":"is","value":"BANK"}],"wrapper_id":"wrapper-6890-2256","field_label":"โอนเงินแล้วอัปโหลดสลิป","filetypes":["heic","all-image","jpg|jpeg|jpe","all-image","gif","all-image","png","all-image","bmp","all-image","tiff|tif","all-image","ico","all-image","psd","all-image","xcf","pdf"],"file-type":"multiple","file-limit":"custom","upload-limit":8,"filesize":"MB","required":true,"custom-files":true,"required_message":"กรุณาแนบสลิปโอนเงิน","file-limit-input":"5"},{"id":"html-2","element_id":"html-2","form_id":"wrapper-7338-6448","type":"html","options":[],"cols":12,"conditions":[],"wrapper_id":"wrapper-7338-6448","field_label":"","variations":"<h2>3. ข้อมูลการจัดส่ง</h2>","formid":"wrapper-3972-583"},{"id":"name-1","element_id":"name-1","form_id":"wrapper-1511347711918-1669","type":"name","cols":4,"required":"true","field_label":"ชื่อ","placeholder":"","prefix_label":"Prefix","fname_label":"First Name","fname_placeholder":"E.g., John","mname_label":"Middle Name","mname_placeholder":"E.g., Smith","lname_label":"Last Name","lname_placeholder":"E.g., Doe","wrapper_id":"wrapper-1511347711918-1669","conditions":[],"required_message":"กรุณากรอกชื่อ","custom-class":"customer_name"},{"id":"email-1","element_id":"email-1","form_id":"wrapper-1511347711918-1669","type":"email","cols":4,"required":"true","field_label":"อีเมล","placeholder":"","validation":true,"validation_text":"","wrapper_id":"wrapper-1511347711918-1669","conditions":[],"required_message":"กรุณากรอกอีเมล","validation_message":"อีเมลของคุณไม่ถูกต้อง"},{"id":"number-2","element_id":"number-2","form_id":"wrapper-1511347711918-1669","type":"number","options":[],"cols":4,"conditions":[],"wrapper_id":"wrapper-1511347711918-1669","calculations":"true","limit_min":"","limit_max":"","field_label":"เบอร์มือถือ","placeholder":"","limit_message":"false","required":true,"required_message":"กรุณากรอกเบอร์มือถือ","separators":"blank"},{"id":"textarea-2","element_id":"textarea-2","form_id":"wrapper-1988247712118-9871","type":"textarea","cols":12,"required":true,"field_label":"ที่อยู่","placeholder":"","input_type":"paragraph","limit":"","limit_type":"characters","wrapper_id":"wrapper-1988247712118-9871","conditions":[],"required_message":"กรุณากรอกที่อยู่","default-height":"80"}],"settings":{"pagination-header":"nav","paginationData":{"pagination-header-design":"show","pagination-header":"nav"},"formName":"Product Form","version":"1.14.9","form-border-style":"none","form-padding":"","form-border":"","fields-style":"open","validation":"on_submit","form-style":"none","enable-ajax":"true","autoclose":"","submission-indicator":"show","indicator-label":"กำลังส่งข้อความ...","form-type":"default","submission-behaviour":"behaviour-hide","thankyou-message":"<p>ขอบคุณสำหรับคำสั่งซื้อ ทีมงานจะตรวจสอบและยืนยันโดยเร็วที่สุด</p>","submitData":{"custom-submit-text":"สั่งซื้อสินค้า","custom-invalid-form-message":"ข้อมูลไม่ถูกต้อง หรือไม่ได้เลือกสินค้า กรุณาตรวจสอบอีกครั้ง","conditions":[]},"validation-inline":"1","form-expire":"no_expire","form-padding-top":"0","form-padding-right":"0","form-padding-bottom":"0","form-padding-left":"0","form-border-width":"0","form-border-radius":"0","cform-label-font-family":"Roboto","cform-label-custom-family":"","cform-label-font-size":"12","cform-label-font-weight":"bold","cform-title-font-family":"Roboto","cform-title-custom-family":"","cform-title-font-size":"45","cform-title-font-weight":"normal","cform-title-text-align":"left","cform-subtitle-font-family":"Roboto","cform-subtitle-custom-font":"","cform-subtitle-font-size":"18","cform-subtitle-font-weight":"normal","cform-subtitle-text-align":"left","cform-input-font-family":"Roboto","cform-input-custom-font":"","cform-input-font-size":"16","cform-input-font-weight":"normal","cform-radio-font-family":"Roboto","cform-radio-custom-font":"","cform-radio-font-size":"14","cform-radio-font-weight":"normal","cform-select-font-family":"Roboto","cform-select-custom-family":"","cform-select-font-size":"16","cform-select-font-weight":"normal","cform-multiselect-font-family":"Roboto","cform-multiselect-custom-font":"","cform-multiselect-font-size":"16","cform-multiselect-font-weight":"normal","cform-dropdown-font-family":"Roboto","cform-dropdown-custom-font":"","cform-dropdown-font-size":"16","cform-dropdown-font-weight":"normal","cform-calendar-font-family":"Roboto","cform-calendar-custom-font":"","cform-calendar-font-size":"13","cform-calendar-font-weight":"normal","cform-button-font-family":"Roboto","cform-button-custom-font":"","cform-button-font-size":"14","cform-button-font-weight":"500","cform-timeline-font-family":"Roboto","cform-timeline-custom-font":"","cform-timeline-font-size":"12","cform-timeline-font-weight":"normal","cform-pagination-font-family":"","cform-pagination-custom-font":"","cform-pagination-font-size":"16","cform-pagination-font-weight":"normal","payment_require_ssl":"","submission-file":"delete","form_name":"order-form","form_status":"publish","honeypot":"1","use_ajax_load":"1","use_donotcachepage":"1","enable-submissions-retention":"false"},"client_id":null,"notifications":[{"slug":"notification-1234-4567","label":"Admin Email","email-recipients":"default","recipients":"noreply@website.com","email-subject":"มีคำสั่งซื้อใหม่จาก {form_name} รหัส {submission_id}","email-editor":"You have a new website form submission: <br/> {all_fields} <br/>---<br/> This message was sent from {site_url}.","email-attachment":"true","conditions":[]}]},"status":"publish","version":"1.14.9"}

ทีนี้เราจะได้ Product Form มา แล้วเราก็กลับไปหน้าที่เราสร้างกันไปเมื่อกี้เพื่อตั้งค่าต่อ จะเห็นตัวเลือก Forminator ให้เลือก product-form

  • Summary Table (เป็นการตั้งค่าคำที่ใช้ในตารางสรุปราคา)
  • Bank Account เอาไว้ตั้งค่าบัญชีธนาคารเพื่อแสดง

Design

  • Show Header (เปิดเพื่อแสดง Header)
  • Show Footer (เปิดเพื่อแสดง Footer)
  • Background Color (ตั้งค่าสีพื้นหลัง)
  • Accent Color (ตั้งค่าสีหลักของเว็บไซต์)
  • Cover Image (ภาพที่ใช้แสดงด้านบน)
  • Logo (โลโก้สินค้า)
  • Rounded Logo (ขอบโค้งของโลโก้)

กดเผยแพร่เลย!

เพียงเท่านี้เราก็ได้ SalePage สวยๆแล้วค้าบบบ แต่หากใครยังไม่เห็นภาพผมได้ทำ VDO ไว้แล้วครับ

VDO สร้าง SalePage ด้วย Plant Theme (WordPress)

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า