วิธีปรับแต่งร้านค้า WooCommerce ของคุณโดยใช้ Happy Addons
เผยแพร่แล้ว: 2021-02-26ธุรกิจอีคอมเมิร์ซมีการพัฒนาไปวันๆ ด้วยการเติบโตอย่างรวดเร็วของเทคโนโลยี โดยทั่วไปแล้ว การสร้างร้านค้าออนไลน์นั้นค่อนข้างง่าย ราคาไม่แพง และมีความเสี่ยงต่ำ ไม่ว่าคุณจะมีร้านค้าที่มีหน้าร้านอยู่แล้วหรือไม่ก็ตาม
แต่ทำไมคุณควรคำนึงถึงการออกแบบหน้าร้านค้าของคุณเป็นลำดับความสำคัญอันดับแรก
สินค้าของคุณไม่ซ้ำใคร หน้าสินค้าที่แสดงสินค้าก็ควรมีเอกลักษณ์เช่นกัน
WooCommerce
การออกแบบที่ดีทำให้กระบวนการซื้อง่ายสำหรับผู้ใช้ นั่นเป็นเหตุผลที่คุณต้องปรับแต่งไซต์อีคอมเมิร์ซของคุณด้วยวิธีที่เหมาะสม
โชคดีที่คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญหรือนักพัฒนาก็สามารถทำได้ แต่คุณสามารถใช้เครื่องมือสร้างเพจที่มีประโยชน์และสะดวกเพื่อปรับแต่งร้านค้าของคุณ แน่นอนว่ามันจะช่วยให้คุณยืนหยัด อย่างน่าประทับใจ และ แข่งขันได้ ซึ่งสร้างยอดขายและรายได้เพิ่มขึ้น!
ดังนั้น ในโพสต์ของวันนี้ เราจะแสดงให้เห็นว่าคุณสามารถปรับแต่งร้านค้า WooCommerce ของคุณและเพิ่มฟีเจอร์ที่ยอดเยี่ยมได้อย่างไรโดยใช้ Happy Addons เริ่มจากคำถามพื้นฐานกันก่อน
อะไรทำให้หน้าผลิตภัณฑ์ที่ดี?
หน้าผลิตภัณฑ์คือที่ที่คุณแสดงผลิตภัณฑ์ออนไลน์ของคุณแก่ลูกค้าอย่างเป็นระเบียบ จึงสามารถค้นหา เลือก และซื้อสินค้าได้ง่าย
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/YKCHfUnF9hASi4Kn.png)
ทุกวันนี้ผู้คนนิยมซื้อของออนไลน์มากกว่าซื้อของจริง เนื่องจากการแพร่ระบาดทั่วโลก สถานการณ์การจับจ่ายทั้งหมดได้เปลี่ยนจากร้านค้าจริงเป็นร้านค้าออนไลน์ ซึ่งมากกว่า 95% ของการซื้อทั้งหมด นั่นเป็นเหตุผลว่าทำไมจึงมีความสำคัญมากขึ้นและแข่งขันกันเพื่อรักษาลูกค้า
สมมติว่าคุณเข้าสู่ร้านค้าออนไลน์เพื่อซื้อของบางอย่าง ( โทรศัพท์มือถือ ) ความต้องการแรกของคุณคืออะไร?
ประสบการณ์การช็อปปิ้งที่ง่าย ขวา?
ใช่ ประสบการณ์การช็อปปิ้งที่ง่ายดายด้วย กระบวนการชำระเงินที่เรียบง่าย จะเป็นตัวกำหนดว่าการจัดระเบียบร้านค้าหรือหน้าสินค้าเป็นอย่างไร นอกจากนี้ยังช่วยให้ลูกค้าพบสิ่งที่พวกเขากำลังมองหา นี่คือที่มาของหน้าร้านค้าที่ปรับแต่งมาอย่างดี
มาดูกันว่าทำไมการปรับแต่งร้านค้า WooCommerce จึงมีความสำคัญต่อ:-
- สร้างเอกลักษณ์ของแบรนด์ที่ยอดเยี่ยม
- มีส่วนร่วมกับลูกค้ามากขึ้น
- เพิ่มประสบการณ์ผู้ใช้
- โดดเด่นกว่าคู่แข่งรายอื่น
คุณอาจชอบ: วิธีค้นหาและโน้มน้าวใจผู้ขายสำหรับตลาดที่มีผู้ค้าหลายรายของคุณ
วิธีปรับแต่งหน้าสินค้า / ร้านค้า WooCommerce โดยใช้ Happy Addons
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/hKoj3oM2zmsZared.png)
ตอนนี้ได้เวลาสาธิตกระบวนการปรับแต่งหน้าร้านค้า WooCommerce ทำตามขั้นตอนอย่างระมัดระวังและนำไปใช้กับไซต์ WooCommerce ที่ขับเคลื่อนด้วย WordPress ของคุณ
ข้อกำหนดเบื้องต้นก่อนปรับแต่ง WooCommerce Store Page
- เวิร์ดเพรส
- WooCommerce (ฟรี)
- Elementor (ฟรี)
- Happy Add-on ( ฟรี & Pro )
ประการแรก ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและเปิดใช้งานข้อกำหนดเบื้องต้นทั้งหมดบนเว็บไซต์ของคุณเรียบร้อยแล้ว
มาแสดงวิธีปรับแต่งหน้าร้านค้า WooCommerce ของคุณโดยใช้ Happy Addons
ขั้นตอนที่หนึ่ง: เปิดหน้าร้านค้าของคุณ
ไปที่หน้าร้านค้า WooCommerce จากแดชบอร์ด WordPress จากนั้นคลิกที่ แก้ไขด้วย Elementor
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/ZO04P7eBeUfumgA5.png)
หลังจากนั้นหน้า WooCommerce เริ่มต้นจะเปิดขึ้น และที่นี่เส้นทางการปรับแต่งร้านค้าของคุณเริ่มต้นขึ้น
![ผ้าใบ Elementor](/uploads/article/47500/hsdUZGlfowpSckP1.png)
ขั้นตอนที่สอง: ใช้วิดเจ็ต HappyAddons WooCommerce
เพื่อให้การปรับแต่งง่ายขึ้น เราจะใช้วิดเจ็ต Happy Add-on WooCommerce ที่น่าทึ่งสี่รายการ
- Product Grid:- คุณสามารถแสดงสินค้าของคุณในมุมมองกริดอย่างมีกำไรด้วย HappyAddons Pro Product Grid Widget
- Product Carousel:- วิดเจ็ต Product Carousel ของ WooCommerce ที่สมบูรณ์เพื่อดึงดูดความสนใจของลูกค้า
- Product Category Grid:- เหมาะสมที่สุดสำหรับการแสดงหมวดหมู่ผลิตภัณฑ์ WooCommerce
- Product Category Carousel:- คุณสามารถประชาสัมพันธ์สินค้าใน Carousels ตามหมวดหมู่เฉพาะด้วยความช่วยเหลือของ Product Category Carousel Widget เพื่อทำให้สินค้ามีผลมากขึ้น
หมายเหตุ: นี่คือคุณสมบัติระดับมืออาชีพทั้งหมดของ Happy Addons ดังนั้นหากคุณต้องการใช้บนไซต์ของคุณ คุณต้องอัปเกรดฟรีเป็นเวอร์ชันพรีเมียม
การใช้วิดเจ็ต Product Carousel
มาดูกันว่าคุณสามารถใช้วิดเจ็ต Product Carousel บนไซต์ WooCommerce ของคุณได้อย่างไร หากต้องการใช้วิดเจ็ต คุณต้องเลือกวิดเจ็ตและลาก-วางบนหน้าจอ
![](/uploads/article/47500/kUd3mAHR5FbkOxVu.png)
หลังจากเพิ่มวิดเจ็ตแล้ว คุณจะได้อินเทอร์เฟซแบบนี้
![ม้าหมุนผลิตภัณฑ์](/uploads/article/47500/uoKHd7vUVjrLGEcF.gif)
ที่นี่คุณจะได้รับสี่ตัวเลือก -
- เค้าโครง
- สอบถาม
- การตั้งค่าม้าหมุน
- และลิงค์กระดาษห่อ
ในเค้าโครง คุณสามารถเลือกสกินที่แตกต่างกันได้สองแบบ คลาสสิกและทันสมัย สลับเปิดหรือปิดตัวเลือกหากต้องการ และจัดตำแหน่งเนื้อหารูปภาพตามการออกแบบของคุณ
![การใช้วิดเจ็ต Product Carousel](/uploads/article/47500/GKuCvc30GsAq2Ial.png)
ตอนนี้คลิกที่ตัวเลือกคิวรีเพื่อปรับแต่งสิ่งต่างๆ เพิ่มเติม ที่นี่คุณสามารถแสดงสินค้าตามหมวดหมู่
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/hN2OtJxZe4OE2SdH.png)
นอกจากนี้ คุณยังสามารถเพิ่มฟีเจอร์แอนิเมชั่นบางอย่างให้กับงานออกแบบได้อีกด้วย ในการทำเช่นนั้น คุณต้องคลิกที่ Carousel Settings ตัวอย่างเช่น ตั้งค่าความเร็วของภาพเคลื่อนไหว สไลด์ ลูกศรสไลด์ เป็นต้น
![การใช้วิดเจ็ตแบบหมุนผลิตภัณฑ์](/uploads/article/47500/t04L7qrIIYUSu2B5.gif)
ในตอนท้าย คุณสามารถเพิ่มลิงก์ wrapper ให้กับงานออกแบบได้
อย่างไรก็ตาม คุณสามารถทำให้การออกแบบมีสไตล์โดยคลิกที่ปุ่ม สไตล์
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/SBWHwcSPHfOx9hj1.png)
หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับวิดเจ็ตแบบหมุนของผลิตภัณฑ์ คุณสามารถดูเอกสารอย่างเป็นทางการได้
การใช้ตารางประเภทผลิตภัณฑ์
ในทำนองเดียวกัน ให้เลือกวิดเจ็ตกริดประเภทผลิตภัณฑ์แล้ววางบนหน้าจอ
![วิดเจ็ตหมวดหมู่สินค้า](/uploads/article/47500/l8dg3Zrm625Tlx1o.png)
หลังจากเพิ่มวิดเจ็ตแล้ว คุณจะเห็นตัวอย่างหมวดหมู่ของคุณ นอกจากนี้ คุณสามารถใช้ตัวเลือกที่มีประโยชน์ทางด้านซ้ายของหน้าจอ
![การตั้งค่าหมวดหมู่สินค้า](/uploads/article/47500/5Xb6umjpStHHfAC2.png)
ถัดไป ปรับแต่งส่วนแบบสอบถามเพื่อเพิ่มคุณลักษณะเพิ่มเติมให้กับการออกแบบ ตัวอย่างเช่น คุณสามารถตั้งค่าคอลัมน์ สไตล์สกิน ขนาดภาพ เพิ่มภาพซ้อน ฯลฯ
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/YfAMThMJqD6RBLv4.png)
อย่างไรก็ตาม หากคุณไม่ต้องการแสดงหมวดหมู่ทั้งหมดที่นี่ คุณสามารถยกเว้นหรือรวมหมวดหมู่เหล่านี้ได้ ตรวจสอบว่าคุณแสดงหมวดหมู่ที่ถูกต้องแก่ผู้ใช้
![](https://s.stat888.com/img/bg.png)
![เค้าโครง](/uploads/article/47500/5drtghln53dPHUVY.png)
คลิกที่ปุ่มสไตล์ ที่นี่คุณจะมีสี่ตัวเลือก
- เค้าโครง : - เปลี่ยนการออกแบบเค้าโครง ความสูง น้ำหนัก ช่องว่างระหว่างแถว
- กล่องรายการ :- คุณสามารถเปลี่ยนความสูง น้ำหนัก สี และอื่นๆ ของรูปภาพได้
- เนื้อหา :- เพื่อเปลี่ยนสีเนื้อหา พื้นหลัง ความสูง น้ำหนัก ระยะห่าง ฯลฯ
- โหลดปุ่มเพิ่มเติม :- จากที่นี่ คุณสามารถปรับแต่ง โหลดปุ่มหมวดหมู่เพิ่มเติม สีตัวอักษร รูปแบบตัวอักษร สีพื้นหลัง ฯลฯ
![](/uploads/article/47500/WDTguAvLb6aofpnH.png)
อย่างไรก็ตาม หากคุณต้องการใช้วิดเจ็ตนี้เพิ่มเติมบนไซต์ WordPress ของคุณ คุณสามารถดูเอกสารอย่างเป็นทางการของเราได้ที่นี่
วิดเจ็ตม้าหมุนหมวดหมู่สินค้า
เลือกวิดเจ็ตแล้วลากไปยังพื้นที่ที่เลือก
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/h0YZRLBwAj0JWBHt.png)
หลังจากนั้นตัวเลือกทั้งหมดจะพร้อมใช้งานสำหรับคุณ วิดเจ็ตนี้เกือบจะเหมือนกับวิดเจ็ตแบบหมุนของผลิตภัณฑ์ หมวดหมู่สินค้ากำลังแสดงหมวดหมู่และวงล้อสินค้ากำลังแสดงสินค้า
![การตั้งค่าวิดเจ็ตวงล้อผลิตภัณฑ์](/uploads/article/47500/zV45bMsIm0wrzUJ9.gif)
หลังจากที่คุณคลิกที่ปุ่ม Layout คุณสามารถตั้งค่าสกิน ขนาดภาพ จำนวนนับ และกำหนดการซ้อนภาพ ดังนั้นหากคุณปรับใช้ได้อย่างถูกต้องก็จะดูสวยงามและน่าดึงดูดยิ่งขึ้น
![การตั้งค่าวงล้อ](/uploads/article/47500/6vKgkjy8TNM8EeJr.png)
คลิกที่ข้อความค้นหาเพื่อแยกหรือรวมหมวดหมู่ในภาพหมุน นอกจากนี้คุณยังสามารถตั้งค่าม้าหมุนตามลำดับ
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/aOOKstQf6CiQQn2a.png)
จากนั้นคลิกที่ การตั้งค่าวงล้อ เพื่อเปลี่ยนความเร็วของภาพเคลื่อนไหว ตัวเลือกเล่นอัตโนมัติ รูปแบบการนำทาง และสไลด์ และสิ่งนี้จะช่วยให้คุณปรับแต่งหน้าร้านค้า WooCommerce เพื่อแสดงหมวดหมู่ผลิตภัณฑ์ที่คุณต้องการมากที่สุดต่อผู้ใช้ของคุณ
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/Oq3F3UnSwz6fGk7L.png)
อย่างไรก็ตาม หากคุณต้องการทราบหลักเกณฑ์โดยละเอียดของหมวดหมู่ผลิตภัณฑ์แบบหมุน คุณสามารถตรวจสอบเอกสารอย่างเป็นทางการของเราได้ตลอดเวลา
วิดเจ็ตตารางผลิตภัณฑ์
หากคุณประสบปัญหาในการแสดงสินค้าของคุณในตำแหน่งกริดที่สมบูรณ์แบบบนหน้าร้านค้า WooCommerce? ได้ คุณสามารถทำได้โดยใช้วิดเจ็ต Product Grid
โดยคลิกที่วิดเจ็ตแล้วลากไปยังพื้นที่ที่เลือกเพื่อเริ่มใช้วิดเจ็ต ดังนั้น เมื่อคุณเพิ่มวิดเจ็ต ผลิตภัณฑ์ทั้งหมดจะถูกเพิ่มเป็นมุมมองตาราง
และคุณจะมีตัวเลือกเค้าโครงเพื่อปรับแต่ง สินค้าทั้งหมดจะถูกเพิ่มโดยอัตโนมัติบนหน้าจอ ที่นี่คุณสามารถแสดงหน้าราคา คะแนน ป้าย ปุ่มรถเข็น และปุ่มมุมมองด่วน
![วิดเจ็ตตารางผลิตภัณฑ์](/uploads/article/47500/1uthA0nGiqutJLLX.png)
คุณสามารถแสดงสินค้าที่คุณต้องการและเพิ่มหรือยกเว้นสินค้าที่คุณต้องการได้
![แบบสอบถามตารางผลิตภัณฑ์](/uploads/article/47500/NpxQE2qo93DkuB8O.png)
ในการตั้งค่าล่วงหน้าของวิดเจ็ตนี้ คุณสามารถปรับแต่งปุ่มหยิบใส่ตะกร้า ปุ่มดูสินค้าด่วน และแนบลิงก์ได้
![การตั้งค่าล่วงหน้าของตารางผลิตภัณฑ์](/uploads/article/47500/fUyRjIiZkNPIU58Y.png)
สุดท้าย คุณสามารถกำหนดสไตล์ให้กับงานออกแบบของคุณโดยใช้ปุ่ม สไตล์ ที่นี่คุณสามารถปรับแต่งป้าย เนื้อหา รูปภาพ รถเข็น และมุมมองด่วน ฯลฯ
![ปรับแต่งหน้าร้านค้า WooCommerce](/uploads/article/47500/3mi1Hybv2N9otd8V.gif)
นี่คือวิธีที่วิดเจ็ต WooCommerce ของ Happy Add-on ช่วยในการปรับแต่งหน้าร้านค้า ดังนั้นใช้เวลาของคุณและทำตามขั้นตอนอย่างระมัดระวังเพื่อนำสิ่งเหล่านี้ไปใช้ในหน้าร้านค้า WooCommerce ของคุณ
![ส่วนเสริมองค์ประกอบที่มีความสุข](/uploads/article/47500/KNF2CoOPyn1HdTQ3.png)
ตัวอย่างสุดท้ายของ WooCommerce Store
![](/uploads/article/47500/rcnVOUDn2emFsic8.gif)
กระบวนการที่เราแสดงไว้ข้างต้นนั้นใช้สำหรับหน้าร้านค้าผู้ขายรายเดียว แต่ถ้าต้องการออกแบบเว็บไซต์ที่มีผู้ค้าหลายรายโดยใช้ Dokan ล่ะก็ คุณสามารถดูบทความต่อไปนี้ได้
สร้างเว็บไซต์ตลาดซื้อขายผลิตภัณฑ์ดูแลความงามของคุณเองโดยใช้ Dokan
ข้อผิดพลาดที่คุณควรหลีกเลี่ยงระหว่างการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ของคุณ
![ข้อผิดพลาดของอีคอมเมิร์ซ](/uploads/article/47500/K9E3UCilzz93C92z.png)
ไม่มีใครนอกจากคุณเท่านั้นที่จะมั่นใจได้ว่าประสิทธิภาพของไซต์ของคุณจะแข็งแกร่งหรือต่ำเท่าที่คุณต้องการ โดยทั่วไป เราทุกคนต้องการให้เว็บไซต์ของเราดูเป็นมืออาชีพ ดูดี และมีส่วนร่วม แต่สิ่งนี้อาจไม่เกิดขึ้นง่ายๆ
นี่คือเหตุผลที่เราทุกคนจำเป็นต้องตัดสินใจอย่างถูกต้องก่อนที่จะทำการเปลี่ยนแปลงใดๆ กับเว็บไซต์ของคุณ
แต่ในขณะที่คิดเกี่ยวกับการเพิ่มการเปลี่ยนแปลงใดๆ ในเว็บไซต์ พวกเราหลายคนทำผิดพลาดโง่ๆ บางอย่าง – ความผิดพลาดของตลาดอีคอมเมิร์ซ เพราะเราทุกคนรีบร้อน หรือเราแค่ลืมปฏิบัติตามโครงสร้างที่เหมาะสม โดยเฉพาะการปรับแต่งร้านค้าอีคอมเมิร์ซ
เพื่อช่วยคุณ ต่อไปนี้เป็นข้อผิดพลาดที่สำคัญบางประการของตลาดกลางที่เราคิดว่าคุณควรทราบ และสิ่งเหล่านี้สามารถทำลายความพยายามทั้งหมดของคุณอย่างไม่ต้องสงสัยและขัดขวางการเติบโตของธุรกิจของคุณ
มาดูข้อผิดพลาดทั่วไปที่คุณต้องหลีกเลี่ยงก่อนปรับแต่งหน้าร้านค้า WooCommerce ของคุณ:-
- อัปเดต WordPress ไม่ทันเวลา
- ใช้ WooCommerce เวอร์ชันเก่ากว่า
- รักษาปลั๊กอินที่ล้าสมัย
- ไม่ได้ใช้ใบรับรอง SSL
- “ผู้ดูแลระบบ” เป็นชื่อผู้ใช้ของคุณ
- การใช้ธีม WordPress “ฟรี”
- หมวดหมู่และแท็กที่ไม่เกี่ยวข้องมากเกินไป
- ไม่เน้นประสบการณ์ของผู้ใช้
- ร้านค้าไม่ได้รับการปรับให้เหมาะกับการตอบสนองมือถือ
- ลืมการวิเคราะห์ของ Google
นี่คือข้อผิดพลาดที่คุณต้องหลีกเลี่ยงก่อนนั่งปรับแต่งหน้าร้านค้า WooCommerce ดังนั้นหากคุณต้องการหลีกเลี่ยงความผิดพลาดราคาแพงหรือต้องการให้ธุรกิจอีคอมเมิร์ซของคุณพังทลาย ข้อผิดพลาดเหล่านี้สามารถช่วยคุณได้อย่างแน่นอน
คำสุดท้าย
เย้ กระทู้จบแล้ว เราพยายามอย่างดีที่สุดเพื่อแสดงวิธีที่ง่ายที่สุดในการปรับแต่งหน้าร้านค้า WooCommerce ของคุณ และวิดเจ็ต WooCommerce ของ Happy Addons นั้นใช้งานง่ายอย่างไม่ต้องสงสัย
ดังนั้น หากคุณไม่พอใจกับรูปลักษณ์ของหน้าผลิตภัณฑ์ที่มีอยู่ และต้องการให้มีการเปลี่ยนแปลงในหน้าผลิตภัณฑ์ของคุณ คุณสามารถลองใช้คุณสมบัติเหล่านี้บนไซต์ของคุณและทำตามขั้นตอนที่เราแสดงให้เห็น