วิธีเปลี่ยนหน้าร้านค้า WooCommerce (ตัวเลือก & การปรับแต่ง)

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

สารบัญ

• การปรับหน้าร้านค้า WooCommerce (พื้นฐาน)
• แสดงสินค้าและเพิ่มรหัสย่อ
• การปรับแต่งหน้าร้านค้า (ตัวเลือกเพิ่มเติม)

การปรับหน้าร้านค้า WooCommerce (พื้นฐาน)

ตามค่าเริ่มต้น WooCommerce จะใช้หน้าร้านค้าเพื่อแสดงสินค้า

ค่อนข้างง่ายในการตั้งค่าเค้าโครงหน้า (จำนวนผลิตภัณฑ์ คอลัมน์) ซึ่งอาจขึ้นอยู่กับธีมด้วย

ตัวอย่างเช่น หน้าร้านให้ตัวเลือกต่อไปนี้แก่หน้าร้านค้า WooCommerce ในการออกแบบหน้า

มาดูขั้นตอนและสถานที่ในการตั้งค่าหน้าร้านค้า WooCommerce กันดีกว่า

1. การเลือกหน้า

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

   หากคุณไม่เห็นหน้าใดๆ คุณอาจต้องเพิ่มหน้าหนึ่งในเมนูหน้า ไม่เช่นนั้นอาจมีข้อผิดพลาดในการดึงข้อมูลหน้าจากฐานข้อมูล

   

   หากคุณใช้หน้าที่มีอยู่กับเนื้อหา แค็ตตาล็อกผลิตภัณฑ์จะปรากฏหลังเนื้อหา

   

2. การตั้งค่าแค็ตตาล็อกผลิตภัณฑ์

   ถัดไป คุณสามารถไปที่ Appearance → ปรับแต่ง และคลิก WooCommerce → Product Catalog นอกจากนี้ยังอาจขึ้นอยู่กับธีม (และความเข้ากันได้กับ WooCommerce)
   
   โดยพื้นฐานแล้ว การตั้งค่าจะดูแลเค้าโครงหน้าร้านค้า จำนวนสินค้าที่จะแสดง หมวดหมู่ การจัดเรียง การแบ่งหน้า ลำดับสินค้า และคอลัมน์
   
   การปรับเปลี่ยนในแบบของคุณจะส่งผลต่อรูปร่างสุดท้ายของหน้าร้านค้า WooCommerce
   

3. เมนู

   WordPress ช่วยให้เราสามารถสร้างโครงสร้างเมนูที่กำหนดเองได้ หากต้องการเพิ่มลิงก์เพจร้านค้าลงในเมนู คุณสามารถไปที่ รูปลักษณ์ → เมนู นอกจากนี้ยังมีตัวเลือกในการเปลี่ยนชื่อในเมนูหรือเพิ่มไอคอน/ไอคอน Fav
   

4. หน้าร้านค้าเป็นหน้าแรก

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

5. URL เพจร้านค้า

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

   หากคุณตั้งค่าหน้าร้านให้เป็นหน้าแรกด้วย URL จะถูกเขียนใหม่ไปยังโดเมนหลัก (โดยไม่มีตัวบุ้ง)

6. ลิงก์ถาวร

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

7. ซีเอสเอส

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

   ฉันสามารถเปลี่ยนความกว้างของคอลัมน์ด้วย CSS ได้ แต่ฉันคิดว่า WooCommerce เกี่ยวข้องกับเค้าโครงหน้าผลิตภัณฑ์ (คอลัมน์/ ผลิตภัณฑ์) ดังนั้นจึงควรใช้รหัสย่อ (ภายหลังในโพสต์)

8. วิดเจ็ต

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

เอาล่ะ มาดูวิธีปรับปรุงหน้าร้านค้ามาตรฐานด้วยรหัสย่อใน WooCommerce กันดีกว่า

แสดงสินค้าและเพิ่มรหัสย่อ

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

รหัสย่อของ WooCommerce สำหรับตัวอย่างหน้าผลิตภัณฑ์

อย่างที่คุณเห็น หน้าร้านค้า WooCommerce จะแสดงผลิตภัณฑ์และส่วนพิเศษก่อนเนื้อหา

นอกจากนี้ยังสามารถเปลี่ยนหน้าร้านค้า WooCommerce มาตรฐานด้วย WooCommerce และบล็อคธีมเพิ่มเติมได้

แน่นอนว่า โปรดจำไว้ว่าผลิตภัณฑ์บางอย่างอาจแสดงหลายครั้ง

การปรับแต่งหน้าร้านค้า (ตัวเลือกเพิ่มเติม)

เรามาเปลี่ยนจากผลิตภัณฑ์ที่มองเห็นได้และดูแลด้านการทำงานของหน้าร้านค้า WooCommerce กันดีกว่า

สินค้าจะปรากฏพร้อมกับรูปภาพ ชื่อ ราคา รีวิว และปุ่มหยิบลงตะกร้า

1. เปลี่ยนเส้นทาง, AJAX, ตัวยึดตำแหน่ง

   กลับไปที่ WooCommerce → การตั้งค่า → ผลิตภัณฑ์ อย่างที่คุณเห็น มี 3 ตัวเลือกที่สำคัญให้ใช้:
   

   • เปลี่ยนเส้นทางไปยังตะกร้าสินค้า - ตัวเลือกนี้อาจใช้กับหน้าร้านค้า WooCommerce ได้ด้วย
   • เปิดใช้งาน AJAX สำหรับปุ่มเพิ่มลงตะกร้า - ตัวเลือกนี้จะป้องกันไม่ให้หน้าโหลดซ้ำหลังจากเพิ่มสินค้าลงในตะกร้า มันจะใช้ไม่ได้กับตัวเลือกก่อนหน้า
   • รูปภาพตัวยึดตำแหน่ง - การเลือก ID สำหรับรูปภาพผลิตภัณฑ์เริ่มต้นหากผลิตภัณฑ์ไม่มี (มองเห็นได้ใน URL ของรูปภาพในเมนูสื่อ)

2. การปรับแต่งชื่อผลิตภัณฑ์

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

   

3. รีวิวสินค้า

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

   

   การตั้งค่าสำหรับการวิจารณ์ผลิตภัณฑ์อยู่ใน WooCommerce → การตั้งค่า → ผลิตภัณฑ์

   

   คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ การปิดใช้งานบทวิจารณ์ผลิตภัณฑ์ WooCommerce

4. ราคาสินค้า

   ตามค่าเริ่มต้น WooCommerce จะแสดงราคาปกติและราคาลดราคาใต้ชื่อผลิตภัณฑ์

   

   สำหรับสินค้าที่แปรผัน ช่วงราคาจะปรากฏขึ้น

   

   และมีตัวเลือกในการตัดสินใจว่าจะแสดงราคาอย่างไร

   

   คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ ผลิตภัณฑ์ WooCommerce

   นอกจากนี้ยังมีปลั๊กอินเพิ่มเติมที่สามารถปรับเปลี่ยนราคาสินค้าได้

   แสดงราคาต่ำสุด

   ตัวอย่างเช่น WP Desk ได้สร้างปลั๊กอินเพื่อเสนอโซลูชันสำหรับ Omnibus directive

   

   รถโดยสาร WP Desk $ 69

   ตรวจสอบให้แน่ใจว่าร้านค้า WooCommerce ของคุณสอดคล้องกับ EU Omnibus Directive และแสดงราคาผลิตภัณฑ์ต่ำสุดในช่วง 30 วันที่ผ่านมา ใช้ปลั๊กอิน WP Omnibus WordPress เพื่อให้เป็นไปตามคำสั่งใหม่และได้รับความไว้วางใจจากลูกค้า

   การติดตั้งที่ใช้งานอยู่: 1,000+ |อัพเดตล่าสุด มี.ค. 24

   เพิ่มลงในรถเข็น หรือ ดูรายละเอียด

   โต๊ะทำงาน WP

   ปลั๊กอินที่ใช้โดยร้านค้ากว่า 250,389 แห่ง

   อัปเดตล่าสุด: 2024-03-04

   ทำงานร่วมกับ WooCommerce 8.4 - 8.6.x

   ส่วนลดราคา

   นอกจากนี้ยังสามารถตั้งค่าส่วนลดสินค้าที่จะส่งผลต่อราคาในหน้าสินค้า WooCommerce ได้ด้วย ตัวอย่างเช่น การกำหนดราคาแบบยืดหยุ่นสามารถตั้งค่าการซื้อ รับส่วนลดฟรี 1 รายการหรือส่วนลดสำหรับทั้งหมวดหมู่ บทบาทของผู้ใช้ หรือยอดรวมคำสั่งซื้อ

   ราคาที่ยืดหยุ่น WooCommerce $ 79

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

   อัพเดตล่าสุด พ.ย. '23

   เพิ่มลงในรถเข็น หรือ ดูรายละเอียด

   โต๊ะทำงาน WP

   ปลั๊กอินที่ใช้โดยร้านค้ากว่า 250,389 แห่ง

   อัปเดตล่าสุด: 15-04-2024

   ทำงานร่วมกับ WooCommerce 8.5 - 8.8.x

5. ปุ่มเพิ่มลงตะกร้า

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

   • เปลี่ยนคำแปล (สตริง) สำหรับข้อความเพิ่มลงตะกร้า
   • ใช้ตัวกรอง woocommerce_product_add_to_cart_text และ woocommerce_product_add_to_cart_text เพื่อปรับข้อความของปุ่ม
   • หรือลองใช้ปลั๊กอิน

   

   ราคาที่กำหนดเองสำหรับ WooCommerce PRO $ 49

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

   การติดตั้งที่ใช้งานอยู่: 2,000+ |คะแนน WordPress:

   เพิ่มลงในรถเข็น หรือ ดูรายละเอียด

   โต๊ะทำงาน WP

   การติดตั้งที่ใช้งานอยู่มากกว่า 2,000 รายการ

   อัปเดตล่าสุด: 21-05-2024

   ทำงานร่วมกับ WooCommerce 8.6 - 8.9.x

6. การเลือกจำนวนจากเพจร้าน

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

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

สรุป

คุณมีคำถามเกี่ยวกับวิธีเปลี่ยนหน้าร้านค้า WooCommerce หรือไม่? หากคุณต้องการปรับแต่ง WooCommerce เช่น ช่องผลิตภัณฑ์หรือหน้าชำระเงิน คุณสามารถดู ปลั๊กอิน WP Desk ฟรี ได้