คุณต้องการเรียนรู้วิธีสร้างหน้าร้านค้าส่วนบุคคลหรือไม่? WooCommerce ด้วย Elementor?

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

ดูเพิ่มเติม: วิธีการติดตั้ง Elementor บน WordPress

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

ในบทความนี้ เราจะแสดงวิธีสร้างหน้าร้านค้า WooCommerce แบบกำหนดเองโดยใช้คุณลักษณะตัวสร้าง WooCommerce ของ Elementor Pro

หน้าร้านค้าเองเป็นหนึ่งในหน้าเริ่มต้นใน WooCommerce หน้านี้ทำหน้าที่เป็นตู้แสดงสินค้าของคุณ คุณสามารถเข้าถึงหน้านี้ได้โดยไปที่ yoursite.com/store. ตามค่าเริ่มต้น หน้าร้านค้า WooCommerce จะแสดงเฉพาะผลิตภัณฑ์ WooCommerce

ด้วยการสร้างหน้าร้านค้าแบบกำหนดเองโดยใช้ Elementor Pro คุณสามารถเพิ่มองค์ประกอบเพื่อทำให้หน้าร้านของคุณน่าสนใจยิ่งขึ้น

วิธีสร้างหน้าที่กำหนดเองของร้านค้า WooCommerce ด้วย Elementor

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

ในตัวอย่างนี้ เราใช้อันหลัง

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

อ่าน: วิธีการนำเข้าหรือส่งออกโมเดลใน Elementor

โปรดทราบว่าคุณจะพบวิดเจ็ต Products ได้เมื่อติดตั้งและเปิดใช้งานปลั๊กอิน WooCommerce เท่านั้น

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

ตั้งชื่อโมเดลของคุณและคลิกที่ปุ่ม สร้างแบบจำลอง

วิธีสร้างหน้าที่กำหนดเองสำหรับร้านค้า WooCommerce ด้วย Elementor

มีเทมเพลตหน้าร้านค้าแบบกำหนดเองสามแบบที่คุณสามารถเลือกได้ในกรณีที่คุณต้องการสร้างหน้าร้านค้าแบบกำหนดเองจากเทมเพลต หากคุณต้องการสร้างหน้าร้านค้าแบบกำหนดเองตั้งแต่เริ่มต้น คุณสามารถปิดไลบรารีเทมเพลตได้

ดูเพิ่มเติมที่: วิธีใช้ Color Sampler ใน Elementor

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

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

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

  • แบบสอบถามปัจจุบัน - แบบสอบถามปัจจุบัน
  • สินค้าล่าสุด - สินค้าล่าสุด
  • ขาย - ขาย
  • โดดเด่น - โดดเด่น
  • การเลือกด้วยตนเอง - การเลือกด้วยตนเอง

คุณยังสามารถกำหนดลำดับการแสดงสินค้าหรือยกเว้นบางรายการได้

วิธีสร้างหน้าที่กำหนดเองสำหรับร้านค้า WooCommerce ด้วย Elementor

หากต้องการกำหนดจำนวนคอลัมน์และแถว คุณสามารถเปิดบล็อก คอนเทนต์ ใต้แท็บ เนื้อหา. จากบล็อกนี้คุณยังสามารถเปิดใช้งาน การให้เลขหน้า.

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

อ่าน: วิธีใช้ตัวเลือกสีใน Elementor

เมื่อคุณแก้ไขหน้าเสร็จแล้ว คุณสามารถคลิกปุ่ม Publier ที่ด้านล่างของแผงการตั้งค่า

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

วิธีสร้างหน้าที่กำหนดเองสำหรับร้านค้า WooCommerce ด้วย Elementor

จนถึงตอนนี้ คุณได้สร้างหน้าร้านค้า WooCommerce ที่กำหนดเองสำเร็จโดยใช้ Elementor Pro ไปได้คะ ที่เว็บไซต์.com/store . ของคุณ เพื่อตรวจสอบผลลัพธ์

ปรับแต่งวิดเจ็ตผลิตภัณฑ์

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

  • ผลิตภัณฑ์

คุณสามารถเปิดบล็อกนี้เพื่อกำหนดช่องว่างระหว่างคอลัมน์และแถว จากบล็อกนี้ คุณยังสามารถตั้งค่าตัวพิมพ์ (ตระกูลแบบอักษร ขนาดแบบอักษร ฯลฯ) เช่นเดียวกับสีข้อความขององค์ประกอบผลิตภัณฑ์ เช่น ชื่อผลิตภัณฑ์ ราคาผลิตภัณฑ์ คะแนนของผลิตภัณฑ์ ผลิตภัณฑ์ ฯลฯ…. คุณยังสามารถกำหนดเส้นขอบของภาพสินค้า

  • กล่อง

ในบริบทนี้ Box หมายถึงคอนเทนเนอร์ของแต่ละผลิตภัณฑ์ คุณสามารถเปิดบล็อก กล่อง เพื่อกำหนดความกว้างเส้นขอบของคอนเทนเนอร์ รัศมีเส้นขอบ เงาของกล่อง, สีพื้นหลัง, สีเส้นขอบ ฯลฯ

  • การให้เลขหน้า

หากคุณเปิดใช้งานตัวเลือก การให้เลขหน้า จากบล็อก เนื้อหา, คุณสามารถเปิดบล็อก การให้เลขหน้า ใต้แท็บ สไตล์ เพื่อปรับแต่งการแบ่งหน้า คุณสามารถตั้งค่าต่างๆ เช่น การเว้นวรรค สีเส้นขอบ สีพื้นหลัง ฯลฯ

คุณยังสามารถกำหนดพารามิเตอร์ต่างๆ ในแต่ละสถานะได้ (ปกติ ชี้ตำแหน่ง และใช้งานอยู่)

  • ขายแฟลช

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

คุณสามารถเปิดบล็อก ขายแฟลช เพื่อปรับแต่งตราการขาย คุณสามารถกำหนดองค์ประกอบต่างๆ เช่น สีข้อความ สีพื้นหลัง การออกแบบตัวอักษร รัศมีเส้นขอบ ขนาด (ความกว้างและความสูง) ระยะทาง ฯลฯ….

ในที่สุด

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

อ่าน: วิธีเพิ่มตัวแบ่งเพื่อสร้างส่วนใน Elementor

จนถึงเวอร์ชัน 3.2.2 Elementor Pro อนุญาตให้คุณสร้าง Custom Shop Page, Custom Single Product Page และ Custom Product Archive Pages แต่ Elementor ประกาศว่าใน Elementor Pro เวอร์ชันถัดไป คุณจะสามารถสร้างหน้ารถเข็นแบบกำหนดเอง หน้าชำระเงินแบบกำหนดเอง และหน้าบัญชีลูกค้าที่กำหนดเองได้

รับ Elementor Pro ทันที!

สรุป

ที่นี่ ! บทความนี้จะแสดงวิธีสร้างหน้าที่กำหนดเองสำหรับร้านค้า WooCommerce ด้วย Elementor. หากคุณมีข้อสงสัยในการเดินทาง f onแจ้งให้เราทราบใน ความเห็น.

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...