วิธีแก้ไขหน้าร้านค้า WooCommerce ด้วย Elementor

เผยแพร่แล้ว: 2022-01-26

หากคุณมีร้าน WooCommerce และต้องการขยายธุรกิจของคุณ เราอยู่ที่นี่เพื่อแสดงวิธีแก้ไขหน้าร้านค้า WooCommerce ด้วย Elementor

ในบทความนี้ เราจะแสดงขั้นตอนการแก้ไขหน้าร้านค้า WooCommerce ผ่านขั้นตอนง่ายๆ ไม่กี่ขั้นตอน คุณต้องอยู่กับเราจนจบเพื่อเรียนรู้กระบวนการ

ฉันคิดว่าคุณได้ติดตั้ง WooCommerce และตั้งค่าหน้าร้านค้าสำหรับธุรกิจของคุณแล้ว ให้แสดงขั้นตอนการแก้ไขหน้านี้

มีขั้นตอนง่ายๆ ในการแก้ไขหน้าร้านค้า คุณไม่ต้องกังวลเกี่ยวกับเรื่องนี้

ขั้นตอนได้รับด้านล่าง:

ขั้นตอนที่ 1: สร้างเทมเพลตผลิตภัณฑ์เดียว

ขั้นตอนที่ 2: เลือกเทมเพลตหน้าสินค้าที่ออกแบบไว้ล่วงหน้า หรือสร้างตั้งแต่เริ่มต้น

ขั้นตอนที่ 3: เพิ่มวิดเจ็ตผลิตภัณฑ์ที่จะสร้างเพจของคุณ

ขั้นตอนที่ 4: ดูตัวอย่างหน้าผลิตภัณฑ์ด้วยผลิตภัณฑ์อื่น

ขั้นตอนที่ 5: ตั้งค่าเงื่อนไข

มาเริ่มกันเลย!

ขั้นตอนที่ 1: สร้างเทมเพลตผลิตภัณฑ์เดียว

วิธีแก้ไขหน้าร้านค้า WooCommerce ด้วย Elementor

เริ่มออกแบบเทมเพลตผลิตภัณฑ์เดียวใน Elementor ทำตามขั้นตอนที่คล้ายคลึงกันกับการสร้างเทมเพลตเดียวปกติ

ในการดำเนินการนี้ คุณต้องไปที่แดชบอร์ด WordPress>เทมเพลต>เพิ่มใหม่ จากนั้นคุณต้องเลือก หน้าเดียว จากตัวเลือกเทมเพลตและคลิกที่ปุ่มสร้าง

ขั้นตอนที่ 2: เลือกเทมเพลตหน้าสินค้าที่ออกแบบไว้ล่วงหน้า หรือสร้างตั้งแต่เริ่มต้น

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

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

ใช้ Elementor เพื่อควบคุมการปรับแต่งทั้งหมดสำหรับเค้าโครงและรูปแบบของหน้าผลิตภัณฑ์

มีตัวเลือกอื่นในการสร้างตั้งแต่เริ่มต้น ในแผงแก้ไข คุณสามารถดูวิดเจ็ตพิเศษสำหรับผลิตภัณฑ์ได้

ขั้นตอนที่ 3: เพิ่มวิดเจ็ตผลิตภัณฑ์ที่จะสร้างเพจของคุณ

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

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

คุณมีอิสระเต็มที่ในการเล่นเลย์เอาต์และย้ายองค์ประกอบไปรอบๆ

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

ขั้นตอนที่ 4: ดูตัวอย่างหน้าผลิตภัณฑ์ด้วยผลิตภัณฑ์อื่น

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

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

ขั้นตอนที่ 5: ตั้งค่าเงื่อนไข

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

คลิกที่เผยแพร่ – และผลิตภัณฑ์เดียวของคุณพร้อมใช้งานแล้ว!

ทุกอย่างเสร็จเรียบร้อย! คุณแก้ไขหน้าร้านค้า WooCommerce ของคุณสำเร็จโดยใช้ wsdgets ตอนนี้คุณสามารถคาดหวังผู้เยี่ยมชมเว็บไซต์ของคุณมากขึ้นกว่าเดิม

บทสรุป

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

มีธีม WooCommerce มากมายที่คุณสามารถดูและดูตัวอย่างเว็บไซต์ WooCommerce เพื่อเป็นแรงบันดาลใจ

ขอบคุณที่อยู่กับเรา ขอให้เป็นวันที่ดี.