วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce โดยใช้ Elementor

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

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

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

มาเริ่มกันเลย:

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

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

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

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

วิธีแก้ไขหน้าผลิตภัณฑ์ WooCommerce (คำแนะนำทีละขั้นตอน)

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

1. วิธีแรก: สร้างเทมเพลตหน้าผลิตภัณฑ์เดียว
2. วิธีที่สอง: สร้างหน้าผลิตภัณฑ์เดียวใหม่ตั้งแต่ต้น

คุณต้องติดตั้งและเปิดใช้งานปลั๊กอินต่อไปนี้เพื่อสร้างหน้าผลิตภัณฑ์เดียว:

ข้อกำหนดเบื้องต้น :

• องค์ประกอบ (ฟรี)
• Elementor Pro

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

วิธีแรก: สร้างเทมเพลตหน้าผลิตภัณฑ์เดียว

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

ขั้นตอนที่ 1: ไปที่ตัวสร้างธีมเทมเพลต

ในการสร้างเทมเพลตหน้าผลิตภัณฑ์เดียว คุณต้องระบุตำแหน่งทางภูมิศาสตร์ที่ Dashboard–>Template–>Theme Builder

ขั้นตอนที่ 2: คลิกที่แท็บผลิตภัณฑ์เดียว

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

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

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

ขั้นตอนที่ 4: เลือกเทมเพลตหน้าสินค้าที่ออกแบบไว้ล่วงหน้าที่เหมาะสม

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

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

วิธีที่สอง: สร้างหน้าผลิตภัณฑ์เดียวใหม่ตั้งแต่ต้น

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

มาเริ่มกันเลย:

ขั้นตอนที่ 1: เปิดแผงแก้ไข Page To Elementor

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

ขั้นตอนที่ 2: เพิ่มสองคอลัมน์

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

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

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

• วิดเจ็ตรูปภาพสินค้า : คุณสามารถตั้งค่ารูปภาพหรือแกลเลอรีที่คุณต้องการแสดง
• วิดเจ็ต ชื่อผลิตภัณฑ์ : วิดเจ็ตนี้จะช่วยคุณปรับแต่งสไตล์และเลย์เอาต์ของชื่อผลิตภัณฑ์ของคุณ
• วิดเจ็ต WooCommerce Breadcrumbs : ปรับแต่งสีและเลย์เอาต์สำหรับ WooCommerce Breadcrumbs
• วิดเจ็ตคำอธิบาย แบบย่อ : เลือกวิธีที่คุณต้องการแสดงคำอธิบายสั้น ๆ ของผลิตภัณฑ์ของคุณ
• วิดเจ็ตราคาสินค้า : ควบคุมรูปแบบและการออกแบบราคาสินค้าของคุณ
• วิดเจ็ตการให้คะแนนผลิตภัณฑ์ : ปรับแต่งการให้คะแนนผลิตภัณฑ์ของคุณ ทำให้มองเห็นได้ชัดเจนยิ่งขึ้นและทำให้ลูกค้าสามารถทราบได้อย่างง่ายดายว่าผู้ใช้ดูผลิตภัณฑ์ของคุณอย่างไร
• Product Meta Widget : กำหนดระยะห่างระหว่างข้อความ แสดงแบบเรียงซ้อนหรือแบบอินไลน์ และควบคุมรูปแบบ Metadata ของคุณ
• วิดเจ็ตข้อมูลเพิ่มเติม : คุณสามารถเพิ่มข้อมูลเพิ่มเติมของผลิตภัณฑ์ของคุณด้วยวิดเจ็ตนี้
• วิดเจ็ต Add To Cart : ปรับแต่งสไตล์และเลย์เอาต์ของปุ่ม Add to Cart
• วิดเจ็ตแท็บข้อมูลผลิตภัณฑ์ : ควบคุมเลย์เอาต์ของแท็บข้อมูลผลิตภัณฑ์
• Upsells Widget : คุณสามารถสร้างสไตล์ของคุณเองสำหรับผลิตภัณฑ์เพิ่มยอดขาย
• วิดเจ็ตที่เกี่ยวข้องกับผลิตภัณฑ์ : หากคุณมีผลิตภัณฑ์ที่คล้ายคลึงกันในไซต์ของคุณ คุณต้องมีส่วนผลิตภัณฑ์ที่เกี่ยวข้อง คุณสามารถปรับแต่งส่วนผลิตภัณฑ์ที่เกี่ยวข้องของคุณด้วยวิดเจ็ตนี้

ขั้นตอนที่ 4: เพิ่มวิดเจ็ตรูปภาพสินค้า

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

ขั้นตอนที่ 5: ปรับแต่งรูปแบบรูปภาพผลิตภัณฑ์

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

ขั้นตอนที่ 6: เพิ่ม WooCommerce Breadcrumbs Widget

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

ขั้นตอนที่ 7: ปรับแต่ง WooCommerce Breadcrumbs

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

ขั้นตอนที่ 8: เพิ่มวิดเจ็ตชื่อผลิตภัณฑ์

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

ขั้นตอนที่ 9: วิดเจ็ตชื่อผลิตภัณฑ์สไตล์

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

ขั้นตอนที่ 10: เพิ่มวิดเจ็ตคำอธิบายสั้น

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

ขั้นตอนที่ 11: คำอธิบายโดยย่อของสไตล์

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

ขั้นตอนที่ 12: ลบคำอธิบายแบบย่อ Space

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

ขั้นตอนที่ 13: เพิ่มและจัดรูปแบบวิดเจ็ตราคาสินค้า

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

ขั้นตอนที่ 14: เพิ่มและจัดรูปแบบวิดเจ็ตการให้คะแนนผลิตภัณฑ์

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

ขั้นตอนที่ 15: เพิ่มและจัดรูปแบบ Meta Widget ของผลิตภัณฑ์

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

ขั้นตอนที่ 16: เพิ่มและจัดรูปแบบวิดเจ็ตข้อมูลเพิ่มเติม

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

ขั้นตอนที่ 17: เพิ่ม & สไตล์ หยิบใส่รถเข็น ปุ่ม

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

ขั้นตอนที่ 18: เพิ่มและจัดรูปแบบแท็บข้อมูลผลิตภัณฑ์

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

ขั้นตอนที่ 19: เพิ่มวิดเจ็ตขายต่อ

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

ขั้นตอนที่ 20: Widget เพิ่มยอดขายสไตล์

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

• ผลิตภัณฑ์
• หัวเรื่อง
• กล่อง
• ลดราคาแฟลช

ขั้นตอนที่ 21: เพิ่มและจัดรูปแบบวิดเจ็ตผลิตภัณฑ์ที่เกี่ยวข้อง

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

ตัวอย่างสุดท้ายของหน้าผลิตภัณฑ์เดียว WooCommerce ที่กำหนดเองของเรา

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

การออกแบบเว็บไซต์อีคอมเมิร์ซโดยใช้ HappyAddons WooCommerce Widgets

ขอแนะนำ WooCommerce Single Product Widget ของ Happy Addons

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

เราจะพูดถึงวิดเจ็ต WooCoommerce Single Product แบบพิเศษเฉพาะของ Happy Addons ซึ่งเป็นขั้นสูง ใช้งานง่าย และมาพร้อมกับเค้าโครงหน้าสาธิตผลิตภัณฑ์ premed ที่ทันสมัย

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

ตรวจสอบเอกสารประกอบเพื่อทราบวิธีการทำงานกับวิดเจ็ตนี้

คุณยังสามารถชมวิดีโอสาธิตนี้ของวิดเจ็ต Single Product

เตรียมตัวให้พร้อมเพื่อสร้างหน้าผลิตภัณฑ์เดียวของคุณ

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

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

หากคุณยังมีข้อสงสัยใดๆ เกี่ยวกับบล็อกนี้ โปรดแสดงความคิดเห็นเราในส่วนความคิดเห็นด้านล่าง หากคุณชอบคู่มือนี้ ให้แชร์บนช่องโซเชียลของคุณ

อย่าลืมสมัครรับจดหมายข่าวของเราเพื่อรับบทความที่น่าสนใจเพิ่มเติมเกี่ยวกับ WordPress, Elementor, WooCommerce และอื่นๆ