วิธีสร้างเว็บไซต์อีคอมเมิร์ซโดยใช้ WordPress และ Elementor 2020

ในบทช่วยสอนนี้ ฉันกำลังสอนวิธีสร้างเว็บไซต์อีคอมเมิร์ซโดยใช้ WordPress และ Elementor 2020 ที่คุณสามารถปรับแต่งได้อย่างเต็มที่

WordPress เป็นแพลตฟอร์ม CMS ที่ใช้มากที่สุดสำหรับการสร้างเว็บไซต์ทุกประเภท รวมถึงเว็บไซต์อีคอมเมิร์ซ นอกจากนี้ คุณจะได้เรียนรู้การใช้ตัวสร้างเพจ Elementor เพื่อสร้างหน้าเว็บที่น่าทึ่ง ซึ่งขณะนี้เป็นผู้สร้างเพจอันดับ 1 และได้รับความนิยมมากที่สุดสำหรับ WordPress WordPress ควบคุมมากกว่า 1 ใน 3 ของอินเทอร์เน็ต บริษัทอีคอมเมิร์ซรายใหญ่ส่วนใหญ่ เช่น Sony, Bata, eBay และอื่นๆ อีกมากมาย กำลังใช้ if สำหรับการพัฒนาและบำรุงรักษาเว็บไซต์ของตน และส่วนที่ดีที่สุดเกี่ยวกับการใช้ WordPress ก็คือ คุณไม่จำเป็นต้องเรียนรู้ภาษาเขียนโค้ดใดๆ หรืออื่นๆ ศัพท์แสงทางเทคนิคเพื่อสร้างเว็บไซต์ของคุณ เป็นแพลตฟอร์มลากและวางที่เรียบง่ายซึ่งมีเทมเพลตและเลย์เอาต์ในตัวจำนวนมากซึ่งช่วยในการสร้างเว็บไซต์ที่เป็นมิตรต่อผู้ใช้ที่น่าดึงดูด นอกจากนี้ ฉันจะจัดเตรียมเทมเพลตที่สร้างไว้ล่วงหน้าซึ่งคุณสามารถนำเข้าและทำให้เว็บไซต์อีคอมเมิร์ซของคุณใช้งานได้ภายในเวลาไม่กี่นาที

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

มาเริ่มต้นสร้างเว็บไซต์อีคอมเมิร์ซโดยใช้ WordPress และ Elementor 2020

แนะนำเว็บไซต์อีคอมเมิร์ซ

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

ด้านบนมีส่วนหัวซึ่งประกอบด้วยที่ตั้ง หมายเลขโทรศัพท์ หมายเลขติดต่อของเราทางซ้ายและทางขวา เรามีไอคอนหน้าโซเชียลมีเดียของ Facebook, Twitter, YouTube ฯลฯ ด้านล่างมีร้านค้า ปุ่มที่เชื่อมโยงไปยังหน้าช้อปปิ้งสินค้าของเว็บไซต์ของเรา นอกจากนี้เรายังมีปุ่มบัญชี ซึ่งผู้ใช้สามารถคลิกที่แดชบอร์ดส่วนตัวเพื่อเข้าถึงและจัดการข้อมูลและการซื้อของพวกเขา นอกจากนี้เรายังมีโลโก้ของธุรกิจของเราอยู่ที่ส่วนหัวด้วย ตรงกลางเรามีลิงค์ไปยังหน้าของเรา ได้แก่ หน้าแรก เกี่ยวกับเรา ร้านค้า บัญชีของฉัน และติดต่อเรา

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

ดังที่คุณเห็นในภาพ หน้าร้านค้าแสดงรายการผลิตภัณฑ์ทั้งหมดที่มีอยู่ในเว็บไซต์ของเรา ซึ่งผู้ใช้สามารถตรวจสอบผลิตภัณฑ์ใดๆ ได้โดยคลิกที่ผลิตภัณฑ์ ที่แถบด้านข้าง เรามีตัวกรองราคา รายการหมวดหมู่ บทวิจารณ์ และโฆษณาวิดีโอของผลิตภัณฑ์ของเรา ด้านล่างทุกผลิตภัณฑ์ยังมีแบบฟอร์มรีวิวและผลิตภัณฑ์ที่เกี่ยวข้องอีกด้วย ต่อไปเรามีหน้าเกี่ยวกับเราที่แสดงรายละเอียดธุรกิจของคุณและข้อมูลเกี่ยวกับทีมของคุณ จากนั้นเรามีหน้าติดต่อที่ผู้ใช้สามารถติดต่อเราโดยใช้แบบฟอร์มการติดต่อ ต่อไปเรามีแดชบอร์ดบัญชีของฉันซึ่งจะมีแดชบอร์ดส่วนบุคคลสำหรับลูกค้าแต่ละรายซึ่งมีข้อมูลส่วนบุคคล การซื้อและการชำระเงิน

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

รับโฮสติ้งและติดตั้ง WordPress และ Elementor

• การซื้อโดเมนเนมฮีโร่

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

มีผู้ให้บริการโฮสติ้งหลายรายในตลาดและส่วนใหญ่มีข้อเสนอที่แตกต่างกัน ฉันลองใช้มาหลายตัวแล้ว และในที่สุดฉันก็เลือกใช้ NameHero สำหรับเว็บไซต์ทั้งหมดของฉัน ฉันใช้มันเป็นการส่วนตัวและเปรียบเทียบกับโฮสติ้งอื่น ๆ อีก 22 แห่งและพบว่าพวกเขาดีที่สุด ดังที่คุณเห็นในภาพ พวกเขามี 4 ตัวเลือกที่แตกต่างกัน และฉันขอแนะนำตัวเลือก Plus Cloud สำหรับเว็บไซต์อีคอมเมิร์ซ คุณสามารถใช้ลิงค์ของฉันเพื่อรับส่วนลด www.namehero.com/darrelwilson

หลังจากที่คุณสั่งซื้อแผนของคุณแล้ว คุณจะต้องเลือกชื่อโดเมนของคุณ นั่นคือชื่อเว็บไซต์ของคุณ คุณสามารถเลือกชื่อใดก็ได้ที่คุณต้องการ คุณสามารถเลือกโดเมนของคุณได้ตามต้องการ เช่น .net, .biz เป็นต้น ขั้นตอนต่อไปและขั้นสุดท้ายคือการกรอกข้อมูลของคุณเกี่ยวกับรายละเอียดบัญชีและการชำระเงิน ขอแนะนำอย่างยิ่งให้รับ ID Protection ในกล่องกาเครื่องหมาย add-on เนื่องจากจะช่วยปกป้องคุณจากผู้ส่งอีเมลขยะ ทำการซื้อให้เสร็จสมบูรณ์โดยคลิกที่หน้าถัดไปและไปที่ขั้นตอนการชำระเงิน

• ติดตั้ง WordPress

ในการติดตั้ง WordPress บนโฮสติ้งของคุณ ให้ไปที่ 'พื้นที่ลูกค้า' บนหน้าโฮสติ้งของคุณ คลิกที่ 'Cloud Web Hosting' ถัดไป คุณมีผลิตภัณฑ์และบริการของฉัน ซึ่งคุณจะเห็นแพ็คเกจ Plus Cloud พร้อมชื่อโดเมนของคุณ ให้คลิกปุ่มใช้งานที่อยู่ถัดจากนั้นตามที่คุณเห็นในภาพ ถัดไปทางด้านซ้าย คุณจะเห็นปุ่ม 'ไปที่ cpanel' และคลิกที่มัน ในหน้าถัดไปดังที่คุณเห็นในภาพ ให้เลื่อนลงไปที่หมวดซอฟต์แวร์แล้วคลิก 'WordPress Manager by Softaculous'

ซึ่งจะเป็นการเปิดโปรแกรมติดตั้ง WordPress คลิกที่ปุ่มติดตั้งทันที หน้าการตั้งค่าจะเปิดขึ้นโดยมีเวอร์ชัน ชื่อโดเมน และไดเรกทอรีดังที่คุณเห็นในภาพ โปรดลบสิ่งที่เขียนภายใต้ไดเร็กทอรี ยังอยู่ในโปรโตคอลเลือก 'https://' ในการตั้งค่าไซต์ คุณสามารถเปลี่ยนชื่อไซต์และคำอธิบายของคุณได้ เราสามารถทำได้ในภายหลังเช่นกัน ใส่รายละเอียดผู้ดูแลระบบของคุณ เช่น ชื่อผู้ใช้ รหัสผ่าน และอีเมล ซึ่งจะเป็นรายละเอียดการเข้าสู่ระบบ WordPress ของคุณ ในหน้าถัดไป ให้เลื่อนลงมาตามเทมเพลตที่เราไม่ได้ใช้แล้วคลิก 'ติดตั้ง' คลิกที่ลิงค์ URL ผู้ดูแลระบบที่ให้ไว้ในหน้าถัดไปและ WordPress ใหม่ของคุณถูกสร้างขึ้นและใช้งานบนอินเทอร์เน็ต ตอนนี้คุณอยู่บนแดชบอร์ดของ WordPress เช่นเดียวกับในรูปภาพที่คุณสามารถแก้ไขเว็บไซต์ของคุณได้

• การตั้งค่าทั่วไปของ WordPress

ก่อนที่คุณจะออกแบบเว็บไซต์ของคุณ ให้เราเรียนรู้ที่จะเปลี่ยนการตั้งค่าของคุณบนแดชบอร์ด WordPress บนแดชบอร์ด WordPress ของคุณ คุณจะเห็นแท็บหลายแท็บทางด้านซ้ายของหน้า ดังที่คุณเห็นในภาพ สิ่งที่สำคัญที่สุดคือแท็บ "การตั้งค่า" ซึ่งคุณจะพบกับการตั้งค่าทั่วไปของ WordPress คุณควรเปลี่ยนลิงก์ถาวรจาก 'วันและชื่อ' เป็น 'ชื่อโพสต์' เพื่อให้ที่อยู่เว็บไซต์ของคุณเข้าใจง่ายขึ้น นี่เป็นสิ่งสำคัญมากสำหรับ SEO ของคุณ แท็บอื่นบนแดชบอร์ด WordPress ของคุณคือ 'ผู้ใช้' ที่คุณปรับแต่งโปรไฟล์และรูปลักษณ์ของแดชบอร์ด WordPress ของคุณ คลิกที่ 'บันทึกการเปลี่ยนแปลง' เพื่ออัปเดต

หากต้องการเข้าสู่ระบบ WordPress อีกครั้งหลังจากออกจากระบบแล้ว คุณต้องพิมพ์ URL ของคุณในแถบที่อยู่ตามด้วย '/wp-admin' ซึ่งจะนำคุณไปยังหน้าเข้าสู่ระบบ WordPress ซึ่งคุณสามารถใส่ชื่อผู้ใช้และรหัสผ่านเพื่อเข้าสู่ระบบได้

การสร้างเพจและเมนู

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

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

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

ดาวน์โหลด Elementor

ตอนนี้ เราต้องซื้อตัวสร้างเพจ Elementor pro ซึ่งเราจะใช้เพื่อสร้างหน้าเว็บของเว็บไซต์อีคอมเมิร์ซของเรา คุณสามารถซื้อได้โดยใช้ลิงค์ของฉัน www.darrelwilson.com/elementor จากหน้าของพวกเขา คุณสามารถตรวจสอบแพ็คเกจต่างๆ ที่มีอยู่ได้ เราไม่สามารถใช้เวอร์ชันฟรีได้เนื่องจากเราต้องการตัวสร้างธีมและบริการตัวสร้าง Woocommerce เมื่อคุณซื้อแพ็คเกจแล้ว แพ็คเกจจะเปิดขึ้นสำหรับบัญชีของคุณตามที่แสดงในรูปภาพ ซึ่งคุณต้องคลิก 'ดาวน์โหลดปลั๊กอิน' และไฟล์ zip จะถูกดาวน์โหลด

ถัดไป คุณต้องอัปโหลดไปยังเว็บไซต์ WordPress ของคุณ ไปที่แดชบอร์ดของคุณบน WordPress คลิก 'ปลั๊กอิน' บนแถบเครื่องมือทางด้านซ้าย คลิก 'เพิ่มใหม่' และปลั๊กอินเพิ่มของคุณจะเปิดขึ้นตามที่แสดงในภาพ คลิกที่ 'อัปโหลดปลั๊กอิน' และเลือกไฟล์ zip Elementor ของคุณแล้วติดตั้ง คลิกที่ 'เปิดใช้งานปลั๊กอิน' และปุ่ม 'องค์ประกอบ' ใหม่จะถูกสร้างขึ้นบนแถบเครื่องมือ WordPress ของคุณ ไปที่นั่นและคลิกที่ 'เชื่อมต่อและเปิดใช้งาน'

ติดตั้งธีม WordPress

ตอนนี้ให้เราติดตั้งธีม WordPress บนเว็บไซต์ของเรา WordPress มีธีมที่ออกแบบไว้ล่วงหน้ามากมายให้เลือกสำหรับรูปลักษณ์ของเว็บไซต์ของคุณ ในแท็บ "ลักษณะที่ปรากฏ" ของแดชบอร์ด WordPress คุณจะพบปุ่ม "ธีม" ซึ่งคุณสามารถติดตั้งธีมได้ คุณสามารถเลือกธีมใดก็ได้จากตัวเลือกที่มี สำหรับจุดประสงค์ของบทช่วยสอนนี้ เราจะใช้ธีม Astra ซึ่งคุณจะพบได้ในเมนูยอดนิยม คลิก 'เปิดใช้งาน' ใต้ชื่อธีม 'ส่วนที่ดีที่สุดเกี่ยวกับการใช้ธีมนี้คือมันรวมการตั้งค่าพื้นฐานและฟังก์ชันการทำงานที่จำเป็นสำหรับเว็บไซต์ในการทำงานและเข้ากันได้กับตัวสร้างเพจ Elementor

แก้ไขหน้าด้วย Elementor

ตอนนี้ให้เราเรียนรู้วิธีแก้ไขหน้าเว็บของเราด้วย Elementor ไปที่หน้าแรกของเว็บไซต์ WordPress ของคุณและคลิกที่ 'แก้ไขหน้า' ที่แถวสีดำด้านบนซึ่งจะเป็นการเปิดตัวแก้ไขหน้า ขั้นแรกให้เราเปลี่ยนการตั้งค่าหน้าทางด้านขวาตามที่แสดงในภาพ เปลี่ยนเลย์เอาต์ของเนื้อหาเป็น 'Full Width Stretch' และเลือก 'Disable Title' ตามที่เราต้องการให้การตั้งค่านั้นสำหรับหน้าแรกของเรา

ตอนนี้คลิกที่ 'แก้ไขด้วย Elementor' เพื่อเปิด Elementor Editor ตามที่แสดงในภาพ มาดูบทแนะนำสั้นๆ เกี่ยวกับเครื่องมือแก้ไข Elementor กันที่นี่ หากต้องการเพิ่มส่วนใหม่ในหน้า ให้คลิกที่ปุ่มบวก และเลือกรูปแบบคอลัมน์ที่คุณต้องการ หากต้องการเพิ่มองค์ประกอบ ให้คลิกที่จุด 9 จุดบนแถบเครื่องมือทางด้านซ้าย ซึ่งจะแสดงรายการองค์ประกอบตามภาพ คุณสามารถลากและวางองค์ประกอบเหล่านี้ที่คุณต้องการบนหน้าและแก้ไขได้

เมื่อคุณคลิกที่โมดูลใดๆ บนหน้า แถบเครื่องมือแก้ไขจะแสดงขึ้นทางด้านซ้าย ในภาพ เรากำลังแก้ไขหัวเรื่อง ดังนั้น 'แก้ไขหัวเรื่อง' จึงปรากฏขึ้นซึ่งมี 3 แท็บ ที่ 1 คือ ^{เนื้อหา} ที่ให้ตัวเลือกต่างๆ สำหรับเนื้อหาขององค์ประกอบ ที่ ² คือ สไตล์ ซึ่งคุณสามารถออกแบบสไตล์ เช่น สี ขนาด แบบอักษร ฯลฯ ขององค์ประกอบ และอันดับที่ 3 เป็น ^ขั้น สูง ซึ่งคุณสามารถใส่แอนิเมชั่นและสิ่งอื่น ๆ ได้ ในทำนองเดียวกัน คุณสามารถเพิ่ม แก้ไข และจัดรูปแบบกล่องข้อความในลักษณะเดียวกับด้านล่างหัวเรื่องของคุณ

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

ตอนนี้แทนที่จะออกแบบแต่ละองค์ประกอบแยกกัน เราสามารถใช้เทมเพลตและบล็อกที่สร้างไว้ล่วงหน้าโดยคลิกที่ไอคอนโฟลเดอร์บน Elementor จากไลบรารี คุณสามารถเลือกทั้งหน้าหรือเฉพาะส่วนหรือบล็อก มีบล็อคทุกประเภทตามความต้องการของคุณ สำหรับหน้า Landing Page ให้เลือกบล็อกใดก็ได้จากหมวดฮีโร่ ฉันได้เลือกเสียงแห่งอนาคตในตัวอย่าง

การสร้างโฮมเพจ

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

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

ถัดไป ให้ใส่พาดหัวแบบเคลื่อนไหวจากส่วน Pro Elements โดยเลื่อนลงมาที่แถบเครื่องมือองค์ประกอบ คุณสามารถเปลี่ยนรูปแบบพาดหัว รูปร่าง สี ภูมิประเทศ ฯลฯ โดยใช้แถบเครื่องมือ 'แก้ไขหัวข้อข่าวแบบเคลื่อนไหว' ตามที่แสดงในรูปภาพ คุณสามารถตรวจสอบองค์ประกอบและสไตล์ทั้งหมดและออกแบบสิ่งต่าง ๆ ได้ตามที่คุณต้องการ มีการลองผิดลองถูกมากมายในการค้นหาการออกแบบที่สมบูรณ์แบบของคุณ คลิกที่ปุ่ม 'อัปเดต' เพื่อใช้การเปลี่ยนแปลงเหล่านี้กับเว็บไซต์ของคุณ

ถัดไปในหน้า Landing Page เราต้องสร้างส่วนที่เชื่อมโยงไปยังหมวดหมู่ต่างๆ เช่น ส่วนของสตรี ส่วนของบุรุษ และสินค้าใหม่ เพิ่มส่วน 3 คอลัมน์ใหม่ เพิ่มหัวเรื่อง ข้อความ และปุ่ม คุณสามารถสร้างหนึ่งและทำซ้ำสองครั้งเพื่อประหยัดเวลาและความพยายาม คุณจะต้องแก้ไขข้อความ ลักษณะ พื้นหลัง ฯลฯ ของส่วนนี้อีกครั้ง ดังที่เราทำในส่วนข้างต้น คุณสามารถใช้รูปภาพที่ฉันได้รับเป็นพื้นหลังสำหรับทั้ง 3 หมวดหมู่ ขณะใช้โปรแกรมแก้ไขข้อความ เพื่อสิ้นสุดบรรทัดและไปยังบรรทัดถัดไป เช่น เรากำลังดำเนินการกับส่วนของสตรี ให้ใช้ <br> ตามที่แสดงในภาพ

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

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

ถัดไปด้านล่างเราจะเพิ่มไอคอน สำหรับสิ่งนั้นอีกครั้งก่อนเพิ่มส่วนใหม่และแทรกกล่องรูปภาพจากแถบเครื่องมือ Elementor เลือกภาพไอคอนสำหรับภาพที่ฉันได้ให้ไว้ตามที่แสดงในภาพ กล่องไอคอนเหล่านี้สนับสนุนให้ซื้อเพื่อให้ชื่อที่น่าสนใจเช่น 'จัดส่งฟรี' และเขียนคำอธิบายและเงื่อนไขในข้อความด้านล่าง จัดรูปแบบกล่องรูปภาพตามที่คุณต้องการโดยเปลี่ยนตำแหน่งรูปภาพ ขนาด สีของชื่อและคำอธิบายและข้อความ ฯลฯ จากแถบเครื่องมือ 'แก้ไขรูปภาพ' ทำซ้ำหลังจากออกแบบเพื่อที่คุณจะได้ไม่ต้องออกแบบไอคอนทั้งหมดอีก หลังจากนั้น คุณสามารถแก้ไขข้อความของแต่ละช่องได้ตามวัตถุประสงค์ที่คุณต้องการ จากส่วนขั้นสูง คุณสามารถเพิ่มระยะขอบโดยใช้การเติมเพื่อให้หน้าไม่ดูแออัดเกินไป

คุณสามารถเพิ่มเส้นขอบให้กับคอลัมน์เพื่อให้ดูน่าสนใจ คลิกที่ปุ่ม 'แก้ไขคอลัมน์' และภายใต้หมวดหมู่ 'สไตล์' คุณสามารถเพิ่มเส้นขอบและออกแบบเส้นขอบได้ คุณสามารถเลือกประเภทเส้นขอบ ความกว้าง ตำแหน่ง รัศมี ฯลฯ คุณสามารถเลือกเส้นขอบได้เฉพาะด้านใดด้านหนึ่งหรือหลายด้านเช่นที่เราได้ทำขอบด้านขวา ตรวจสอบเครื่องมือออกแบบทั้งหมดที่มีในแถบเครื่องมือและเลือกตัวคุณเอง ยิ่งคุณทำเองมากเท่าไหร่ คุณก็จะคุ้นเคยกับเครื่องมือและฟังก์ชันทั้งหมดมากขึ้นเท่านั้น และมันจะเร็วและง่ายขึ้นสำหรับคุณ

ต่อไปเราจะเพิ่มส่วน 'มาใหม่' แต่ก่อนที่เราจะเพิ่มตัวแบ่งระหว่างแถวเหล่านี้ให้ดูชัดเจนและแยกแยะได้ เพิ่มส่วนใหม่อีกครั้ง เพิ่ม 'ตัวแบ่ง' จากแถบเครื่องมือ Elementor และออกแบบโดยใช้แถบเครื่องมือ 'แก้ไขตัวแบ่ง' ดังที่แสดงในภาพ เพิ่มข้อความ 'มาใหม่' ในตัวแบ่งซึ่งจะใช้เป็นส่วนหัวสำหรับส่วนถัดไป ดังนั้นให้เปลี่ยนขนาด แบบอักษร ฯลฯ ตามที่แสดงในภาพ เพื่อให้ดูน่าสนใจ

การสร้างผลิตภัณฑ์

เราต้องสร้างผลิตภัณฑ์เพื่อขายบนเว็บไซต์อีคอมเมิร์ซของเราตอนนี้ สินค้าเป็นแบบ Simple หรือ Variable, Simple Products ไม่มีตัวเลือกใดๆ เช่น ขนาด สี หรือรูปแบบ ในขณะที่สินค้า Variable มีตัวเลือกต่างๆ เช่น ขนาดหรือสีในเสื้อผ้า เราจะไปเรียนรู้การสร้างทั้งสองอย่าง

Woocommerce

ในการสร้างผลิตภัณฑ์ เราจะต้องเพิ่มปลั๊กอินใหม่ ไปที่แดชบอร์ด WordPress ของคุณ คลิกที่ 'Plugins' บนแถบเครื่องมือ จากนั้นคลิกที่ 'Add New' เหมือนที่เราทำไว้ก่อนหน้านี้ จากไลบรารีปลั๊กอิน ค้นหา 'Woocommerce' Woocommerce เป็นปลั๊กอินอีคอมเมิร์ซที่ดีที่สุดในประสบการณ์ส่วนตัวของฉัน คลิก 'ติดตั้ง' และคลิกเปิดใช้งาน ตอนนี้ปลั๊กอิน Woocommerce จะเปิดขึ้นตามที่แสดงในภาพ กรอกแบบฟอร์มและคลิกที่ 'ดำเนินการต่อ' จากนั้นเลือกอุตสาหกรรมของคุณในบทช่วยสอนนี้ เรากำลังสร้างเว็บไซต์แฟชั่นและเครื่องแต่งกาย ต่อไปเรามีประเภทของผลิตภัณฑ์ที่มี 2 ตัวเลือก – ทางกายภาพและการดาวน์โหลด เลือกทั้งสองอย่างแล้วคลิก 'ดำเนินการต่อ' จากนั้นคุณจะพบคำถาม ตอบคำถาม แล้วคลิก 'ดำเนินการต่อ' อีกครั้ง

ถัดไป คุณจะต้องเลือกธีมสำหรับปลั๊กอินของคุณ เลือกธีม 'Astra' ถัดไป จะให้ตัวเลือกแก่คุณในการเปิดใช้งานบริการ Jetpack ซึ่งจะเป็นประโยชน์สำหรับเรา ดังนั้น เลือก 'ใช่ ได้โปรด' ซึ่งจะนำคุณไปยังหน้าบัญชี Jetpack กรอกรายละเอียดของคุณและสร้างบัญชี คุณจะถูกเปลี่ยนเส้นทางไปยังแดชบอร์ด WordPress ของคุณ แต่ 'Woocommerce' ใหม่จะพร้อมใช้งานบนแถบเครื่องมือของคุณดังที่แสดงในภาพ การตั้งค่าภาษีทั้งหมดเหล่านี้ เราจะดำเนินการในภายหลัง

ตอนนี้เรามาเริ่มสร้างผลิตภัณฑ์กัน ขั้นแรกเราจะสร้างผลิตภัณฑ์ที่เรียบง่ายของ Woman Green Shirt ดังแสดงในภาพ

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

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

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

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

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

หากคุณไม่ชอบสไตล์และธีมของหน้าที่แสดง คุณสามารถเปลี่ยนได้ด้วย 'การตั้งค่า Astra' บนแถบเครื่องมือด้านขวา ตามที่แสดงในภาพ ตัวอย่างเช่น หากคุณต้องการลบแถบด้านข้าง ให้คลิกที่ 'แถบด้านข้าง' และเลือก 'ไม่มีแถบด้านข้าง' คลิก 'อัปเดต' เพื่อบันทึกการเปลี่ยนแปลง และคุณสามารถคลิกดูผลิตภัณฑ์อีกครั้งเพื่อดูการเปลี่ยนแปลงได้ นี่เป็นตัวอย่างวิธีการสร้างผลิตภัณฑ์อย่างง่าย คุณสามารถเพิ่มผลิตภัณฑ์และหมวดหมู่ได้มากเท่าที่คุณต้องการโดยใช้ขั้นตอนเดียวกันนี้ หากคุณคลิกที่ปุ่ม Category บนหน้า Product หน้าใหม่ของหมวดหมู่นั้นจะเปิดขึ้นซึ่งผลิตภัณฑ์ทั้งหมดของหมวดหมู่นี้จะแสดงขึ้น ณ จุดนี้ มันก็จะดูจืดชืดมาก แต่ต่อมาเราจะออกแบบหน้านี้ด้วย

ต่อไปให้เราเรียนรู้วิธีสร้างผลิตภัณฑ์ตัวแปร เราต้องไปที่หน้า 'เพิ่มผลิตภัณฑ์ใหม่' เหมือนเดิม คราวนี้ให้เราสร้างผลิตภัณฑ์ตัวแปรสำหรับผู้ชาย ให้ชื่อและคำอธิบายของผลิตภัณฑ์ตามที่เราทำไว้ก่อนหน้านี้ โปรดจำไว้ว่านี่ไม่ใช่คำอธิบายหลัก แต่เป็นคำอธิบายเล็กๆ เพิ่มเติมที่แสดงด้านล่าง คำอธิบายหลักจะต้องเขียนใน 'Product short description' เราจะเปลี่ยน 'Product data' เป็น 'Variable Product' การตั้งค่าอื่นๆ ทั้งหมด เช่น สินค้าคงคลัง การจัดส่ง สินค้าที่เชื่อมโยง ฯลฯ จะคล้ายกับ Simple Product ที่เราสร้างไว้ก่อนหน้านี้ คุณจึงสามารถกรอกรายละเอียดเหล่านี้ได้ด้วยตนเอง

ตอนนี้คลิก 'แอตทริบิวต์' ซึ่งเราจะเพิ่มคุณลักษณะหรือคุณลักษณะใหม่ให้กับผลิตภัณฑ์ของเรา คลิกที่ 'เพิ่ม' เพื่อดำเนินการดังกล่าว ต่อไปตามที่แสดงในภาพ เราจะสร้างคุณลักษณะใหม่ของผลิตภัณฑ์ เช่น ขนาด สี ฯลฯ ขั้นแรก ให้เราใส่ขนาดลงในช่อง 'ชื่อ' ในกล่อง 'ค่า' ให้เขียน เล็กก่อน ตามด้วยสัญลักษณ์ '|' (ไม่มีวงเล็บ) กดแป้น 'Shift' + แป้นด้านบนปุ่ม Enter เพื่อเขียนสัญลักษณ์นี้ตามที่แสดงในรูปภาพ จากนั้นเขียนคำว่า Medium และอีกครั้งด้วยสัญลักษณ์เดียวกันและตามด้วยขนาดใหญ่ คุณสามารถเพิ่มตัวแปรได้มากเท่าที่คุณต้องการ เช่น S, M, L, XL เป็นต้น โดยใช้สัญลักษณ์นั้น เลือกช่องกาเครื่องหมาย 'ใช้สำหรับรูปแบบทั้งหมด' และคลิก 'บันทึกแอตทริบิวต์'

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

ตอนนี้ เราจะนำคุณลักษณะเหล่านี้ไปใช้กับผลิตภัณฑ์ของเรา คลิก 'รูปแบบ' ใต้ 'แอตทริบิวต์' และเลือก 'สร้างรูปแบบจากแอตทริบิวต์ทั้งหมด' และคลิก 'ไป' คลิก 'ใช่' บนป๊อปอัปเพื่อยืนยันตัวเลือกนี้ ซึ่งจะเปิดตัวเลือกตามที่แสดงในภาพ คุณจะเห็นว่ามีการเพิ่มรูปแบบต่างๆ 6 แบบ โดยการรวม 3 ขนาดเข้ากับ 2 สี ได้แก่ สีขาวขนาดเล็ก, สีน้ำเงินขนาดเล็ก, สีขาวขนาดกลาง, สีน้ำเงินกลาง, สีขาวขนาดใหญ่ และสีน้ำเงินขนาดใหญ่

คลิกที่อันแรกเพื่อเปิดการตั้งค่าการแก้ไขตามที่แสดงในภาพ อันดับแรก เราต้องอัปโหลดรูปภาพของรูปแบบนี้ คลิกที่ 'อัปโหลดรูปภาพ' และเลือกรูปภาพจากแกลเลอรี ถัดไป คุณต้องใส่ราคาปกติของรูปแบบนี้ นี่เป็นฟิลด์บังคับ ดังนั้นแม้ว่าราคาจะเท่ากัน คุณต้องเขียนไว้ที่นี่ คุณสามารถเพิ่มราคาขายและกำหนดเวลาได้ตามที่เราทำใน Simple Product อีกครั้ง คุณสามารถกรอกรายละเอียดสต็อคและรายละเอียดการจัดส่งตามที่เราทำใน Simple Product

คุณจะต้องทำขั้นตอนเดียวกันอีกครั้งสำหรับรูปแบบอื่นๆ ด้วย ให้คลิกที่ชื่อรูปแบบ อัปโหลดภาพและใส่ราคา Small Blue และอื่นๆ เป็นต้น เราใส่แค่รูปภาพและราคาของรูปแบบต่างๆ ที่จำเป็น แต่คุณสามารถใส่รายละเอียดอื่นๆ ทั้งหมดบนเว็บไซต์ของคุณตามเงื่อนไขของตัวเอง เหนือชื่อรูปแบบ คุณจะเห็นตัวเลือกให้ใส่ 'ค่าแบบฟอร์มเริ่มต้น' ซึ่งคุณสามารถเลือกรูปแบบที่จะแสดงเป็นค่าเริ่มต้นในกล่องผลิตภัณฑ์เมื่อผู้ใช้ดูผลิตภัณฑ์

การตั้งค่าอื่นๆ เช่น คำอธิบายสั้นๆ ของผลิตภัณฑ์จะคล้ายกับ Simple Product ที่เราทำก่อนหน้านี้ ดังนั้นให้กรอกรายละเอียดตามผลิตภัณฑ์ของคุณ เช่นเดียวกับรูปภาพผลิตภัณฑ์ ซึ่งคุณควรใส่รูปภาพสำหรับรูปแบบเริ่มต้น เนื่องจากจะแสดงให้ผู้ดูเห็นก่อนเมื่อเห็นผลิตภัณฑ์ คุณควรใส่รูปแบบที่ขายดีที่สุดของคุณเป็นผลิตภัณฑ์เริ่มต้น คุณไม่จำเป็นต้องใส่แกลเลอรีผลิตภัณฑ์สำหรับผลิตภัณฑ์ Variable เนื่องจากมุมมองจะสามารถเห็นภาพต่างๆ ของรูปแบบต่างๆ ได้ สร้างหมวดหมู่ 'ผู้ชาย' ใหม่และเลือกช่องทำเครื่องหมายตามที่เราทำสำหรับผลิตภัณฑ์แบบธรรมดา คลิกที่ เผยแพร่ เพื่อใช้การเปลี่ยนแปลงเหล่านี้บนเว็บไซต์

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

ตอนนี้ให้เราเพิ่มผลิตภัณฑ์เหล่านี้ในหน้าแรกของเรา ไปที่หน้าแรกของคุณและคลิกที่ 'แก้ไขด้วย Elementor' เลื่อนลงไปที่จุดสิ้นสุดที่เราสร้างตัวแบ่งขาเข้าใหม่ บนแถบเครื่องมือ Elementor ทางด้านขวา ให้คลิกที่แถบ 'Search Widgets' และพิมพ์ผลิตภัณฑ์ เลือกองค์ประกอบผลิตภัณฑ์แล้วลากและวางในกล่องบนหน้าของคุณด้านล่างตัวแบ่งสินค้าใหม่ และคุณจะเห็นสินค้าที่นั่น

ในแถบเครื่องมือ 'แก้ไขผลิตภัณฑ์' ดังที่คุณเห็นในภาพ คุณมีจำนวนคอลัมน์และแถวของผลิตภัณฑ์ที่คุณต้องการแสดงที่นี่ เพื่อไม่ให้ผลิตภัณฑ์ทั้งหมดของคุณแสดงในหน้านี้ คุณยังสามารถใช้ประเภทสไตล์เพื่อเปลี่ยนช่องว่างของคอลัมน์และช่องว่างแถว การจัดแนว เส้นขอบสำหรับรูปภาพ คุณสามารถจัดรูปแบบชื่อผลิตภัณฑ์ได้ที่นี่ เช่น สี แบบอักษร ระยะห่าง ภูมิประเทศ ฯลฯ เช่นเดียวกับดาวที่ให้คะแนน ทั้งที่เติมและว่างเปล่า ในทำนองเดียวกันสำหรับราคา คุณสามารถเปลี่ยนแบบอักษร สี ภูมิประเทศ ฯลฯ ได้ทั้งในราคาปกติและราคาขาย ถัดไปคือปุ่ม คุณสามารถออกแบบปุ่มได้ตามที่คุณต้องการ เช่น สีพื้นหลัง สีข้อความ สีเส้นขอบ และอื่นๆ การใช้ Elementor ทำให้การแก้ไขทั้งหมดนี้เป็นเรื่องง่าย คุณเพียงแค่ใช้เครื่องมือแก้ไขทั้งหมดที่มีและเล่นกับมัน แล้วผลลัพธ์ทั้งหมดก็จะปรากฏต่อหน้าคุณ

คุณยังมีตัวเลือก 'แฟลชลดราคา' ที่คุณสามารถออกแบบให้แสดงเมื่อคุณมีการขาย ซึ่งจะแสดงแบนเนอร์แฟลชเหนือผลิตภัณฑ์ของคุณเมื่อมีการลดราคาผลิตภัณฑ์ ใช้สิ่งนี้เพื่อดึงดูดลูกค้าในผลิตภัณฑ์ของคุณเมื่อพวกเขาเยี่ยมชมหน้าแรกของคุณ ตัวเลือกการออกแบบทั้งหมดคล้ายกับสิ่งที่เราได้เรียนรู้มาจนถึงตอนนี้ ดังนั้นคุณจึงสามารถเติบโตผ่านตัวเลือกทั้งหมดและเลือกการออกแบบที่เหมาะสมกับคุณที่สุด

ในตัวเลือก คิวรี คุณสามารถเลือกผลิตภัณฑ์ที่คุณต้องการให้แสดงในส่วนนี้ ตัวอย่างเช่น หากคุณต้องการให้แสดงเฉพาะผลิตภัณฑ์สำหรับผู้หญิงในส่วนนี้ จากนั้นในกล่องแหล่งที่มา ให้เลือก 'ผลิตภัณฑ์ล่าสุด' เนื่องจากเป็นส่วนมาใหม่จากช่องแบบเลื่อนลงและคลิก 'รวม' จากนั้นในกล่อง 'รวมโดย' ให้เขียนคำศัพท์และเลือกตัวเลือก Term ซึ่งจะเป็นกล่องคำศัพท์ ในช่องคำศัพท์ ให้เขียน 'Women' และเลือก 'Product Category: Women's' ตามที่แสดงในภาพ คลิกที่อัปเดตเพื่อให้มีผลกับเว็บไซต์ของคุณ ด้วยวิธีนี้ คุณสามารถสร้างส่วนแสดงผลิตภัณฑ์ในส่วนใดก็ได้ของเว็บไซต์ของคุณ

เทมเพลตอีคอมเมิร์ซ Elementor

ฉันได้ให้แม่แบบของเว็บไซต์อีคอมเมิร์ซที่เราจัดเตรียมไว้เมื่อกี้นี้ ซึ่งเราจัดเตรียมเลย์เอาต์ไว้ที่นี่ฟรีบนเว็บไซต์ของฉันที่ลิงค์ https://darrelwilson.com/product/elementor-ecommerce-template-package Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

เครื่องมือปรับแต่งธีม

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

ปลั๊กอิน

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• หน้าผลิตภัณฑ์ที่กำหนดเอง

ตอนนี้เราจะปรับแต่งหน้าผลิตภัณฑ์โดยใช้เทคนิคเดียวกัน หากคุณคลิกที่ผลิตภัณฑ์ใดๆ ในตอนนี้ ระบบจะแสดงหน้าผลิตภัณฑ์ในธีมเริ่มต้นตามที่เราเห็นเมื่อเราสร้างผลิตภัณฑ์ อีกครั้ง ไปที่ตัวสร้าง Elementortheme และเพิ่มชุดรูปแบบ Single Product ใหม่โดยคลิกที่ไอคอน + ข้างๆ คุณสามารถใช้เทมเพลตที่มีให้ที่นี่ แต่เราจะสร้างเทมเพลตใหม่ตั้งแต่ต้นสำหรับบทช่วยสอนนี้ ดังนั้นก่อนอื่นให้เพิ่มส่วน 2 ส่วนแล้วคลิกที่แท็บองค์ประกอบ ที่นี่คุณสามารถดูองค์ประกอบทั้งหมดที่สร้างขึ้นสำหรับผลิตภัณฑ์โดยเฉพาะดังที่แสดงในภาพที่เราไม่เห็นเมื่อสร้างเพจ

ขั้นแรกให้เพิ่มเบรดครัมบ์ซึ่งเหมือนกับการจัดหมวดหมู่ของผลิตภัณฑ์ ตอนนี้คุณสามารถแก้ไขรูปแบบของเบรดครัมบ์ เช่น สี ขนาด ช่องว่างภายใน ฯลฯ โดยใช้แถบเครื่องมือ ดังที่คุณเห็นในภาพ ทางด้านขวา เพิ่มองค์ประกอบ 'ชื่อผลิตภัณฑ์' จากแถบด้านข้างและออกแบบสไตล์ของสิ่งนั้นด้วยโดยใช้แถบเครื่องมือเหมือนก่อนหน้านี้ ต่อไปให้เราเพิ่มรูปภาพผลิตภัณฑ์ในลักษณะเดียวกัน คลิกองค์ประกอบรูปภาพผลิตภัณฑ์และแก้ไขสไตล์โดยใช้แถบเครื่องมือ ถัดไปเพิ่มคำอธิบายสั้นในทำนองเดียวกัน คุณสามารถเพิ่มตัวแบ่งระหว่างชื่อและคำอธิบายได้ ต่อไปเราต้องใส่หมวดสินค้า สำหรับสิ่งนั้น เลือกองค์ประกอบ 'Product Meta' และวางไว้ใต้คำอธิบายและจัดรูปแบบด้วย ถัดไป เพิ่มองค์ประกอบ 'ราคา' ด้านล่าง และคุณสามารถเปลี่ยนรูปแบบได้อีกครั้ง ถัดไปวางปุ่ม 'หยิบใส่ตะกร้า' ใต้ราคา เนื่องจากเป็นผลิตภัณฑ์ผันแปร มันจะให้ตัวเลือกรูปแบบต่างๆ โดยอัตโนมัติ ถัดไปคุณสามารถเพิ่มไอคอนโซเชียลและแบบฟอร์มการตรวจสอบ ข้อมูลเพิ่มเติม ฯลฯ องค์ประกอบที่คุณต้องการ คลิก 'เผยแพร่' หลังจากที่คุณเพิ่มและออกแบบองค์ประกอบที่คุณต้องการในหน้าผลิตภัณฑ์ของคุณเสร็จแล้ว ในเงื่อนไขบนหน้าที่แสดง ให้ใส่ 'ผลิตภัณฑ์ทั้งหมด' เพื่อให้เทมเพลตนี้มีผลกับผลิตภัณฑ์ทั้งหมดที่คุณสร้างขึ้น คุณสามารถสร้างธีมที่แตกต่างกันสำหรับหมวดหมู่ผลิตภัณฑ์ต่างๆ ได้หากต้องการ คุณจะต้องเปลี่ยนเงื่อนไขเพื่อรวมไว้ในหมวดหมู่เฉพาะนั้นๆ หน้าผลิตภัณฑ์ทั้งหมดของเราจะได้รับการอัปเดตเป็นเทมเพลตนี้เมื่อเรานำไปใช้กับผลิตภัณฑ์ทั้งหมด

• หน้าชำระเงินและตะกร้าสินค้าแบบกำหนดเอง

ตอนนี้เราจะออกแบบหน้าการชำระเงินและตะกร้าสินค้าที่กำหนดเอง หน้าชำระเงินและตะกร้าสินค้าไม่ได้อยู่ในตัวสร้างธีม ดังนั้นเราจะแก้ไขด้วย Elementor ไปที่หน้ารถเข็นแล้วคลิกแก้ไขด้วย Elementor เช่นเดียวกับหน้าอื่น ๆ คุณสามารถแก้ไขและจัดรูปแบบตามที่คุณต้องการด้วยองค์ประกอบ Elementor คุณสามารถแก้ไขข้อความ ไอคอน ปุ่มคูปอง ฯลฯ และจัดรูปแบบแบบอักษร สี ภูมิประเทศ ฯลฯ ได้ด้วยตัวเองในตอนนี้ แต่การแก้ไขส่วนของธีมจริง เช่น ชื่อ Cart ที่นี่ไม่สามารถทำได้ด้วย Elementor ในการแก้ไข คุณจะต้องแก้ไขใน WordPress เอง ดังนั้นให้คลิกที่ 'แก้ไขหน้า' และที่มุมล่างขวา ให้เลือกช่องทำเครื่องหมาย 'ปิดใช้งานชื่อ' ใต้ส่วนปิดการใช้งานดังที่แสดงในภาพเหมือนที่เราทำก่อนหน้านี้เมื่อออกแบบ ธีมของเวิร์ดเพรส

คุณสามารถแก้ไขและออกแบบหน้าชำระเงินและใช้งานได้ในลักษณะเดียวกัน ในทำนองเดียวกัน คุณสามารถออกแบบหน้า 'บัญชีของฉัน' ของลูกค้าของคุณ เนื่องจากธีมเริ่มต้นของหน้านั้นดูไม่ค่อยดีนัก คุณสามารถแก้ไขได้ด้วย Elementor และฉันได้ให้ลิงค์ก่อนหน้านี้ซึ่งฉันได้ใส่ไฟล์ zip สำหรับเทมเพลตของหน้าเหล่านี้ทั้งหมดเพื่อให้คุณออกแบบได้อย่างรวดเร็ว

การตั้งค่า Woocommerce

ตอนนี้คุณได้เรียนรู้วิธีการสร้างหน้าโดยใช้ Elementor และ Theme Builder แล้วการสร้างเว็บไซต์ของคุณก็เสร็จสมบูรณ์ ตอนนี้เราต้องเรียนรู้เกี่ยวกับการตั้งค่า Woocommerce เพื่อให้เว็บไซต์นี้ทำงาน ไปที่แดชบอร์ดของ WordPress คลิกที่ Woocommerce แล้วเลือก "การตั้งค่า" ซึ่งจะเปิดแท็บการตั้งค่าทั่วไปของ Woocommerce ตามที่แสดงในภาพ

• การตั้งค่าทั่วไป

คุณสามารถใส่ที่อยู่และเลือกประเทศที่คุณต้องการขาย เปิดใช้ภาษี เปิดใช้รหัสคูปองได้ที่นี่ ทำเครื่องหมายที่ช่องเหล่านี้ทั้งหมดเพื่อเปิดใช้งาน ด้านล่างคุณสามารถเปลี่ยนสกุลเงินของคุณตามประเทศของคุณ

• แท็บสินค้า

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

• แท็บภาษี

ถัดไปในแท็บภาษี ซึ่งคุณสามารถเปิดหรือปิดการคำนวณภาษีอัตโนมัติได้ การคำนวณภาษีอาจซับซ้อนมากขึ้นอยู่กับประเทศและธุรกิจของคุณ ดังนั้นการคำนวณอัตโนมัติอาจไม่ได้ผลสำหรับคุณ อย่างไรก็ตาม คุณมีตัวเลือกในการกำหนดภาษีสำหรับที่อยู่จัดส่งที่แตกต่างกันและตามรายการในรถเข็น ฉันได้ให้ลิงก์ไปยัง www.taxjar.com ซึ่งคุณสามารถรับบริการฟรีและชำระเงินเพื่อช่วยคุณในการคำนวณภาษี คุณยังสามารถเลือกแสดงราคาแบบมีหรือไม่มีภาษี ณ จุดต่างๆ ได้ เช่น ในร้านค้า ควรแสดงราคาแบบไม่รวมภาษี และในรถเข็นและจุดชำระเงินควรรวมภาษีโดยทั่วไป

• แท็บการจัดส่งสินค้า

แท็บถัดไปคือ 'การจัดส่ง' ขั้นแรก ให้คลิกที่ 'เพิ่มเขตการจัดส่ง' เพิ่มชื่อโซน ภูมิภาคเฉพาะของโซน และตั้งค่าอัตราค่าจัดส่งของคุณภายใต้วิธีการจัดส่งแบบต่างๆ ตามที่แสดงในภาพ ในที่นี้ เราได้ใช้วิธี Flat Rate ซึ่งเราใส่อัตราคงที่ $5 และอีกวิธีหนึ่งคือวิธีการจัดส่งฟรี คลิกที่ปุ่มแก้ไขด้านล่างเพื่อเพิ่มเงื่อนไขของจำนวนการสั่งซื้อขั้นต่ำหรือข้อกำหนดคูปอง ที่นี่เรามีข้อกำหนดการสั่งซื้อขั้นต่ำ $50 ที่เลือกไว้ คุณสามารถเพิ่มหลายโซนและวิธีการจัดส่งและอัตราค่าจัดส่งได้หลายแบบสำหรับแต่ละโซน คุณยังมีค่าเริ่มต้นสำหรับสถานที่ซึ่งไม่ครอบคลุมในโซนใด ๆ ของคุณ ซึ่งเราไม่ได้กำหนดอัตราไว้โดยเฉพาะ ดังนั้น เราจึงกำหนดอัตราเริ่มต้น 10 เหรียญสำหรับโซนเหล่านั้นโดยค่าเริ่มต้น

• บัญชีและแท็บความเป็นส่วนตัว

แท็บ 'บัญชีและความเป็นส่วนตัว' ซึ่งคุณสามารถเลือกตัวเลือกในการสร้างบัญชีของลูกค้าก่อนซื้อหรืออนุญาตให้ซื้อโดยไม่มีบัญชีก่อนแล้วค่อยสร้างบัญชีในเวลาที่ชำระเงิน และตัวเลือกอื่นๆ ในการสร้าง บัญชี เช่น ชื่อผู้ใช้ รหัสผ่าน ฯลฯ ซึ่งคุณสามารถตรวจสอบได้ด้วยตนเองเนื่องจากอธิบายได้ชัดเจน นอกจากนี้ คุณสามารถเพิ่มนโยบายความเป็นส่วนตัวตามที่กฎหมายกำหนดได้ที่นี่ คุณยังมีตัวเลือกเกี่ยวกับเวลาที่ข้อมูลส่วนบุคคลของผู้ใช้จะถูกลบออกภายใต้การเก็บรักษาข้อมูลส่วนบุคคล

• แท็บอีเมล

นอกจากนี้เรายังมีแท็บ 'อีเมล' ที่การตั้งค่าเกี่ยวกับอีเมลอัตโนมัติทั้งหมดที่คุณจะได้รับและส่งไปยังลูกค้าจากเว็บไซต์ เช่น คำสั่งซื้อใหม่หรือคำสั่งซื้อที่ยกเลิก คุณสามารถแก้ไขรูปแบบของอีเมลที่คุณจะได้รับหรือส่งถึงลูกค้าในทุกสถานการณ์ได้ที่นี่ คุณสามารถเพิ่มปลั๊กอินเพื่อจุดประสงค์นี้เพื่อรับอีเมลที่มีคุณภาพดีขึ้น ไปที่ปลั๊กอินและติดตั้ง 'นักออกแบบอีเมล Kadence Woocommerce' และ เมื่อใช้ปลั๊กอินนี้ คุณสามารถออกแบบเนื้อหาอีเมล ส่วนหัว ส่วนท้าย ข้อความ ฯลฯ โดยใช้สไตล์ที่กำหนดเองซึ่งสามารถแก้ไขได้ที่นี่โดยไปที่ปลั๊กอินในแถบด้านข้างของ Woocommerce ตามที่แสดงในรูปภาพ

• การชำระเงิน

ตอนนี้เราจะไปที่แท็บ 'การชำระเงิน' ซึ่งเราสามารถเลือกวิธีการชำระเงินที่ลูกค้าอนุญาตได้ มีตัวเลือกมากมายให้เลือก แต่เราจะเปิดใช้งาน 'Stripes' และ 'PayPal' ที่นี่โดยคลิกที่ปุ่มเปิดใช้งานตามที่แสดงในภาพด้านล่าง

1. PayPal

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

2. ลาย

ต่อไปเราจะตั้งค่าการชำระเงินด้วยแถบ ดังนั้นคลิกที่ปุ่ม 'จัดการ' ข้างๆ เช่นเดียวกับการตั้งค่า PayPal ใส่ชื่อ คำอธิบายสำหรับช่องการชำระเงินก่อน ถัดไป คุณมีรหัสทดสอบที่เผยแพร่ได้และรหัสลับทดสอบ คุณสามารถไปที่ www.stripe.com และสร้างบัญชีฟรีที่นั่น เพียงแค่ต้องมีบัญชีธนาคารเพื่อสร้างบัญชี คุณสามารถรวมบัญชี stripe เข้ากับเว็บไซต์ของคุณได้หลังจากสร้าง ซึ่งเป็นบริการฟรี สำหรับสิ่งนั้น หลังจากเข้าสู่ระบบในบัญชี stripe ของคุณแล้ว ให้คลิกที่ 'Developers' และเลือก 'API keys' ตามที่แสดงในภาพ คัดลอกคีย์ที่เผยแพร่ได้ซึ่งปรากฏขึ้นที่นี่บนเว็บไซต์ของคุณในกล่องคีย์ที่เผยแพร่ได้ และคีย์ลับในกล่องคีย์ลับ คลิกที่ 'บันทึกการเปลี่ยนแปลง' และตอนนี้เว็บไซต์ของคุณพร้อมที่จะรับการชำระเงินด้วยบัตรเครดิตจากทุกที่ทั่วโลกด้วยค่าธรรมเนียมการทำธุรกรรมที่ต่ำมาก เรากำลังดำเนินการเพื่อให้เรายังคงเปิดใช้งานปุ่ม กำลังดูข้อมูลการทดสอบ ในบัญชีแถบของเรา และในหน้าการตั้งค่า Woocommerce เราได้ทำเครื่องหมายที่ช่อง 'เปิดใช้งานโหมดการทดสอบ' แต่เมื่อคุณพร้อมที่จะใช้งานจริงกับระบบการชำระเงินของคุณ ให้ปิดการใช้งาน .

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

การเพิ่มประสิทธิภาพสำหรับมือถือ

การเพิ่มประสิทธิภาพมือถือหมายถึงการทำให้เว็บไซต์ดูเป็นมิตรกับผู้ใช้สำหรับอุปกรณ์มือถือ การเพิ่มประสิทธิภาพมือถือมีความสำคัญมากในสถานการณ์ปัจจุบัน เนื่องจาก a) ผู้คนจำนวนมากใช้อุปกรณ์มือถือเพื่อท่องอินเทอร์เน็ต และ b) ตามอัลกอริธึมใหม่ของ Google หากเว็บไซต์ของคุณไม่ได้รับการปรับให้เหมาะกับมือถือ พวกเขาจะลดอันดับของคุณซึ่งอาจเป็นหายนะสำหรับคุณ การเข้าชมเว็บไซต์และ SEO

การปรับให้เหมาะสมสำหรับอุปกรณ์พกพานั้นทำได้ง่ายๆ โดยใช้ตัวแก้ไข Elementor ให้เรากลับไปที่แดชบอร์ด Elementor อีกครั้ง ที่ด้านล่างของแถบเครื่องมือ คุณจะพบปุ่ม 'Responsive Mode' ซึ่งการคลิกที่จะเปิดรายการแบบหล่นลงซึ่งแสดง 3 ตัวเลือก ได้แก่ เดสก์ท็อป แท็บเล็ต และมือถือ จนถึงขณะนี้ เรากำลังออกแบบเว็บไซต์ของเราโดยพิจารณาจากลักษณะที่เว็บไซต์จะมองหาผู้ดูเดสก์ท็อป ตอนนี้ คลิกที่ 'แท็บเล็ต' เพื่อดูตัวอย่างลักษณะที่ปรากฏบนเบราว์เซอร์แท็บเล็ต คุณสามารถตรวจสอบโหมด 'มือถือ' ได้เช่นกัน คุณสามารถแก้ไขหน้าเว็บได้หากมีสิ่งใดที่ดูเหมือนไม่เป็นระเบียบหรือรู้สึกว่าไม่ดึงดูดสายตา

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

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

แบบฟอร์มการติดต่อ

ตอนนี้ให้เราก้าวไปข้างหน้าและเรียนรู้วิธีสร้างหน้า 'ติดต่อ' ซึ่งผู้เยี่ยมชมสามารถกรอกข้อมูลการติดต่อที่นั่นและจะไปยังอีเมลของคุณโดยตรง การออกแบบพื้นฐานของเพจ คุณสามารถทำได้ด้วยตัวเองโดยใช้ตัวแก้ไข Elementor หรือเครื่องมือปรับแต่งธีม สิ่งสำคัญเพียงอย่างเดียวคือแบบฟอร์มการติดต่อตามที่แสดงในภาพ ดังนั้นคุณจึงค้นหาแบบฟอร์มบนแถบเครื่องมือ Elementor แล้วลากและวางลงในส่วนนั้น และคุณสามารถแก้ไขข้อความและการออกแบบแบบฟอร์มได้โดยใช้แถบเครื่องมือ 'แก้ไขแบบฟอร์ม' ซึ่งตอนนี้ฉันคิดว่าคุณจะสามารถทำด้วยตัวเองได้ มีการตั้งค่าขั้นสูงมากมายในแถบเครื่องมือแก้ไขแบบฟอร์มซึ่งไม่ได้ดำเนินการที่นี่ แต่เป็นแบบฟอร์มพื้นฐานที่คุณสามารถสร้างได้

คูปอง

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

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