วิธีปรับแต่งหน้าร้านค้า WooCommerce – คู่มือฉบับสมบูรณ์

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

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

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

หน้าร้านค้า WooCommerce คืออะไรและทำไมคุณควรปรับแต่งมัน

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

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

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

ประโยชน์ของการปรับแต่งหน้าร้านค้า

โดยรวมแล้ว การปรับแต่งหน้าร้านค้า WooCommerce มีประโยชน์หลายประการ:

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

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

อย่างไรก็ตาม ในคู่มือนี้ เราจะแสดง วิธีควบคุมการออกแบบหน้าร้านค้า WooCommerce อย่างสมบูรณ์

วิธีปรับแต่งหน้าร้านค้า WooCommerce: คำแนะนำทีละขั้นตอน

ในส่วนนี้ เราจะแสดงวิธีปรับแต่งหน้าร้านค้าโดยใช้สามวิธีที่แตกต่างกัน:

1. โดยทางโปรแกรม
2. ด้วยตัวสร้างเพจ
3. ด้วยปลั๊กอิน

1) การปรับแต่งหน้าร้านค้า WooCommerce โดยทางโปรแกรม

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

ขั้นตอนที่ 1: สร้างธีมลูก

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

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

ขั้นตอนที่ 2: สร้างโครงสร้างโฟลเดอร์ในธีมลูกของคุณ

ตอนนี้ เราจะใช้ไคลเอนต์ FTP เพื่อเปลี่ยนไฟล์เว็บไซต์ หากคุณไม่มีบัญชี FTP เราขอแนะนำซอฟต์แวร์ FileZilla แต่คุณสามารถใช้ไคลเอนต์ใดก็ได้ที่คุณต้องการ หลังจากสร้างธีมลูกของคุณ ไปที่ไฟล์ไซต์ของคุณและทำตามเส้นทางนี้: /wp-content/themes/your-theme

สมมติว่า คุณได้สร้างธีมย่อยสำหรับธีม Twenty Twenty ชื่อโฟลเดอร์ควรเป็น อย่างไร จากนั้นคลิกและสร้างโฟลเดอร์ชื่อ WooCommerce หลังจากนั้น ให้สร้างไฟล์ชื่อ archive-product.php ซึ่งเป็นไฟล์เทมเพลตหน้าร้านค้า คุณได้สร้างหน้าร้านค้า WooCommerce ในร้านค้าของคุณแล้ว แต่มันว่างเปล่า ดังนั้นตอนนี้คุณต้องเพิ่มเนื้อหาบางส่วน

ขั้นตอนที่ 3: สร้างเนื้อหาสำหรับหน้าร้านค้าของคุณ

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

ขั้นตอนที่ 4: สร้างเทมเพลตหน้าร้านค้า

แทนที่จะสร้างหน้าร้านค้า WooCommerce ตั้งแต่เริ่มต้น คุณสามารถใช้เทมเพลตที่มีอยู่และปรับเปลี่ยนได้ สำหรับสิ่งนี้ ให้กลับไปที่ธีมหลักและค้นหาไฟล์ single.php หรือ index.php หากคุณเห็นทั้งสองไฟล์ ให้คัดลอกและวางลงในโฟลเดอร์ WooCommerce ที่คุณสร้างไว้ในขั้นตอนที่ 2 หากคุณเห็นทั้งสองไฟล์ ให้คัดลอก single.php จากนั้น ลบ ไฟล์ archive-product.php และเปลี่ยนชื่อไฟล์ที่คุณเพิ่งวางที่นี่เป็น archive-product.php

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

ขั้นตอนที่ 5: ปรับแต่งหน้าร้านค้าโดยใช้รหัสย่อ

ขั้นแรก แบ่งผลิตภัณฑ์ออกเป็นคอลัมน์หรือแถว ตัวอย่างเช่น หากคุณต้องการแสดงผลิตภัณฑ์ของคุณใน 2 คอลัมน์สูงสุด 6 ผลิตภัณฑ์ คุณต้องวางโค้ดต่อไปนี้ลงใน ไฟล์ archive-product.php :

 [ products limit="6" columns="2" ]

หากคุณไม่แน่ใจว่าต้องทำอย่างไร ให้ทำตามขั้นตอนเหล่านี้:

• เปิด ไฟล์ archive-product.php
• ลบข้อความระหว่าง <main id=“main” class=“site-main” role=“main”> และ </main><!– #main –> โปรดทราบว่าคุณไม่ควรลบโค้ดสองบรรทัดนี้ แต่ควรลบเฉพาะสิ่งที่อยู่ระหว่างสองบรรทัดเท่านั้น
• เพิ่มโค้ดบรรทัดนี้ลงในช่องว่างที่เหลือโดยสิ่งที่คุณเพิ่งลบไป:

   <?php echo do_shortcode ('[ products limit="6" columns="2" ]') ?>

• บันทึกการเปลี่ยนแปลง
• ยินดีด้วย! คุณเพิ่งสร้างหน้าร้านค้า WooCommerce ใหม่!

แสดงสินค้ายอดนิยม

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

 [ products orderby="popularity" ]

ค้นหาไฟล์ archive-product.php ของธีมไฟล์ของคุณ แล้ววางโค้ดต่อไปนี้:

 do_action('woocommerce_before_shop_loop');
echo '<h1>ยอดนิยมที่สุด !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

อย่างที่คุณเห็น เราจะแสดงผลิตภัณฑ์สองรายการในแถวสองคอลัมน์เดียว (columns=”2″ limit=”2″) แต่คุณสามารถปรับตัวเลขเหล่านี้ให้เหมาะกับคุณได้มากที่สุด

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

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

2) ปรับแต่งหน้าร้านค้า WooCommerce ด้วยตัวสร้างหน้า

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

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

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

1. สร้างเพจเพื่อแสดงสินค้าของคุณด้วยตัวสร้างเพจ
2. ทำให้เพจนั้นเป็นเพจร้านของคุณ

ขั้นตอนที่ 1: สร้างหน้ารายการด้วยตัวสร้างหน้าและเติมด้วยเนื้อหา

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

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

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

•  [ featured_products ]

•  [ best_selling_products ]

•  [ top_rated_products ]

•  [ sale_products ]

•  [ product_table ]

•  [ recent_products ]

•  [ products ]

ตามตัวอย่างของเรา เราจะเพิ่มสินค้าแนะนำในหน้าร้านค้าของเราโดยใช้

• ไปที่ แดชบอร์ดผู้ดูแลระบบ WordPress > หน้าผลิตภัณฑ์ เลือกผลิตภัณฑ์แนะนำของคุณโดยคลิกที่ไอคอนรูปดาวทางด้านขวา

• จากหน้าแก้ไข ให้ลากตัวแก้ไขข้อความลงมาด้านล่างผลิตภัณฑ์เด่น

• คัดลอก

   [ featured_products ]

  รหัสย่อแล้ววางที่นั่น

• คลิก อัปเดต และผลิตภัณฑ์ของคุณจะปรากฏขึ้นดังที่แสดงด้านล่าง:

สำหรับสินค้าขายดี คุณสามารถใช้ปุ่ม

 [ best_selling_products ]

รหัสย่อ สำหรับผลิตภัณฑ์ที่เพิ่งเผยแพร่ คุณจะใช้

 [ recent_products ]

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

• กำหนดจำนวนคอลัมน์
• จำกัดจำนวนสินค้าที่แสดง

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

 [ products limit="6" columns="2" ]

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

ขั้นตอนที่ 2: สร้างหน้าที่สร้างขึ้นใหม่หน้าร้านค้าของคุณ

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

• รับ URL ของหน้าที่สร้างขึ้นใหม่ของคุณ
• ไปที่แดชบอร์ด WordPress
• คลิก ลักษณะที่ปรากฏ > ตัวแก้ไขธีม จากนั้นคลิก ฉันเข้าใจ หากคุณเห็นป๊อปอัป
• หลังจากนั้นคุณจะถูกนำไปที่หน้าซึ่งคุณจะสามารถเข้าถึงไฟล์ Theme Function ได้ทางด้านขวา

• คลิกไฟล์ functions.php และวางโค้ดนี้ที่ส่วนท้าย:

 add_action('template_redirect', 'quadlayers_redirect_woo_pages');ฟังก์ชัน quadlayers_redirect_woo_pages()
{
    if (function_exists('is_shop') && is_shop()) {
        wp_redirect('https://www.quadlayers.com/shop/');
        ทางออก;
    }
}

สำคัญ : โปรดคัดลอกและวางโค้ดตามที่เป็นอยู่โดยไม่ต้องลบอะไรเลย และอย่าลืมแทนที่ URL ของคุณภายใน wp_redirect ('[yourURL]') จากนั้นให้อัปเดตไฟล์ เท่านี้ก็เรียบร้อย! คุณเพิ่งสร้างหน้าร้านค้า WooCommerce ที่กำหนดเอง

3) ปรับแต่งหน้าร้านค้า WooCommerce ด้วยปลั๊กอิน

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

1. WooCustomizer
2. ตารางผลิตภัณฑ์ WooCommerce โดย WC Product Table (ฟรีและพรีเมียม)
3. ตารางผลิตภัณฑ์ WooCommerce โดย Barn2 (พรีเมียม)

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

3.1) WooCustomizer

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

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

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

ในที่สุด WoooCustomizer เป็นเครื่องมือ freemium มีเวอร์ชันฟรีพร้อมคุณสมบัติพื้นฐานและแผนพรีเมียม 3 แผนพร้อมฟังก์ชันขั้นสูงที่เริ่มต้นที่ 29 USD ต่อปี

3.2) ตารางผลิตภัณฑ์ WooCommerce Lite โดย WC Product Table

ตารางผลิตภัณฑ์ WooCommerce (WCPT) เป็นปลั๊กอินที่ยอดเยี่ยมที่ช่วยให้คุณสามารถสร้างเค้าโครงตารางผลิตภัณฑ์ได้อย่างง่ายดาย ด้วยคะแนน 4.9 จาก 5 และการติดตั้งที่ใช้งานมากกว่า 5,000 รายการ เป็นหนึ่งในเครื่องมือชั้นนำในการแก้ไขหน้าร้านค้าใน WooCommerce

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

ขั้นตอนที่ 1: สร้าง WCPT บนหน้าใดก็ได้

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

อย่างที่คุณเห็น คุณจะต้องระบุ:

• ชื่อตาราง: ในตัวอย่างของเรา เราเรียกมันว่า Product Table 01
• หมวดหมู่สินค้า : ใต้แท็บ แบบสอบถาม คุณจะเห็นหมวดหมู่ที่คุณมี เลือกหนึ่งรายการสำหรับโต๊ะของคุณ

• ข้อมูลคอลัมน์: ถัดไป ไปที่แท็บคอลัมน์ ที่นี่คุณจะต้องวาดตารางที่คุณต้องการ คุณจะต้องตัดสินใจว่าคุณต้องการกี่คอลัมน์แล้วออกแบบแต่ละคอลัมน์ ตารางผลิตภัณฑ์ WC ให้ตัวเลือกแก่คุณไม่เพียงแต่สำหรับแล็ปท็อปแต่สำหรับคอลัมน์โทรศัพท์และแท็บเล็ตด้วย คุณจึงสามารถระบุตัวเลือกทั้งหมดที่คุณต้องการสำหรับอุปกรณ์แต่ละประเภท รวมทั้งหัวเรื่อง แม่แบบเซลล์ และการออกแบบ (แบบอักษร การจัดตำแหน่ง สีแบบอักษร สีพื้นหลัง และอื่นๆ)

เมื่อคุณสร้างคอลัมน์ที่ต้องการแล้ว ให้คลิก บันทึกการตั้งค่า เท่านี้คุณก็พร้อมแล้ว

ขั้นตอนที่ 2: วางตารางของคุณในหน้าใหม่

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

ตอนนี้ มาแสดงตารางในหน้าใหม่โดยใช้รหัสย่อ ณ จุดนี้ เราสามารถสรุปได้ว่าคุณคุ้นเคยกับการสร้างหน้าใหม่ ดังนั้นโดยใช้ตัวสร้างเพจ คลิก Pages > Add New แล้วตั้งชื่อ ตัวอย่างเช่น ร้านค้าของฉัน หน้า 2 หากคุณกำลังใช้ Elementor คุณจะเห็นสิ่งนี้:

ลากโปรแกรมแก้ไขข้อความลงแล้ววางรหัสย่อที่คุณเพิ่งคัดลอกไว้ที่นั่น

ตอนนี้ คุณจะมีหน้าที่มีรูปแบบตารางผลิตภัณฑ์

ขั้นตอนที่ 3: เปลี่ยนเส้นทางลูกค้าไปยังหน้าร้านค้าใหม่ของคุณ

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

หลังจากเปิดใช้งานปลั๊กอิน ให้ไปที่ เครื่องมือ > การเปลี่ยนเส้นทาง และคุณจะเห็นข้อความนี้:

• ใน URL ต้นทาง ให้วางลิงก์ของหน้าร้านค้าเริ่มต้น
• ใน URL เป้าหมาย ให้วางลิงก์ของหน้าร้านค้าที่สร้างขึ้นใหม่ของคุณ
• จากนั้นคลิก เริ่มการตั้งค่า
• แค่นั้นแหละ! นั่นคือวิธีปรับแต่งหน้าร้านค้า WooCommerce ของคุณด้วยปลั๊กอินฟรี!

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

PRO-TIP

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

ด้วยฟังก์ชันนี้ คุณสามารถแทนที่กริด WooCommerce ที่เป็นค่าเริ่มต้นด้วยตารางผลิตภัณฑ์ของคุณ ไม่เพียงแต่ในหน้าร้านค้า แต่ยังรวมถึงในหน้าเก็บถาวรใดๆ เช่น คุณลักษณะ หมวดหมู่ แท็ก และการค้นหา หากต้องการเปิดใช้งานคุณลักษณะนี้ ไปที่ WP Dashboard > Product Tables > Settings > Archive Override

3.3) ตารางผลิตภัณฑ์ WooCommerce โดย Barn2

อีกตัวเลือกที่ยอดเยี่ยมในการแก้ไขหน้าร้านค้าคือปลั๊กอิน WooCommerce Product Table โดย Barn2 เป็นเครื่องมือระดับพรีเมียมที่เริ่มต้นที่ 89 USD ต่อปีและใช้งานง่ายมาก โปรแกรมเสริมนี้จะช่วยคุณในการลงรายการสินค้าของคุณในเค้าโครงตารางแล้วแทรกลงในหน้าร้านค้า ด้วยวิธีนี้ คุณจะสามารถเปลี่ยนการออกแบบเริ่มต้นของหน้าร้านเป็นตารางได้

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

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

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

ขั้นตอนที่ 3

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

โบนัส: วิธีแก้ไขปัญหาหน้าร้านค้า WooCommerce เปล่า

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

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับปัญหาเหล่านี้ โปรดดูคำแนะนำในการแก้ไขปัญหาหน้าร้านค้า WooCommerce ของเรา

โบนัส 2: แสดงหมวดหมู่ในหน้าร้านค้า

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

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

นอกจากนี้ คุณสามารถใช้ตัวเลือก Category Display เพื่อแสดง/ซ่อน Product Subcategories และ Products ในหน้า Product Category ของคุณ คุณสามารถดูตัวอย่างการเปลี่ยนแปลงของคุณในแบบเรียลไทม์ และเมื่อคุณทำเสร็จแล้ว ให้คลิก เผยแพร่ เพื่อบันทึกการเปลี่ยนแปลง

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

ก้าวแรก

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

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

บทสรุป

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

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

• ด้วยตนเอง
• ด้วยผู้สร้างเพจ
• ด้วยปลั๊กอิน

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

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

• วิธีปรับแต่งหน้าบัญชีของฉันใน WooCommerce
• ปรับแต่งปุ่ม Add to Cart ใน WooCommerce
• วิธีแก้ไข WooCommerce Checkout (การเข้ารหัส & ปลั๊กอิน)
• แก้ไขหน้าบัญชีของฉันใน WooCommerce
• วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ใน Divi

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