การปรับแต่งไซต์ WooCommerce ของคุณอย่างแท้จริงด้วยตัวแก้ไข Gutenberg อาจเป็นเรื่องยาก มีแบบอักษรน้อยมาก วิดเจ็ตจำนวนจำกัด และมีพื้นที่ให้เล่นเพียงเล็กน้อย นี่คือที่มาของ Elementor ทุกบิตของไซต์ WooCommerce ของคุณสามารถปรับแต่งได้เพื่อให้ลูกค้าของคุณได้รับประสบการณ์การช็อปปิ้งที่ดีที่สุด คุณรู้อยู่แล้วว่ายิ่งประสบการณ์การช็อปปิ้งดีขึ้นเท่าใด การแปลงก็จะยิ่งดีขึ้นเท่านั้น บทความนี้เกี่ยวกับ วิธีใช้ WooCommerce กับ Elementor .
TL;DR :บทความนี้เป็นคู่มือสำหรับผู้เริ่มต้นใช้งาน Elementor กับ WooCommerce นอกจากนี้ เราขอแนะนำให้คุณสำรองข้อมูลเว็บไซต์ของคุณด้วย BlogVault การสำรองข้อมูลแบบเรียลไทม์ของ BlogVault สร้างขึ้นสำหรับไซต์ WooCommerce ดังนั้นคุณจะไม่สูญเสียคำสั่งซื้อ ธุรกรรม ลูกค้า หรือผลิตภัณฑ์แม้แต่ครั้งเดียว
การสร้างร้านค้า WooCommerce เป็นครั้งแรกอาจเป็นโอกาสที่น่ากลัว แต่ก็ค่อนข้างง่ายจริงๆ WordPress และ WooCommerce ได้รับการออกแบบมาเพื่อให้ไซต์สามารถเข้าถึงได้โดยผู้สร้างเนื้อหา ไม่ใช่แค่นักพัฒนาเท่านั้น
Elementor ก็อาจดูสับสนในตอนแรกเช่นกัน แต่ก็มีศักยภาพที่ดีที่จะให้ je ne sais quoi บางอย่าง ไปที่ร้านของคุณ
ในบทความนี้ เราจะแนะนำคุณเกี่ยวกับการตั้งค่าไซต์ WooCommerce การติดตั้ง Elementor และปลั๊กอินอื่นๆ ที่คุณต้องการเพื่อจัดการไซต์ WooCommerce ที่ยอดเยี่ยม เราขอแนะนำให้ใช้ปลั๊กอินเพิ่มเติมเหล่านี้ด้วย เพราะเมื่อร้านของคุณเริ่มดำเนินการ คุณจะต้องให้ทีมซ่อมบำรุงคอยดูแลล้อรถ
เริ่มจากพื้นฐานกันก่อน คุณจะสร้างเว็บไซต์ WordPress ได้อย่างไร? หากคุณได้ตั้งค่าไซต์ WooCommerce แล้ว คุณสามารถข้ามไปที่ส่วนเกี่ยวกับความเข้าใจและการสำรวจ Elementor ได้
สร้างเว็บไซต์ WordPress
มีขั้นตอนหลักสองสามขั้นตอนในการสร้างเว็บไซต์ก่อนปรับแต่ง:เลือกโฮสต์ สร้างโดเมน ติดตั้ง WordPress และเพิ่ม SSL (ชั้นซ็อกเก็ตความปลอดภัย) นี่คือบทความที่พูดถึงการตั้งค่าไซต์ WordPress ตั้งแต่เริ่มต้น แต่นี่เป็นขั้นตอนสั้นๆ:
- เลือกโฮสต์: สิ่งที่ควรพิจารณาเมื่อเลือกโฮสต์มีดังนี้:ข้อกำหนดของคุณคืออะไร มีการสนับสนุนจากโฮสต์เพียงพอหรือไม่ และมีราคาไม่แพงหรือไม่ มีเจ้าของที่พักให้เลือกมากมาย เราจึงขอแนะนำให้ใช้เวลาในการเลือกซื้อของและมองหาสิ่งที่เหมาะกับความต้องการและงบประมาณของคุณ คำเตือนที่นี่:ตัวเลือกราคาต่ำสุดไม่ค่อยจะเป็นไปได้ หากคุณต้องการเข้าร่วม เราโฮสต์ไซต์ทดสอบของเราบน Cloudways การสร้างไซต์ WooCommerce บน Cloudways นั้นง่ายมากและมาพร้อมกับ WooCommerce ที่ติดตั้งไว้ เป็นจุดเริ่มต้นที่ดี และแดชบอร์ดโฮสติ้งมีข้อมูลที่ดีเกี่ยวกับไซต์ของคุณ หากคุณมีแนวโน้มเช่นนั้น
- ลงทะเบียนโดเมน: โดเมนคือชื่อเว็บไซต์ของคุณ ก่อนที่คุณจะเลือกโดเมน ให้นึกถึงเป้าหมายของเว็บไซต์ของคุณ คุณกำลังพยายามขายอะไร ใครคือผู้ซื้อของคุณ? ด้วยเหตุนี้ ให้สร้างชื่อโดเมนที่สามารถระบุตัวตนได้และจดจำได้ง่าย
- ติดตั้ง WordPress: ขั้นตอนการติดตั้ง WordPress จะแตกต่างกันเล็กน้อยในแต่ละโฮสต์ ตรวจสอบเอกสารของเจ้าของที่พักหรือติดต่อฝ่ายสนับสนุนเพื่อขอความช่วยเหลือ ด้วย Cloudways คุณต้องเลือก WooCommerce เมื่อสร้างแอปพลิเคชันใหม่ ด้วย Hostinger คุณจะต้องเลือก WordPress และมันจะติดตั้ง WordPress โดยอัตโนมัติ
- เพิ่ม SSL: อีกครั้ง สิ่งนี้จะแตกต่างกันไปตามแต่ละโฮสต์ บางโฮสต์ให้ใบรับรอง SSL ฟรีกับโฮสติ้ง ในขณะที่โฮสต์อื่น ๆ คุณจะต้องใช้ผู้ออกใบรับรองแทน ด้วย Cloudways ใบรับรองความปลอดภัยนี้จะถูกเพิ่มโดยอัตโนมัติ เมื่อคุณมีใบรับรองแล้ว คุณสามารถตั้งค่าได้อย่างง่ายดายด้วยปลั๊กอิน Really Simple SSL
ตั้งค่าเว็บไซต์ WooCommerce
เมื่อคุณมีไซต์ WordPress พื้นฐานแล้ว ก็ถึงเวลาติดตั้ง WooCommerce และตั้งค่า WooCommerce ขับเคลื่อนร้านค้าของคุณตั้งแต่การลงรายการผลิตภัณฑ์ ไปจนถึงการจัดการลูกค้า และอำนวยความสะดวกในการชำระเงิน
ในส่วนนี้ เราจะพูดถึงพื้นฐานของการตั้งค่า WooCommerce และสิ่งที่คุณควรทำก่อนที่จะเริ่มปรับแต่งหน้าด้วย Elementor นี่คือสิ่งที่คุณควรทำ:
- ติดตั้ง WooCommerce: หากคุณใช้ Cloudways เพื่อสร้างเว็บไซต์ WooCommerce คุณสามารถข้ามขั้นตอนนี้ได้ หากไม่ ให้วางเมาส์เหนือปลั๊กอินแล้วคลิก เพิ่มใหม่ . ค้นหาปลั๊กอิน WooCommerce แล้วคลิก ติดตั้ง และ เปิดใช้งาน
- ตั้งค่า WooCommerce ด้วยวิซาร์ดการตั้งค่า: ด้วยวิซาร์ดการตั้งค่า คุณสามารถเพิ่มรายละเอียดเกี่ยวกับไซต์ WooCommerce ของคุณ เช่น รายละเอียดร้านค้าพื้นฐาน ตัวเลือกการชำระเงินที่ต้องการ รายละเอียดการจัดส่ง และส่วนเสริมเพิ่มเติมที่คุณต้องการ นี่คือบทความที่สามารถช่วยให้มีรายละเอียดเพิ่มเติม เพียงคลิก WooCommerce ในแถบด้านข้างเพื่อเริ่มต้น
- ติดตั้งธีม Hello:ธีม Hello เป็นธีมเปล่าโดย Elementor และออกแบบมาเพื่อเสริมตัวสร้างเพจ คุณไม่จำเป็นต้องทำขั้นตอนนี้ แต่จะช่วยให้คุณได้รับเงินที่คุ้มค่าจากใบอนุญาต Pro ของคุณอย่างแน่นอน คุณสามารถติดตั้งได้โดยไม่ต้องติดตั้ง Elementor คลิกลักษณะที่ปรากฏบนแถบด้านข้างและธีมของคุณ คลิก เพิ่มใหม่ ค้นหา สวัสดี ในแถบค้นหา แล้วคลิก ติดตั้ง และ เปิดใช้งาน .
- ตั้งค่าร้านค้าของคุณ: เพิ่มสิ่งต่างๆ เช่น ผลิตภัณฑ์ รูปภาพ คำอธิบาย ราคา หมวดหมู่ นโยบายความเป็นส่วนตัว นโยบายการคืนเงิน ฯลฯ ซึ่งจะช่วยให้คุณมีพื้นที่ทำงานเมื่อคุณเริ่มแก้ไขด้วย Elementor
ตอนนี้ คุณพร้อมที่จะเพิ่มการชำระเงินแล้ว
เพิ่มวิธีการชำระเงิน
ในการสร้างร้านค้าที่ใช้งานได้อย่างสมบูรณ์ รายการถัดไปในรายการตรวจสอบของคุณคือการเพิ่มวิธีการชำระเงิน ท้ายที่สุดแล้ว หากลูกค้าชอบสินค้าชิ้นใดชิ้นหนึ่งของคุณ คุณอยากจะได้รับเงินใช่ไหม?
มีปลั๊กอินและเกตเวย์การชำระเงินมากมายให้คุณเลือก แต่ละรายการมีความแตกต่างกันอย่างมาก ดังนั้น คุณจะต้องทำการวิจัยเพื่อหาสิ่งที่ดีที่สุดสำหรับร้านค้าของคุณ การเพิ่มวิธีการชำระเงินจะเป็นการเปิดหน้าตะกร้าสินค้าและหน้าชำระเงินในไซต์ของคุณ ขั้นตอนในการดำเนินการมีดังนี้:
- เลือกวิธีการชำระเงิน: คุณสามารถเลือกวิธีการชำระเงินแบบเก็บเงินปลายทางหรือใช้ช่องทางการชำระเงินได้ เลือกช่องทางการชำระเงินขึ้นอยู่กับว่าลูกค้าของคุณต้องการชำระเงินอย่างไร ค่าธรรมเนียมการทำธุรกรรม และที่ตั้งร้านค้าของคุณ
- ติดตั้งเกตเวย์การชำระเงิน:เมื่อคุณเลือกตัวเลือกที่ต้องการแล้ว คุณจะต้องติดตั้งปลั๊กอินและรวมบัญชีของคุณเข้ากับ WooCommerce เรามีบทความเกี่ยวกับการบูรณาการ WooCommerce กับ Stripe และ PayPal สองตัวเลือกยอดนิยมที่ครอบคลุมตัวเลือกการชำระเงินและภูมิศาสตร์ที่หลากหลาย
- ทดสอบวิธีการชำระเงิน: ทำตามขั้นตอนการซื้อและดูว่าประสบการณ์ของลูกค้าที่ซื้อผลิตภัณฑ์จากคุณเป็นอย่างไร นอกจากนี้ยังช่วยให้คุณทราบได้ว่าสินค้าเริ่มต้น ตะกร้าสินค้า และหน้าชำระเงินเป็นอย่างไร ปลั๊กอินการชำระเงินจำนวนมากจะมีการทดสอบหรือคุณลักษณะแซนด์บ็อกซ์เพื่อให้คุณสามารถทำซ้ำกระบวนการได้
ติดตั้ง Elementor บนไซต์ WooCommerce ของคุณ
เราขอแนะนำให้คุณลงทุนในเวอร์ชัน Pro เนื่องจากวิดเจ็ต WooCommerce อันน่าทึ่งที่มีให้คุณใช้งาน นี่คือขั้นตอนสำหรับสิ่งนั้น:
- ติดตั้งและเปิดใช้งาน Elementor: กลับไปที่แดชบอร์ด WordPress คลิก ปลั๊กอิน แล้ว เพิ่มใหม่ ค้นหา Elementor ในแถบค้นหา คลิก ติดตั้ง เมื่อคุณพบปลั๊กอินที่ถูกต้องแล้วคลิกเปิดใช้งาน เมื่อคุณทำเสร็จแล้ว
- สร้างบัญชี: คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าที่คุณจะถูกขอให้สร้างบัญชีและเลือกแผน มีใบอนุญาตให้เลือก 3 แบบและเวอร์ชันฟรี เราจะบอกคุณว่ามีความแตกต่างกันอย่างไรในตอนต่อไป เมื่อเสร็จแล้ว ให้กลับไปที่แดชบอร์ด WP
ทำความเข้าใจเกี่ยวกับเครื่องมือแก้ไขหน้า Elementor
Elementor เป็นขุมพลังแห่งการออกแบบ ช่วยให้คุณสร้างเพจที่กำหนดเองสำหรับร้านค้าของคุณด้วยอินเทอร์เฟซแบบลากและวางที่ง่ายดาย ช่วงของตัวเลือกอาจทำให้สับสนได้ในแวบแรก แต่อย่ากังวล เพียงปรับแต่งเล็กน้อยเพื่อทำความคุ้นเคย ตราบใดที่คุณมีข้อมูลสำรอง การเข้าสู่ระบบเป็นวิธีที่ดีที่สุดในการเรียนรู้วิธีผ่าน Elementor
ด้วยเหตุนี้ ส่วนนี้จะช่วยให้คุณทำความคุ้นเคยกับเลย์เอาต์ของตัวแก้ไขเพจ
- เปิดหน้าเพื่อแก้ไข: วางเมาส์เหนือเพจในเมนูด้านข้างของคุณแล้วคลิกทุกหน้า . วางเมาส์เหนือหน้าใดก็ได้แล้วคลิก แก้ไข เมื่อตัวแก้ไขเพจเปิดขึ้น ให้คลิก แก้ไขด้วย Elementor . สิ่งนี้จะนำคุณไปสู่ตัวแก้ไขหน้า Elementor
นี่คือรูปภาพของสิ่งที่ดูเหมือน:
มีเพจสำคัญๆ มากมายในร้านค้าของคุณที่ส่งผลโดยตรงต่อประสบการณ์การช็อปปิ้งของลูกค้าของคุณ โปรดทราบว่าบางหน้าจะมีรหัสย่อที่มีลักษณะดังนี้:
woocommerce_checkout
นี้เป็นสิ่งสำคัญ. ห้ามลบ เว้นแต่คุณจะใช้วิดเจ็ต WooCommerce ของ Elementor Pro แต่คุณสามารถใส่รูปภาพหรือข้อความก่อนหรือหลังรหัสย่อนี้ได้
ตอนนี้ เรามาพูดถึงวิธีการแก้ไขเพจกัน
- เพิ่มส่วน: หากคุณวางเมาส์เหนือส่วนต่างๆ ของหน้า คุณจะสังเกตเห็นว่ากล่องสีน้ำเงินปรากฏขึ้น นี่หมายถึงส่วนของหน้า คลิกสัญลักษณ์ 6 จุดที่ตรงกลางส่วนเพื่อแก้ไข คลิก + ในกล่องเส้นประ นี่จะเป็นการสร้างส่วนใหม่
- เลือกคอลัมน์: แต่ละส่วนจะแบ่งออกเป็นคอลัมน์ วางเมาส์เหนือส่วนและส่วนต่างๆ ของเนื้อหาจะถูกเน้นด้วยกล่องสีน้ำเงิน คอลัมน์ประกอบด้วยองค์ประกอบแต่ละอย่างซึ่งสามารถปรับแต่งเป็นรายบุคคลได้ คุณสามารถเลือกเลย์เอาต์ของคอลัมน์ที่ต้องการได้ ตอนนี้คุณพร้อมที่จะลากและวางองค์ประกอบใหม่แล้ว
- เพิ่มองค์ประกอบ: ทางด้านซ้าย คุณจะเห็นไลบรารีของ Elements มีการจัดเรียงตามหมวดหมู่ เช่น ไซต์และ WooCommerce ลากและวางองค์ประกอบลงในคอลัมน์ คุณสามารถแก้ไของค์ประกอบนี้ในแถบด้านข้าง คลิกปากกาสีน้ำเงินที่ปรากฏที่ด้านบนขวาของคอลัมน์และแถบด้านข้างจะเปลี่ยนเพื่อแสดงการปรับแต่งต่างๆ (ขึ้นอยู่กับองค์ประกอบในคอลัมน์นั้น) ตัวอย่างเช่น หากคุณกำลังแก้ไขข้อความ คุณจะเห็นโปรแกรมแก้ไขข้อความทางด้านซ้าย
- ดูตัวอย่างการเปลี่ยนแปลงของคุณ: คุณสามารถดูตัวอย่างการเปลี่ยนแปลงที่คุณทำกับไซต์ของคุณได้โดยคลิกปุ่มตาที่ด้านล่างของแถบด้านข้าง
- ตรวจสอบไซต์ในโหมดตอบสนอง: คลิกโลโก้โหมดตอบสนองที่ด้านล่าง และคุณสามารถดูหน้าในมุมมองต่างๆ เพื่อดูว่าหน้าจะมีลักษณะอย่างไรในขนาดมือถือ เดสก์ท็อป และหน้าจออื่นๆ
- เผยแพร่/อัปเดตไซต์ของคุณ: เมื่อเสร็จแล้ว คุณสามารถบันทึกฉบับร่าง อัปเดต หรือเผยแพร่หน้าเว็บของคุณได้โดยคลิกปุ่มที่ด้านล่างซ้าย
เมื่อคุณเข้าใจเลย์เอาต์ของเครื่องมือแก้ไขเพจแล้ว นี่คือคำอธิบายของวิดเจ็ตพื้นฐานบางส่วน
แก้ไขข้อความ
- ลากและวางองค์ประกอบหัวเรื่องหรือตัวแก้ไขข้อความ: เพิ่มส่วนและเลือกจำนวนคอลัมน์ จากนั้น ลากและวางองค์ประกอบหัวเรื่องหรือตัวแก้ไขข้อความจากแถบด้านข้าง “เพิ่มข้อความที่นี่” จะถูกเพิ่มลงในเพจ
- กรอกข้อความที่ถูกต้อง: เลือกข้อความทั้งหมดและแทนที่ด้วยสำเนาที่คุณต้องการ
- ปรับแต่งข้อความ: เลือกข้อความแล้วคลิก รูปแบบ ในแถบด้านข้าง เปลี่ยนสีโดยเลือกจากแถบสี นอกจากนี้ คุณสามารถเปลี่ยนแบบอักษรได้โดยคลิกดินสอที่อยู่ถัดจาก Typography คุณยังสามารถเปลี่ยนประเภทของเส้นขีดและเพิ่มเงาหรือเปลี่ยนการจัดตำแหน่งของโปรแกรมแก้ไขข้อความ
การเพิ่มรูปภาพ
- ลากและวางองค์ประกอบรูปภาพ: เพิ่มส่วนถ้าคุณต้องการและเลือกจำนวนคอลัมน์ จากนั้นลากและวางองค์ประกอบรูปภาพ
- เพิ่มรูปภาพ: คลิกโลโก้ดินสอที่มุมบนขวาของรูปภาพ ในแถบด้านข้าง วางเมาส์เหนือรูปภาพและเลือก เลือกรูปภาพ . แทนที่รูปภาพเริ่มต้นด้วยของคุณ
- แก้ไขรูปภาพ: คุณสามารถเปลี่ยนขนาดหรือการจัดตำแหน่ง เพิ่มคำอธิบายภาพ หรือลิงก์ไปยังไฟล์สื่อหรือ URL
การเพิ่มปุ่ม
- ลากและวางองค์ประกอบปุ่ม: เมื่อคุณมีคอลัมน์แล้ว ให้ลากและวางองค์ประกอบปุ่ม
- ปรับแต่งปุ่ม: คุณสามารถเปลี่ยนประเภทของปุ่ม ข้อความที่อยู่บนปุ่ม การจัดตำแหน่ง สี หรือขนาดได้ เพิ่มลิงก์หรือการดำเนินการ
ด้วยพื้นฐานเหล่านี้ที่กำลังดำเนินอยู่ นี่คือเคล็ดลับที่จะช่วยลดงานได้มากมาย:
สร้างการตั้งค่าไซต์
คุณสามารถสร้างธีมสี ตั้งค่าแบบอักษรร่วม และตั้งค่าเทมเพลตสำหรับสิ่งต่างๆ เช่น ส่วนหัว ส่วนท้าย และปุ่ม คลิกไอคอนแฮมเบอร์เกอร์ที่มุมบนซ้ายของตัวแก้ไขเพจ แล้วคลิก การตั้งค่าไซต์ เมื่อคุณพบการออกแบบสำหรับไซต์ของคุณแล้ว คุณลักษณะนี้จะช่วยคุณประหยัดเวลาได้มากเมื่อรวบรวมหน้าใหม่ในอนาคต
สิ่งเหล่านี้เป็นพื้นฐาน เมื่อคุณคุ้นเคยกับการควบคุมของ Elementor แล้ว คุณสามารถนำพลังที่ค้นพบใหม่นี้ไปใช้ให้เกิดประโยชน์ได้
วิธีใช้ WooCommerce กับ Elementor Pro
หากคุณเปิดให้สร้างหน้าเว็บไซต์ WooCommerce ด้วยใบอนุญาต Elementor Pro ส่วนนี้จะบอกคุณว่าจะใช้วิดเจ็ตใดสำหรับหน้าใดหน้าหนึ่ง
วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce ด้วย Elementor
นี่คือหน้าที่ลูกค้าของคุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับผลิตภัณฑ์ได้ นี่คือขั้นตอนในการแก้ไขหน้าผลิตภัณฑ์เดียว:
- แก้ไขหน้าผลิตภัณฑ์: คุณสามารถแก้ไขเทมเพลตที่มีอยู่โดย Elementor หรือสร้างใหม่ตั้งแต่ต้น แก้ไขเทมเพลตได้ง่ายขึ้นหากคุณไม่รู้ว่าวิดเจ็ตเฉพาะควรไปที่ใด คุณเพียงแค่แก้ไขวิดเจ็ตที่มีอยู่
- ปรับแต่งด้วยวิดเจ็ต: หากคุณต้องการเริ่มต้นใหม่ทั้งหมด นี่คือวิดเจ็ตที่คุณสามารถเพิ่มได้:
- ชื่อผลิตภัณฑ์: นี่คือวิดเจ็ตที่มีชื่อผลิตภัณฑ์ของคุณ แก้ไขได้ในแถบด้านข้าง
- ภาพผลิตภัณฑ์: คุณสามารถแก้ไขขนาดของรูปภาพในแถบด้านข้าง เพียงเลือกรูปภาพและสำรวจการตั้งค่าทางด้านขวา
- การให้คะแนนผลิตภัณฑ์: นี่อาจเป็นวิดเจ็ตที่มีประโยชน์มากสำหรับลูกค้าของคุณ เปิดโอกาสให้พวกเขาได้เห็นความประทับใจของผู้อื่นต่อผลิตภัณฑ์ของคุณ
- คำอธิบายโดยย่อ: นี่คือวิดเจ็ตที่เพิ่มคำอธิบายของคุณตามที่คุณได้ใส่ไว้เมื่อคุณเพิ่มคำอธิบายผลิตภัณฑ์
- ราคาสินค้า: เพิ่มวิดเจ็ตนี้เพื่อเพิ่มราคา ราคาจะถูกเพิ่มลงในผลิตภัณฑ์เฉพาะเมื่อคุณเพิ่มสินค้าลงในไซต์ WooCommerce ของคุณ ดังนั้น ข้อความนี้จะถูกเติมโดยอัตโนมัติ
- หยิบลงตะกร้า:นี่คือปุ่มสำหรับเพิ่มสินค้าลงในตะกร้าสินค้า คุณสามารถเปลี่ยนสี ข้อความ หรือขนาดในแถบด้านข้างได้
- วู เบรดครัมบ์:เบรดครัมบ์เป็นคุณลักษณะในการแสดงหมวดหมู่ผลิตภัณฑ์ ตัวอย่างเช่น หากคุณกำลังซื้อรองเท้าผู้ชายสีดำคู่หนึ่งจากเว็บไซต์แฟชั่น เกล็ดขนมปังอาจเป็นบ้าน/แฟชั่นสำหรับผู้ชาย/รองเท้า/รองเท้าหนังสีดำ
- ผลิตภัณฑ์ที่เกี่ยวข้อง: นี่คือส่วน "ผลิตภัณฑ์ที่เกี่ยวข้อง" ที่คุณมักจะเห็นในเว็บไซต์อีคอมเมิร์ซ คุณสามารถเพิ่มได้โดยการลากและวางวิดเจ็ตที่เกี่ยวข้องกับผลิตภัณฑ์
- วิดเจ็ตขายต่อ: วิดเจ็ตนี้สนับสนุนส่วน "คุณอาจชอบ" ในหน้าผลิตภัณฑ์ของคุณ
แต่ละวิดเจ็ตเหล่านี้สามารถปรับแต่งได้ในแง่ของฟอนต์ สี การจัดตำแหน่ง ตำแหน่ง และอื่นๆ
- ตรวจทานการเปลี่ยนแปลง: คลิกโหมดตอบสนองและตรวจสอบว่าหน้ามีลักษณะอย่างไรในอุปกรณ์ต่างๆ
- เผยแพร่หรืออัปเดต: หากดี คุณสามารถเผยแพร่หรืออัปเดตหน้าได้
คำแนะนำในการแก้ไขหน้าผลิตภัณฑ์ของคุณ:
- เพิ่มรูปภาพคุณภาพสูงสำหรับผลิตภัณฑ์
- เขียนคำอธิบายผลิตภัณฑ์ที่ยอดเยี่ยม
- เลือกชื่อที่สื่อความหมายและสื่อความหมายสำหรับผลิตภัณฑ์
วิธีแก้ไขหน้าร้านค้า WooCommerce ด้วย Elementor
หรือที่เรียกว่าหน้าเก็บถาวร ซึ่งเป็นที่ที่ลูกค้าของคุณสามารถดูผลิตภัณฑ์ทั้งหมดของคุณได้ เป้าหมายของหน้านี้คือการสร้างหน้าเว็บที่ลูกค้าของคุณสามารถค้นหาสิ่งที่ต้องการได้อย่างง่ายดาย
- แก้ไขเทมเพลตหรือสร้างหน้าใหม่: ในส่วนต่อไป เราจะพูดถึงการสร้างเทมเพลตใหม่ คุณยังสามารถใช้เทมเพลตที่มีอยู่หรือเริ่มจากศูนย์ก็ได้ หากคุณต้องการสร้างตั้งแต่เริ่มต้น ให้วางเมาส์เหนือเพจแล้วคลิก เพิ่มใหม่ . จากนั้น คุณสามารถเพิ่มวิดเจ็ตต่อไปนี้:
- เพิ่มวิดเจ็ตเพื่อปรับแต่ง: เราได้แสดงรายการวิดเจ็ตที่เราแนะนำให้คุณเพิ่มเพื่อประสบการณ์การช็อปปิ้งที่ยอดเยี่ยม:
- หมวดหมู่สินค้า: ซึ่งจะช่วยให้ลูกค้าของคุณกรองผลิตภัณฑ์ตามหมวดหมู่ต่างๆ
- รถเข็นเมนู: สิ่งนี้จะเพิ่มโลโก้รถเข็นในเมนูของคุณ ซึ่งลูกค้าของคุณสามารถดูสิ่งที่พวกเขาเพิ่มลงในรถเข็นได้
- ผลิตภัณฑ์: นี่จะแสดงผลิตภัณฑ์ทั้งหมดที่คุณเพิ่มไปยังร้านค้าของคุณ
- เก็บถาวรผลิตภัณฑ์: ซึ่งจะทำให้ลูกค้ามีโอกาสจัดเรียงตามค่าเริ่มต้น ความนิยม ล่าสุด หรือราคา
- กำหนดเอง หยิบใส่รถเข็น: คุณสามารถปรับแต่งปุ่มหยิบใส่ตะกร้าได้ เปลี่ยนข้อความ สี หรือขนาด
- WooCommerce Breadcrumbs:แสดงหมวดหมู่ทั้งหมดและตำแหน่งในไฟล์เก็บถาวรที่มีผลิตภัณฑ์เฉพาะ มันเหมือนกับเส้นทางจากหน้าแรกไปยังหน้าที่ลูกค้าของคุณกำลังเปิดอยู่
- เก็บคำอธิบายโฆษณาชื่อ: คุณสามารถเพิ่มชื่อและคำอธิบายและแก้ไขได้โดยเปลี่ยนการตั้งค่าในแถบด้านข้าง
- ตรวจสอบหน้า: เมื่อคุณแก้ไขสิ่งที่คุณต้องการแล้ว ให้ตรวจดูว่าหน้านั้นมีลักษณะอย่างไรในอุปกรณ์ต่างๆ เมื่อคุณพอใจแล้ว คลิกเผยแพร่ .
วิธีแก้ไขหน้ารถเข็น WooCommerce ด้วย Elementor
รองจากหน้าชำระเงินที่มีความสำคัญ หน้ารถเข็นที่ออกแบบมาอย่างดีสามารถสร้างหรือทำลายการขายของคุณได้ เมื่อออกแบบหน้านี้ เราแนะนำให้ทำการวิจัยจำนวนมากเพื่อค้นหาว่าลูกค้าของคุณต้องเห็นอะไรเมื่อตรวจสอบการเลือกก่อนชำระเงิน ตรวจสอบไซต์อีคอมเมิร์ซยอดนิยมและปรับแต่งการออกแบบตามการใช้งาน
คุณสามารถใช้วิดเจ็ต Elementor Cart เพื่อปรับแต่งหน้ารถเข็นได้อย่างเต็มที่ ขั้นตอนในการดำเนินการมีดังนี้:
- แก้ไขหน้ารถเข็นที่มีอยู่: คุณแก้ไขหน้าที่มีอยู่ได้โดยวางเมาส์เหนือหน้าแล้วคลิกหน้าทั้งหมด . จากนั้นคลิก แก้ไข เมื่อคุณวางเมาส์เหนือหน้ารถเข็น จากนั้นคลิก แก้ไขด้วย Elementor
- แทนที่รหัสสั้นด้วยวิดเจ็ต: รหัสสั้นคือโค้ดที่เพิ่มคุณสมบัติให้กับหน้า ด้วยวิดเจ็ตรถเข็น คุณไม่จำเป็นต้องใช้มัน ดังนั้นให้ลบรหัสย่อและแทนที่ด้วยวิดเจ็ตจากแถบด้านข้าง
- ปรับแต่งหน้า: ตรวจสอบแถบด้านข้างและสำรวจการตั้งค่า คุณสามารถลองทำสิ่งต่อไปนี้:
- ทั่วไป: เลือกจำนวนคอลัมน์ในแต่ละส่วนและทำให้บางคอลัมน์ติดหนึบโดยสลับไปที่แถบด้านข้าง
- สรุปคำสั่งซื้อ: เปลี่ยนปุ่มอัปเดตรถเข็นหากต้องการ
- ยอดรวม: คุณสามารถปรับแต่งป้ายกำกับ การจัดตำแหน่ง และอื่นๆ สำหรับส่วนยอดรวมของรถเข็น ซึ่งรวมถึง ดำเนินการชำระเงิน ปุ่ม.
- ตัวเลือกเพิ่มเติม: ให้คุณสลับความสามารถในการอัปเดตรถเข็นโดยอัตโนมัติ
หากคุณคลิก สไตล์ ในแถบด้านข้าง นี่คือสิ่งที่คุณสามารถปรับแต่งได้:
- ส่วน: ควบคุมรูปแบบของส่วนต่างๆ เช่น เพิ่มเงาหรือสีพื้นหลัง
- ตัวพิมพ์: ข้อความทั้งหมดสามารถเปลี่ยนแปลงให้เข้ากับความสวยงามของเว็บไซต์ของคุณได้
- ปุ่ม: เปลี่ยนสี ข้อความ ขนาด และอื่นๆ
- สรุปคำสั่งซื้อ: ปรับแต่งลักษณะสรุปคำสั่งซื้อ
- ยอดรวม: แก้ไขส่วนยอดรวมรถเข็น
- ปุ่มชำระเงิน: คุณสามารถปรับแต่งสี ขนาด ข้อความ และการจัดตำแหน่งของปุ่มชำระเงินได้
- รีวิวในมุมมองมือถือ: เมื่อเสร็จแล้ว ให้ตรวจทานหน้าในมุมมองมือถือ หากคุณพอใจกับรูปลักษณ์ของสิ่งต่างๆ ให้คลิกเผยแพร่ .
วิธีแก้ไขหน้าชำระเงิน WooCommerce ด้วย Elementor
ใช่ นี่คือหน้าที่สำคัญที่สุดในไซต์อีคอมเมิร์ซของคุณ เป็นหน้าสุดท้ายที่ลูกค้าของคุณเห็น และที่ที่พวกเขาตัดสินใจซื้อ หน้าเช็คเอาต์มีอัตราการออกจากไซต์สูงสุด ดังนั้นคุณต้องตรวจสอบให้แน่ใจว่าไม่มีแรงเสียดทานน้อยที่สุด
Elementor Pro มีวิดเจ็ต Checkout ที่ทำให้การแก้ไขหน้าชำระเงินทำได้ง่ายมาก ทำงานร่วมกับวิดเจ็ตรถเข็นและบัญชีของฉัน ทำให้คุณสามารถแก้ไขหน้าชำระเงินที่มีอยู่ได้ ด้วยวิดเจ็ตนี้ คุณสามารถเปลี่ยนแปลงการออกแบบในหน้าชำระเงินของคุณ เช่น สีข้อความ การจัดตำแหน่ง ส่วนต่างๆ และอื่นๆ อีกมากมาย
- เปิดหน้าชำระเงินด้วยตัวแก้ไข Elementor: วางเมาส์เหนือ หน้า และคลิก ทุกหน้า . วางเมาส์เหนือหน้าชำระเงิน และคลิกแก้ไข ที่ด้านบน ให้คลิก แก้ไขด้วย Elementor . รอสักครู่ หน้านี้จะเปิดขึ้นในตัวแก้ไข Elementor
- แทนที่รหัสย่อของ Checkout ด้วยวิดเจ็ต Checkout: รหัสย่อเป็นวิธีการของ WooCommerce ในการรวมฟิลด์ Checkout ไว้ในหน้าของคุณ ดูเหมือนว่านี้:
woocommerce_checkout
ให้เพิ่มวิดเจ็ตการชำระเงินจากไลบรารีทางด้านซ้ายแทน ซึ่งจะแสดงตัวอย่างว่าหน้าชำระเงินมีลักษณะอย่างไร
หมายเหตุ:เนื่องจากคุณกำลังแก้ไขที่หน้าชำระเงิน เพิ่มสินค้าบางรายการลงในรถเข็นของคุณ แล้วคลิกปุ่มเพื่อชำระเงิน สิ่งนี้จะแสดงให้คุณเห็นว่าหน้าเพจมีลักษณะอย่างไรกับผลิตภัณฑ์ในนั้นเพื่อประสบการณ์ที่ดียิ่งขึ้น
- ปรับแต่งหน้า: คุณสามารถสำรวจการตั้งค่าต่างๆ ของ Elementor Checkout Widget ได้ในแถบด้านข้าง ต่อไปนี้คือการตั้งค่าบางอย่างที่คุณสามารถเปลี่ยนได้:
- ทั่วไป: คุณสามารถเลือกเค้าโครงคอลัมน์หนึ่งหรือสองคอลัมน์ ทำให้คอลัมน์หนึ่งติดหนึบ และเพิ่มออฟเซ็ตเพื่อให้ส่วนหัวไม่รบกวนคอลัมน์
- การเปลี่ยนแบบฟอร์มการเรียกเก็บเงินหรือการจัดส่ง: คุณสามารถแก้ไขส่วนหัวสำหรับแต่ละฟอร์มเหล่านี้ ตัวแทนแต่ละตำแหน่ง และแต่ละฟิลด์ได้
- ข้อมูลเพิ่มเติม: นี่คือส่วนที่ลูกค้าของคุณสามารถเพิ่มคำแนะนำหรือข้อมูลเกี่ยวกับคำสั่งซื้อได้
- การตั้งค่าคูปอง: ปรับแต่งการจัดตำแหน่งและการพิมพ์คูปองของคุณ
- การชำระเงิน: คุณสามารถปรับแต่งปุ่มการชำระเงินได้ทุกด้าน ตัวอย่างการจัดตำแหน่งและสี
คุณสามารถแก้ไขสิ่งต่างๆ เพิ่มเติมได้โดยคลิก รูปแบบ :
- ปุ่มซื้อ: คุณสามารถเปลี่ยนสี ข้อความ ระยะห่าง ฯลฯ สำหรับปุ่มซื้อได้ นี่คือปุ่มที่ลูกค้าของคุณจะคลิกเพื่อดำเนินการชำระเงินสำหรับรถเข็นของตน
- สรุปคำสั่งซื้อ: คุณสามารถเลือกรูปแบบตัวอักษรและระยะห่างของรายการสินค้าที่สั่งซื้อได้
- ตัวพิมพ์: คุณสามารถปรับแต่งข้อความทั้งหมดได้ ยกเว้นแบบฟอร์ม
- แบบฟอร์ม: ปรับแต่งรูปแบบตัวอักษรและสีของแบบฟอร์มของคุณ ใช้ ช่องว่างแถว การตั้งค่าเพื่อเพิ่มระยะห่าง
- ตรวจสอบหน้าในมุมมองมือถือ: ตรวจสอบให้แน่ใจว่าไซต์ดูดีแม้ในมุมมองมือถือ
คำแนะนำในการแก้ไขหน้าชำระเงิน:
- มีตัวเลือกการชำระเงินเพียงพอ
- ลบช่องที่ไม่จำเป็นออก
- เก็บข้อมูลการชำระเงินทั้งหมดไว้ในหน้าเดียว
วิธีสร้างเทมเพลตด้วย Elementor
ด้วย Elementor คุณสามารถสร้างเทมเพลตแบบกำหนดเองที่เหมาะกับแบรนด์ของคุณได้ คุณสามารถปรับแต่งส่วนหัวและส่วนท้ายได้ ตัวอย่างเช่น เพื่อให้ปรากฏพร้อมกับการสร้างแบรนด์เว็บไซต์ของคุณในทุกหน้า ในส่วนนี้ เราจะสร้างเทมเพลตแบบกำหนดเองสำหรับส่วนหัว นี่คือวิธีที่คุณทำ
- สร้างเทมเพลตใหม่: องค์ประกอบ Global Header คือสิ่งที่คุณเห็นในทุกหน้าของไซต์ของคุณ หากต้องการสร้างเทมเพลต ให้คลิก องค์ประกอบ ในแถบด้านข้าง จากนั้นคลิก ตัวสร้างธีม . ตอนนี้คลิก เพิ่มเทมเพลตใหม่ .
- เลือกประเภทเทมเพลตที่เหมาะสม: หากคุณกำลังสร้างส่วนหัว ให้เลือก ส่วนหัว ในดรอปดาวน์สำหรับประเภทของเทมเพลต เลือกชื่อที่สื่อความหมายสำหรับเทมเพลตนี้ เพื่อให้คุณสามารถระบุได้ง่ายในภายหลัง จากนั้นคลิก สร้างเทมเพลต
- เรียกดูไลบรารีเทมเพลต: ตอนนี้ คุณสามารถเลือกจากเทมเพลตที่กำหนดไว้ล่วงหน้าในไลบรารีแล้วคลิก แทรก . ทุกเทมเพลตสามารถปรับแต่งได้อย่างเต็มที่ ดังนั้นให้เลือกเทมเพลตที่ใกล้เคียงที่สุดกับสิ่งที่คุณกำลังมองหา
- แก้ไขและปรับแต่งเทมเพลต: ใช้ตัวแก้ไขเพื่อสร้างเทมเพลตในฝันของคุณ เล่นกับสี รูปภาพ แบบอักษร ฯลฯ
- เผยแพร่เทมเพลต: เมื่อคุณปรับแต่งเทมเพลตแล้ว ให้คลิกเผยแพร่ ที่ด้านล่างของแถบด้านข้าง และคุณจะได้รับแจ้งให้เลือกตำแหน่งที่คุณต้องการให้แสดงเทมเพลต เลือกสิ่งที่คุณต้องการจากดรอปดาวน์ คลิก บันทึกและปิด . คุณจะถูกเปลี่ยนเส้นทางกลับไปที่ตัวแก้ไข แต่เทมเพลตใหม่ของคุณจะใช้งานได้
- รีวิว: คลิก ดูเลย ในป๊อปอัปที่ด้านล่างซึ่งจะนำคุณไปยังหน้าแสดงตัวอย่าง ทำการเปลี่ยนแปลงตามที่คุณต้องการ
วิธีสร้างป๊อปอัปอีคอมเมิร์ซด้วย Elementor
หากคุณต้องการเพิ่มป๊อปอัป นี่คือขั้นตอน:
- สร้างเทมเพลตป๊อปอัป :คลิก แม่แบบ ในแถบด้านข้างแล้วคลิกป๊อปอัป และ เพิ่มใหม่ . ตั้งชื่อเทมเพลตของคุณแล้วคลิกสร้างเทมเพลต .
- สร้างป๊อปอัป: คุณสามารถสร้างตั้งแต่เริ่มต้นหรือแก้ไขเทมเพลต Elementor คุณสามารถเลือกสี ข้อความ ฯลฯ ได้
- เผยแพร่ป๊อปอัป: สิ่งนี้จะบันทึกป๊อปอัปของคุณเป็นเทมเพลตที่คุณสามารถเชื่อมโยงได้ในภายหลัง คลิก เผยแพร่ และ บันทึก และปิด .
- แก้ไขเพจ: คลิก หน้า ในแถบด้านข้างและทุกหน้า . เลือกหน้าที่คุณต้องการเพิ่มป๊อปอัปและคลิกแก้ไข ด้วย Elementor .
- เพิ่มปุ่ม: เมื่อตัวแก้ไขเพจเปิดขึ้น ให้ลากและวางวิดเจ็ตปุ่มจากแถบด้านข้าง เพิ่มข้อความที่คุณต้องการและทำให้เป็นสีใดก็ได้ที่คุณต้องการ
- ลิงก์ไปยังป๊อปอัป: ในแถบด้านข้าง ใต้เค้าโครง ให้เลือก ลิงก์ ไดนามิก การทำงาน และป๊อปอัป . จากนั้นคลิก เปิดป๊อปอัป และเลือกป๊อปอัปที่คุณสร้างขึ้น
- รีวิว: ตรวจสอบการทำงานของปุ่มแล้วคลิกอัปเดต เมื่อคุณพร้อม
Elementor กับ Elementor Pro:เมื่อใดที่ต้องทำการเปลี่ยน?
Elementor เวอร์ชันฟรีมีเครื่องมือสำหรับออกแบบหน้าพื้นฐานและเหมาะสำหรับบล็อก เมื่อออกแบบเว็บไซต์ WooCommerce คุณควรซื้อใบอนุญาตสำหรับ Elementor Pro พวกเขามีวิดเจ็ตและองค์ประกอบมากมายที่ออกแบบมาเป็นพิเศษสำหรับประสบการณ์ WooCommerce ที่น่าทึ่ง
นี่คือรายการวิดเจ็ตที่ยอดเยี่ยมบางส่วนที่คุณควรลอง:
- หมวดหมู่สินค้า: ซึ่งจะช่วยให้ลูกค้าของคุณจัดเรียงสินค้าตามหมวดหมู่ได้ ทำให้ง่ายต่อการค้นหาและซื้อของบางอย่าง
- หยิบใส่ตะกร้า: การปรับแต่งปุ่มให้เข้ากับแบรนด์ของคุณนั้นง่ายมาก คุณสามารถเปลี่ยนสี เส้นขอบ แบบอักษร ฯลฯ ได้
- วิดเจ็ตการขายต่อสินค้า: คุณเคยเห็นส่วนผลิตภัณฑ์ที่เกี่ยวข้องใน Amazon หรือไม่? นี่คือสิ่งเดียวกัน คุณกำลังแสดงให้ลูกค้าของคุณเห็นผลิตภัณฑ์อื่นๆ ที่พวกเขาอาจสนใจโดยพิจารณาจากผลิตภัณฑ์ปัจจุบันที่พวกเขากำลังดูอยู่
- ข้อความในรถเข็นที่ว่างเปล่า :เพิ่มข้อความที่น่าสนใจเพื่อให้ลูกค้าทราบว่าตะกร้าสินค้าว่างเปล่าหากพวกเขาพยายามชำระเงิน นี่เป็นวิธีที่ดีในการทำให้พวกเขากลับไปดูรายการผลิตภัณฑ์ของคุณอีกครั้ง
- การให้คะแนนผลิตภัณฑ์: หลักฐานทางสังคมเป็นตัวกระตุ้นที่ทรงพลัง และสร้างความไว้วางใจในผลิตภัณฑ์ของคุณและบนไซต์ของคุณ คุณอาจต้องการขอความเห็นจากลูกค้าก่อนหน้านี้ด้วยเหตุผลเฉพาะนี้
- รีวิวผลิตภัณฑ์: สิ่งนี้นำความน่าเชื่อถือมาสู่ผลิตภัณฑ์ของคุณสำหรับลูกค้าใหม่
ข้อดีและข้อเสียของ Elementor
Elementor ไม่ได้เป็นเพียงเครื่องมือสร้างเพจเท่านั้น และนักพัฒนาหรือนักออกแบบหลายคนย่อมมีความชอบใจอย่างแน่นอน เราชอบ Elementor เพราะมันมีอยู่ทั่วไปและใช้งานง่าย แต่ความต้องการของคุณอาจแตกต่างกัน เราได้แจกแจงข้อควรพิจารณาหลักของการเลือกตัวสร้างเพจออกเป็นข้อดีและข้อเสียดังต่อไปนี้ หากคุณสมบัติที่จำเป็นอยู่ในรายการข้อเสีย คุณอาจต้องการค้นหาตัวสร้างเพจสำรอง
ข้อดี
- ใช้งานง่าย: ฟังก์ชันการลากและวางทำได้ง่ายมาก คุณสามารถปรับแต่งเพจของคุณได้อย่างแท้จริงโดยไม่ต้องเขียนโค้ดหรือใช้ปลั๊กอินอื่นใด
- คุ้มค่า: มีองค์ประกอบเฉพาะของ WooCommerce 24 รายการในเวอร์ชัน Pro สิ่งเหล่านี้ล้วนเป็นส่วนสำคัญของกระบวนการซื้อของ และได้รับการออกแบบมาเพื่อสร้างประสบการณ์ที่ดียิ่งขึ้นให้กับลูกค้าของคุณ
- การออกแบบที่ตอบสนองในตัว: ต่างจาก Gutenberg ตรงที่คุณจะต้องดูตัวอย่างการเปลี่ยนแปลงของคุณในแท็บใหม่ ด้วย Elementor สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ คุณสามารถเปลี่ยนมุมมองและแก้ไขต่อไปได้
ข้อเสีย
- ค่าใช้จ่าย: แม้ว่าเวอร์ชันฟรีจะช่วยปรับแต่งไซต์พื้นฐาน แต่เวทมนต์ที่แท้จริงก็เกิดขึ้นกับเวอร์ชัน Pro มีแผนสามแผนซึ่งมีตั้งแต่ $49 ถึง $999 ต่อปี
- การอัปเดตที่ผิดพลาดและการสนับสนุนไม่เพียงพอ: พวกเขาเคยมีปัญหากับการอัปเดตที่ผิดพลาดและการสนับสนุนเพียงเล็กน้อยเพื่อช่วยเจ้าของไซต์
- ปัญหาเกี่ยวกับ WooCommerce: บางครั้ง Elementor หยุดทำงานบนไซต์ WooCommerce เรามีส่วนที่จะพูดถึงวิธีแก้ไขในภายหลัง
Elementor ไม่ทำงานกับ WooCommerce? วิธีแก้ไข
นี่เป็นเรื่องปกติโดยเฉพาะหากคุณกำลังติดตั้ง WooCommerce หลังจากที่คุณติดตั้ง Elementor แล้ว ต่อไปนี้คือบางสิ่งที่คุณสามารถลองแก้ไขปัญหาได้:
- อัปเดต Elementor, WordPress และเวอร์ชัน WooCommerce :ตรวจสอบให้แน่ใจว่าปลั๊กอินและ PHP ของคุณเป็นปัจจุบันทั้งหมด เรามีบทความเกี่ยวกับการอัปเดตปลั๊กอินอย่างปลอดภัยซึ่งคุณอาจพบว่ามีประโยชน์
- เปิดใช้งานวิธีการโหลดตัวแก้ไขสวิตช์: คลิก องค์ประกอบ ในแถบด้านข้างแล้วคลิกการตั้งค่า . จากนั้นตรงไปที่ ขั้นสูง แท็บและเปิดใช้งาน วิธีตัวแก้ไขสวิตช์ตัวแก้ไข โดยคลิกที่ช่องทำเครื่องหมาย
- Clear your cache: If you have a cache plugin, clear your cache and see if that helps. You can also temporarily disable the caching plugin and this will enable you to bypass any caching issues.
- Check if any other plugins are interfering with Elementor functioning: To do so, deactivate all plugins and check to see if you’re able to load Elementor. If so, reactivate all the plugins and keep deactivating them one by one till it works again. Then you know which plugin is the problem. You can either keep the plugin deactivated or roll it back to an older version.
Recommended plugins for WooCommerce sites
- BlogVault: Safeguard every order, purchase, customer, and transaction on your WooCommerce store with BlogVault’s real-time backups. Completely automated, BlogVault’s real-time backups sync to your store every 5 minutes, and are stored offsite for even greater safety.
- MalCare :This best-in-class WordPress security plugin is all you need to protect your site from hackers and their malware. Easily scan and clean malware in just a few clicks, and prevent malware from entering your site with an advanced firewallProtect your customer details from ever being accessed by hackers with MalCare.
- Google Analytics:The OG analytics tool to analyze your traffic and understand your customers better. We have an article on integrating Google Analytics into your WooCommerce site.
- YITH WooCommerce Order Tracking: This plugin helps manage shipping information easily. It allows your customers to track their purchases.
- YITH Advanced Refund System for WooCommerce: This plugin helps you set up a refund system.
Final thoughts
If you’re ready to invest in a page builder, Elementor can be a great option. But, before you make those changes, backup your site with BlogVault. It’s a great way to protect your site from mishaps and serves as insurance in case something goes terribly wrong.
FAQ
How good is Elementor for a WooCommerce site?
Elementor is excellent for a WooCommerce site because it has so many elements that you can customize, specifically for making your customer’s journey better. With the Pro version of Elementor, you won’t need other plugins to build a high-functioning WooCommerce site.
Is Elementor the best page builder?
Elementor is one of the best page builder plugins, amidst others like SeedProd and WPBakery. It’s easy, highly customizable and totally worth the cost.
What are the best add-Ons for WooCommerce?
Some essential add-ons for WooCommerce sites are BlogVault for backups, MalCare for security, YITH WooCommerce Order Tracking, and YITH Advanced Refund System for WooCommerce.
How do I add Elementor to WooCommerce?
You can install Elementor from your WordPress admin’s plugin directory. Next, activate it and add your license key if you’re using the Pro version. You’re now ready to build the site you want.
Is WooCommerce free with Elementor?
WooCommerce is free. Elementor has both a free and paid version. Though, for WooCommerce, you’re better off buying the paid version of Elementor.
Can I edit WooCommerce with Elementor?
Yes, you can edit a WooCommerce site easily with Elementor. In fact, every inch of your WooCommerce site can be edited with Elementor. Just install, activate, and get customizing.
What is Elementor in WooCommerce?
Elementor is a page builder plugin for WordPress and WooCommerce sites. They offer free and paid versions of the plugin. Once you install it, you have a wide range of elements to drag, drop, and customize.
