วิธีปรับแต่งหน้าร้านค้า WooCommerce (ไม่มีรหัส)

กำลังค้นหาวิธีปรับแต่งหน้าร้านค้า WooCommerce ใช่ไหม ในคำแนะนำทีละขั้นตอนนี้ คุณจะได้เรียนรู้สามวิธีที่ไม่ต้องใช้โค้ด 100% ในการปรับแต่งหน้าร้านค้าของร้านค้าของคุณ

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

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

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

ด้านล่างนี้ คุณจะได้เรียนรู้ สามวิธีที่แตกต่างกัน ในการปรับแต่งหน้าร้านค้า WooCommerce โดยไม่ต้องใช้โค้ด โดยใช้ธีม Botiga ของเราเป็นตัวอย่าง:

• ตัวเลือกในตัวใน Customizer ธีม WordPress ดั้งเดิม
• ตัวแก้ไขบล็อก WordPress ดั้งเดิม
• ปลั๊กอินตัวสร้างเพจ Elementor (วิธีนี้จะช่วยให้คุณใช้ Elementor เวอร์ชันฟรีได้)

หมายเหตุ — หากคุณยังไม่ได้สร้างร้านค้า WooCommerce คุณสามารถตรงไปที่คำแนะนำของเราเกี่ยวกับวิธีการสร้างร้านค้า WooCommerce เมื่อคุณมีร้านค้าที่ใช้งานได้แล้ว ให้กลับมาที่นี่เพื่อเริ่มปรับแต่งหน้าร้าน!

บทนำโดยย่อเกี่ยวกับการปรับแต่งหน้าร้านค้า WooCommerce

หากคุณต้องการปรับแต่งหน้าร้านค้า WooCommerce ของคุณอย่างเต็มที่ คุณจะต้องเลือกธีม WooCommerce ที่สร้างขึ้นเพื่อให้คุณมีความยืดหยุ่น

แม้ว่าหลักการทั่วไปที่คุณเรียนรู้ในบทช่วยสอนนี้สามารถใช้กับธีม WooCommerce ได้ แต่เราจะใช้ธีม Botiga ด้วยเหตุผลบางประการ:

• มีตัวเลือกโดยละเอียดใน WordPress Customizer เพื่อให้คุณปรับแต่งหน้าร้านค้าโดยที่คุณไม่ต้องออกแบบทุกอย่างตั้งแต่เริ่มต้น
• หากคุณ ต้องการ ออกแบบทุกอย่างตั้งแต่เริ่มต้น Botiga Pro มีฟีเจอร์ในตัวที่ให้คุณปรับแต่งทุกอย่างโดยใช้ตัวแก้ไขบล็อก WordPress ดั้งเดิมหรือ Elementor เวอร์ชันฟรี

นอกเหนือจากตัวเลือกการปรับแต่งมากมาย Botiga ยังเป็นหนึ่งในธีม WooCommerce ที่เร็วที่สุด ดังนั้นมันจะทำให้ร้านค้าของคุณพร้อมสำหรับความสำเร็จในด้านอื่นๆ ด้วย

จากที่กล่าวมา คุณจะยังคงพบว่าบทช่วยสอนนี้มีประโยชน์หากคุณใช้ธีม WooCommerce อื่น

ตัวอย่างเช่น ธีม WooCommerce ส่วนใหญ่มีตัวเลือกบางอย่างให้คุณใน Customizer เป็นอย่างน้อย

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

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Botiga คุณสามารถไปที่หน้าธีมของ Botiga

วิธีที่ 1 – การปรับแต่งหน้าร้านค้าด้วย WordPress Customizer

สำหรับคนส่วนใหญ่ วิธีที่ง่ายที่สุดในการแก้ไขหน้าร้านค้า WooCommerce คือการใช้ตัวเลือกธีมของคุณใน WordPress Customizer

ด้วย Botiga คุณจะได้รับตัวเลือกโดยละเอียดเพื่อช่วยคุณปรับแต่งเลย์เอาต์ สไตล์ และเนื้อหาของหน้าร้านค้าของร้านค้าของคุณ

ธีมอื่นอาจเสนอตัวเลือกไม่มากนัก แต่คุณควรจะพบตัวเลือกเหล่านี้เป็นอย่างน้อยใน Customizer

ต่อไปนี้คือวิธีใช้ตัวเลือกของธีม Botiga เพื่อปรับแต่งหน้าร้านค้า WooCommerce

1. เลือกสิ่งที่จะแสดงบนหน้าร้านค้าของคุณ

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

หากต้องการเข้าถึงการตั้งค่าเหล่านี้ ให้เปิด WordPress Customizer โดยไปที่ ลักษณะที่ปรากฏ → ปรับแต่ง ในแดชบอร์ด WordPress ของคุณ

จากนั้นเลือก ทั่วไป ภายใต้ WooCommerce :

ตอนนี้ ใช้ดรอปดาวน์ แสดงหน้าร้านค้า เพื่อเลือกว่าจะแสดงเฉพาะสินค้า เฉพาะหมวดหมู่ หรือทั้งสองอย่าง

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

2. เปิดการตั้งค่าหน้าร้านค้าใน WordPress Customizer

จากนั้น กลับไปที่รายการเมนูหลักใน Customizer และเลือกตัวเลือก Product Catalog เพื่อปรับแต่งหน้าร้านค้าของคุณอย่างเต็มที่ยิ่งขึ้น

ตอนนี้คุณจะเห็นตัวเลือกมากมายในแถบด้านข้าง ซึ่งแบ่งออกเป็นสองแท็บ — ทั่วไป และ สไตล์ :

• ทั่วไป – ควบคุมเค้าโครงและเนื้อหาขององค์ประกอบในหน้าร้านค้าของคุณ
• รูปแบบ – ปรับการออกแบบองค์ประกอบในหน้าร้านค้าของคุณ เช่น เปลี่ยนสี/แบบอักษร หรือเพิ่มเส้นขอบ

3. ปรับแต่งเค้าโครงทั่วไป

ในการเริ่มต้น ให้ขยายการตั้งค่า เค้าโครง เพื่อปรับเค้าโครงทั่วไปของหน้าร้านค้าของคุณ

ก่อนอื่น คุณจะต้องเลือกประเภทเค้าโครง ซึ่งมีตัวเลือกทั่วไปสามตัวเลือก:

• ตาราง
• รายการ
• วัสดุก่อสร้าง

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

ด้านล่างนี้ คุณสามารถเลือกรูปแบบส่วนหัวที่จะใช้ในหน้าร้านค้าของคุณและเนื้อหาที่จะรวมไว้ในส่วนหัว เช่น จะแสดงหมวดหมู่สินค้าหรือไม่

ยิ่งไปกว่านั้นในเมนู Customizer คุณจะได้รับตัวเลือกในการควบคุมเค้าโครงแถบด้านข้าง องค์ประกอบของหน้า และการแบ่งหน้า:

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

4. ปรับแต่ง Product Card

ถัดไป คุณสามารถเปิดส่วน Product Card เพื่อปรับแต่งการแสดงสินค้าแต่ละรายการในหน้าร้านค้า

ขั้นแรก คุณสามารถเลือกเลย์เอาต์การ์ดต่างๆ และตำแหน่งปุ่มหยิบใส่ตะกร้าได้

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

ยิ่งไปกว่านั้นในการตั้งค่า คุณสามารถเลือกตัวเลือกที่สำคัญอื่นๆ ได้:

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

5. ปรับแต่งแท็กการขายและหมวดหมู่

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

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

การตั้งค่า หมวดหมู่ ช่วยให้คุณควบคุมเค้าโครงของการ์ดหมวดหมู่ได้ หากคุณเลือกที่จะแสดงหมวดหมู่ในขั้นตอนที่ 1 ของคู่มือนี้:

6. ปรับตัวเลือกสไตล์ตามต้องการ

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

นี่เป็นที่ที่คุณสามารถเปลี่ยนสี ปรับฟอนต์ เพิ่มเส้นขอบ และอื่นๆ ได้

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

7. สำรวจตัวเลือก Customizer อื่นๆ

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

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

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

8. เผยแพร่เค้าโครงหน้าร้านค้าของคุณ

เมื่อคุณพอใจกับรูปลักษณ์ของหน้าร้านค้าของคุณแล้ว สิ่งที่คุณต้องทำคือคลิกปุ่ม เผยแพร่ เพื่อทำให้หน้าร้านค้าของคุณปรากฏ

วิธีที่ 2 – การปรับแต่งหน้าร้านค้าด้วย WordPress Block Editor

สำหรับร้านค้าส่วนใหญ่ ตัวเลือก Customizer ในตัวของ Botiga นั้นมีความยืดหยุ่นเพียงพอในการสร้างหน้าร้านค้าแบบกำหนดเองใน WooCommerce

อย่างไรก็ตาม คุณอาจมีบางสถานการณ์ที่คุณต้องการสร้างการออกแบบที่กำหนดเองอย่างแท้จริงตั้งแต่เริ่มต้น

เพื่อช่วยให้คุณบรรลุเป้าหมายนี้โดยไม่ต้องใช้โค้ด คุณสามารถใช้คุณสมบัติ ตัวสร้างเทมเพลต ใน Botiga Pro เพื่อปรับแต่งหน้าร้านค้าโดยใช้ตัวแก้ไขบล็อก WordPress หรือ Elementor (แม้แต่เวอร์ชันฟรี)

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

1. เปิดใช้งานโมดูลตัวสร้างเทมเพลต Botiga Pro

หากต้องการเปิดใช้ตัวสร้างเทมเพลต ให้ไปที่ ลักษณะที่ปรากฏ → แดชบอร์ดธีม → คุณลักษณะของธีม

จากนั้น เลื่อนลงและเปิดใช้งานโมดูล ตัวสร้างเทมเพลต

คุณจะต้องใช้ Botiga Pro เพื่อเปิดใช้งานโมดูลนี้ — หากคุณยังไม่มี คุณสามารถซื้อได้โดยคลิกที่นี่

2. สร้างเค้าโครงหน้าร้านค้าใหม่

จากนั้นไปที่ ลักษณะ → เทมเพลต Botiga → เพิ่มเทมเพลต เพื่อสร้างเทมเพลตหน้าร้านค้าใหม่

ในอินเทอร์เฟซเทมเพลต ให้ตั้งชื่อ (เช่น “หน้าร้านค้า”) และเลือก แค็ตตาล็อกร้านค้า เป็นประเภทเทมเพลต

3. ออกแบบหน้าร้านค้าของคุณโดยใช้บล็อก

ตอนนี้คุณสามารถใช้ตัวแก้ไขเพื่อออกแบบเค้าโครงหน้าร้านค้าของคุณโดยใช้บล็อก

คุณสามารถใช้บล็อก WordPress ที่มีอยู่ (หรือบล็อกจากปลั๊กอินอื่น ๆ )

Botiga ยังเพิ่มบล็อก WooCommerce ของตัวเองสำหรับเนื้อหาไดนามิกที่สำคัญเช่นรายละเอียดที่เก็บถาวรของร้านค้าและรายละเอียดสินค้า

หากต้องการแสดงรายการผลิตภัณฑ์บางประเภท คุณสามารถใช้บล็อก Product Query

ในตอนแรก การเพิ่มบล็อก Product Query จะแสดงตารางของผลิตภัณฑ์ของคุณ

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

หากต้องการรายละเอียดเพิ่มเติม โปรดดูวิดีโอนี้ด้วย:

4. เผยแพร่เทมเพลตของคุณ

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

เมื่อคุณเปิดหน้าร้านค้าของร้านค้าที่ส่วนหน้า คุณควรเห็นเทมเพลตของหน้าร้านค้าที่คุณกำหนดเอง

วิธีที่ 3 – การปรับแต่งหน้าร้านค้าด้วยปลั๊กอิน Elementor

หากคุณต้องการใช้ Elementor แทนตัวแก้ไขบล็อก คุณสามารถทำตามแนวทางที่คล้ายกันเพื่อปรับแต่งหน้าร้านค้า WooCommerce

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

คุณสามารถบรรลุสิ่งนี้ได้เนื่องจาก Botiga Pro เพิ่มวิดเจ็ต Elementor ที่กำหนดเองเพื่อให้คุณสามารถตั้งค่าหน้าร้านค้าของคุณได้

จากที่กล่าวมา Botiga Pro ยังคงเข้ากันได้กับ Elementor Pro อย่างสมบูรณ์ ดังนั้นหากคุณมีใบอนุญาต Elementor Pro อยู่แล้ว คุณยังคงได้รับประโยชน์จากฟังก์ชันการออกแบบพิเศษทั้งหมดที่เพิ่มเข้ามา

ต่อไปนี้เป็นวิธีแก้ไขหน้าร้านค้า WooCommerce ด้วย Elementor และ Botiga

1. เปิดใช้งานโมดูลตัวสร้างเทมเพลต Botiga Pro

หากต้องการเปิดใช้ตัวสร้างเทมเพลต ให้ไปที่ ลักษณะที่ปรากฏ → แดชบอร์ดธีม → คุณลักษณะของธีม

จากนั้น เลื่อนลงและเปิดใช้งานโมดูล ตัวสร้างเทมเพลต

คุณจะต้องใช้ Botiga Pro เพื่อเปิดใช้งานโมดูลนี้ — หากคุณยังไม่มี คุณสามารถซื้อได้โดยคลิกที่นี่

2. สร้างเค้าโครงหน้าร้านค้าใหม่และเปิดใช้ Elementor

จากนั้นไปที่ ลักษณะ → เทมเพลต Botiga → เพิ่มเทมเพลต เพื่อสร้างเทมเพลตหน้าร้านค้าใหม่

ในอินเทอร์เฟซเทมเพลต:

1. ตั้งชื่อเป็นการภายใน — เช่น “หน้าร้านค้า”
2. เลือก Shop Catalog เป็นประเภทเทมเพลต
3. คลิกปุ่ม บันทึกฉบับร่าง เพื่อบันทึกลงในฐานข้อมูล (ซึ่งมีประโยชน์สำหรับการใช้ Elementor)

เมื่อคุณทำเสร็จแล้ว คุณสามารถคลิกปุ่ม แก้ไขด้วย Elementor เพื่อเปิดอินเทอร์เฟซ Elementor

3. ใช้วิดเจ็ต Botiga เพื่อสร้างการออกแบบหน้าร้านค้าของคุณ

ตอนนี้ คุณสามารถใช้อินเทอร์เฟซ Elementor แบบปกติเพื่อออกแบบหน้าร้านค้าของคุณได้แล้ว

เพื่อช่วยคุณตั้งค่าการออกแบบด้วย Elementor เวอร์ชันฟรี Botiga ได้เพิ่มวิดเจ็ตของตัวเองในส่วน Botiga WooCommerce

สำหรับหน้าร้านค้า วิดเจ็ตที่สำคัญที่สุดคือวิดเจ็ต Product Query ซึ่งช่วยให้คุณแสดงรายการสินค้าบางส่วน/ทั้งหมดของคุณ

นอกจากนี้ยังมีวิดเจ็ตที่มีประโยชน์อื่นๆ เช่น ชื่อไฟล์เก็บถาวร คำอธิบายไฟล์เก็บถาวร และวิดเจ็ตที่มีป้ายกำกับไฟล์เก็บถาวรอื่นๆ

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

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

นอกเหนือจากการใช้วิดเจ็ต Botiga WooCommerce ในการออกแบบหน้าร้านค้าของคุณแล้ว คุณยังมีอิสระที่จะใช้วิดเจ็ต Elementor อื่น ๆ รวมถึงวิดเจ็ตจากส่วนเสริมของ Elementor บุคคลที่สาม

4. เผยแพร่หน้าร้านค้าของคุณ

เมื่อคุณพอใจกับการออกแบบหน้าร้านค้าของคุณแล้ว ให้คลิกปุ่ม เผยแพร่ ใน Elementor เพื่อให้ใช้งานได้จริง

เมื่อคุณเผยแพร่แล้ว คุณสามารถเปิดหน้าร้านของคุณที่ส่วนหน้า และคุณควรเห็นการออกแบบที่กำหนดเองที่คุณสร้างด้วย Elementor

สรุป: สร้างหน้าร้านค้า WooCommerce แบบกำหนดเองวันนี้

สรุปคำแนะนำของเราเกี่ยวกับวิธีปรับแต่งหน้าร้านค้า WooCommerce โดยไม่ต้องใช้รหัสใดๆ

สำหรับคนส่วนใหญ่ ตัวเลือกในตัวของ Botiga ใน Customizer นั้นมีความยืดหยุ่นเพียงพอสำหรับการสร้างหน้าร้านค้า WooCommerce แบบกำหนดเอง

หากคุณต้องการการควบคุมที่มากขึ้น คุณสมบัติตัวสร้างเทมเพลตใน Botiga Pro ให้คุณปรับแต่งทุกส่วนของหน้าร้านค้าของคุณได้อย่างเต็มที่โดยใช้ตัวแก้ไขบล็อก WordPress หรือ Elementor (แม้แต่เวอร์ชันฟรี)

หากคุณยังไม่ได้ใช้ Botiga ลองเปลี่ยนไปใช้ Botiga วันนี้เพื่อให้สามารถเข้าถึงตัวเลือกการปรับแต่งเหล่านี้ได้ทั้งหมด — รวมทั้งอื่นๆ อีกมาก!

คุณยังมีข้อสงสัยเกี่ยวกับวิธีปรับแต่งหน้าร้านค้า WooCommerce หรือไม่? แจ้งให้เราทราบในความคิดเห็น.