วิธีปรับแต่งหน้าหมวดหมู่สินค้าใน WooCommerce

เผยแพร่แล้ว: 2022-03-21

ต้องการทราบวิธีปรับแต่งหน้าหมวดหมู่ผลิตภัณฑ์ใน WooCommerce หรือไม่?

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

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

ทำไมต้องปรับแต่งหน้าหมวดหมู่ผลิตภัณฑ์ WooCommerce

มีเหตุผลหลายประการในการปรับแต่งหน้าหมวดหมู่ WooCommerce ของคุณ:

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

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

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

วิธีเพิ่มหมวดหมู่สินค้าใน WooCommerce

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

How to add product categories in woocommerce

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

  • ชื่อ
  • หมวดหมู่ ทาก
  • หมวดหมู่ผู้ปกครอง
  • คำอธิบาย
  • ประเภทการแสดงผล
  • รูปขนาดย่อ

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

ขั้นแรก เราจะแสดงวิธีสร้างหน้าหมวดหมู่ผลิตภัณฑ์ที่กำหนดเองใน WooCommerce โดยใช้ SeedProd หลังจากนั้น เราจะแชร์วิธีแสดงหมวดหมู่ผลิตภัณฑ์ใน WooCommerce หลายวิธี

สารบัญ
  1. วิธีเพิ่มหมวดหมู่สินค้าใน WooCommerce
  2. วิธีปรับแต่งหน้าหมวดหมู่สินค้าใน WooCommerce
  3. วิธีแสดงหมวดหมู่สินค้าใน WooCommerce

วิธีปรับแต่งหน้าหมวดหมู่สินค้าใน WooCommerce

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

นั่นเป็นเหตุผลที่เราแนะนำให้ใช้ SeedProd เพื่อปรับแต่งร้านค้า WooCommerce ของคุณเสมอ

SeedProd WordPress website builder

SeedProd เป็นเครื่องมือสร้างเว็บไซต์ที่ดีที่สุดสำหรับ WordPress ด้วยการติดตั้งที่ใช้งานอยู่กว่า 1 ล้านครั้ง เป็นวิธีที่ง่ายที่สุดในการสร้างธีม เลย์เอาต์ และหน้า Landing Page ของ WordPress แบบกำหนดเองโดยไม่ต้องใช้โค้ด

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

ทำตามขั้นตอนด้านล่างเพื่อสร้างหน้าหมวดหมู่แบบกำหนดเองด้วย SeedProd

ขั้นตอนที่ 1 ติดตั้งและเปิดใช้งานตัวสร้างเว็บไซต์ SeedProd

ขั้นตอนแรกคือการดาวน์โหลดตัวสร้างเว็บไซต์ SeedProd

เริ่มต้นกับ SeedProd วันนี้

หมายเหตุ: มี SeedProd เวอร์ชันฟรีให้บริการ แต่เราจะใช้ SeedProd Pro สำหรับคุณลักษณะ WooCommerce

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

หลังจากติดตั้งและเปิดใช้งาน SeedProd แล้ว ให้ไปที่ SeedProd » การตั้งค่า และวางรหัสใบอนุญาตของคุณ

enter your license key

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

copy your seedprod license key

คลิกปุ่ม ยืนยันคีย์ ; คุณก็พร้อมที่จะตั้งค่าหน้าหมวดหมู่ WooCommerce ที่กำหนดเองแล้ว

ขั้นตอนที่ 2 สร้างธีม WooCommerce

SeedProd ช่วยให้คุณสร้างหน้า WooCommerce ที่กำหนดเองได้ 2 วิธี:

  • ตัว สร้างธีม – ตัวสร้างธีมจะแทนที่ธีมปัจจุบันของคุณและให้คุณปรับแต่งทุกส่วนของเว็บไซต์ของคุณด้วยโปรแกรมแก้ไขภาพ
  • ตัว สร้างหน้า Landing Page – ตัวสร้างหน้า Landing Page ให้คุณเก็บธีมปัจจุบันของคุณไว้ และสร้างหน้า Landing Page แต่ละหน้าที่คุณสามารถปรับแต่งได้ด้วยตัวแก้ไขแบบลากและวาง

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

หากต้องการตั้งค่าธีม WooCommerce ให้ไปที่ SeedProd » Theme Builder

โดยปกติ คุณจะเห็นรายการเทมเพลตที่ประกอบเป็นธีมของคุณในหน้านี้ ในตอนนี้ คุณจะเห็นเฉพาะเทมเพลต Global CSS เท่านั้น

SeedProd theme builder

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

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

wordpres theme templates seedprod

ตัวอย่างเช่น ธีมร้านจักรยานจะเหมาะกับร้านค้าที่จำหน่ายจักรยานและอุปกรณ์จักรยาน

หากต้องการเลือกธีม ให้วางเมาส์เหนือธีมนั้นแล้วคลิกไอคอนเครื่องหมายถูก

Choose a premade woocommerce theme

หลังจากนำเข้าธีมของคุณแล้ว SeedProd จะทำทุกส่วนจากการสาธิตธีม ในกรณีของเรา จะมีเทมเพลตธีมต่อไปนี้:

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

หมายเหตุ: เรามักเรียกแต่ละส่วนของธีมว่า "เทมเพลต"

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

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

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

edit woocommerce product archives template

ขั้นตอนที่ 3 ปรับแต่งเทมเพลตหน้าหมวดหมู่ผลิตภัณฑ์ของคุณ

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

SeedProd product archives template

หน้าของคุณควรมี 2 ช่วงตึก:

  1. ชื่อเรื่องที่เก็บถาวร
  2. สินค้าเก็บถาวร

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

SeedProd archive title block

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

บล็อก Archive Products เป็นหนึ่งในแท็กเทมเพลต WooCommerce ของ SeedProd บล็อกนี้จะแสดงตารางผลิตภัณฑ์ในหมวดหมู่เฉพาะนั้น

SeedProd archive products block

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

การปรับแต่งทั้งสองบล็อกนั้นง่าย เพียงคลิกบล็อกใดบล็อกหนึ่งแล้วปรับสไตล์ในแผงการตั้งค่าด้านซ้าย

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

Archive title advanced settings

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

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

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

SeedProd image block

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

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

Seedprod testimonials on custom product category page woocommerce

ความเป็นไปได้ค่อนข้างไม่มีที่สิ้นสุด

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

ขั้นตอนที่ 4 เผยแพร่ธีม WooCommerce ของคุณ

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

Enable seedprod theme

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

how to customize product category page in woocommerce

วิธีแสดงหมวดหมู่สินค้าใน WooCommerce

ตอนนี้คุณรู้วิธีปรับแต่งหน้าหมวดหมู่ผลิตภัณฑ์ใน WooCommerce แล้ว ต่อไปนี้คือวิธีแสดงในหน้าร้านค้าของคุณ

แสดงหมวดหมู่สินค้าบนหน้าร้านค้าด้วย SeedProd

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

Edit seedprod shop page template

จากนั้น เปิดการตั้งค่าสำหรับบล็อก Product Grid และเปลี่ยนประเภท Query เป็น Custom Query ใต้หัวข้อ Query Attribute ให้คลิก "Select by Category" จากนั้นในกล่องหมวดหมู่ ให้คลิกหมวดหมู่ที่คุณต้องการให้แสดงบนหน้า

Display woocommerce product categories on the shop page

หมายเหตุ: คุณสามารถเลือกได้หลายหมวดหมู่โดยกดคำสั่งค้างไว้บน mac หรือ ctrl บน windows

คลิกบันทึกเพื่อจัดเก็บการเปลี่ยนแปลงของคุณ

แสดงหมวดหมู่สินค้าบนหน้าร้านค้าด้วย WooCommerce

หากต้องการแสดงหมวดหมู่สินค้าบนหน้าร้านค้าของคุณด้วยการตั้งค่าเริ่มต้นของ WooCommerce ให้ไปที่ ลักษณะที่ ปรากฏ » ปรับแต่ง » WooCommerce » แค็ตตาล็อกผลิตภัณฑ์

จากนั้นภายใต้หัวข้อ "การแสดงหน้าร้านค้า" ให้เลือกตัวเลือก "แสดงหมวดหมู่"

Show categories on the shop page with product catalog

แค่นั้นแหละ!

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีปรับแต่งหน้าหมวดหมู่ผลิตภัณฑ์ใน WooCommerce

คุณอาจชอบคู่มือนี้เกี่ยวกับวิธีเพิ่มความเร็วให้กับร้านค้า WooCommerce ของคุณ

ขอบคุณที่อ่าน. โปรดติดตามเราบน YouTube, Twitter และ Facebook สำหรับเนื้อหาที่เป็นประโยชน์เพิ่มเติมเพื่อทำให้ธุรกิจของคุณเติบโต