วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ของคุณ
เผยแพร่แล้ว: 2022-10-18หน้าผลิตภัณฑ์ในเว็บไซต์อีคอมเมิร์ซถือเป็นส่วนที่สำคัญที่สุด เนื่องจากมีรายละเอียดทั้งหมดเกี่ยวกับผลิตภัณฑ์ในลักษณะที่เป็นระเบียบพร้อมข้อมูลเพิ่มเติม เช่น สินค้าที่เกี่ยวข้อง เป็นต้น
หน้าผลิตภัณฑ์ WooCommerce เริ่มต้นนั้นใช้ได้สำหรับการ ดูผลิตภัณฑ์ ขั้นพื้นฐาน การ เพิ่มในรถเข็น และฟังก์ชันพื้นฐานอื่นๆ แต่นี่ไม่เพียงพอในสภาพแวดล้อมการแข่งขันอีคอมเมิร์ซสมัยใหม่ หน้าผลิตภัณฑ์มีบทบาทสำคัญในแพลตฟอร์มธุรกิจที่สร้างโดย WooCommerce โดยเป็นหนึ่งในหน้าที่สำคัญที่สุด อย่างไรก็ตาม หน้าเริ่มต้นไม่ได้เป็นเพียงการตัดหน้านั้น
ความสำคัญของการปรับแต่งหน้าผลิตภัณฑ์ไม่สามารถพูดเกินจริงได้
ด้วยการปรับแต่งหน้าผลิตภัณฑ์ของคุณ คุณกำลังมอบประสบการณ์การช็อปปิ้งที่ไม่เหมือนใครให้กับลูกค้าของคุณ ซึ่งเป็นสิ่งสำคัญสำหรับการรักษาผู้เข้าชมและเพิ่มจำนวนการขาย
ในบทความนี้ เราจะแนะนำคุณตลอดขั้นตอนการใช้ตัวแก้ไขหน้าผลิตภัณฑ์ WooCommerce และวิดเจ็ต WooCommerce ที่กำหนดเองเพื่อสร้างหน้าผลิตภัณฑ์ที่น่าสนใจ และอื่นๆ
สารบัญ
เครื่องมือที่จำเป็นในการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce?
ก่อนอื่น คุณต้อง ติดตั้ง WordPress เวอร์ชันล่าสุด บนเซิร์ฟเวอร์ของคุณ และยิ่งไปกว่านั้น ปลั๊กอิน WooCommerce จะต้องได้รับการติดตั้งเพื่อรองรับฟังก์ชันการทำงานของหน้าร้านค้า/ร้านค้าทั้งหมด
คุณต้องมี ธีม WordPress ที่ขับเคลื่อนด้วยฟังก์ชันการทำงาน และสุดท้ายแต่ไม่ท้ายสุด คุณจะต้องมี ปลั๊กอิน WooCommerce Elementor Shop Builder ด้วยปลั๊กอินตัวสร้างร้านค้า Elementor คุณจะสามารถควบคุมและปรับแต่งหน้าร้านค้าแต่ละหน้าได้อย่างเต็มที่และตารางผลิตภัณฑ์ในตลาดกลาง รายการผลิตภัณฑ์ บล็อกการเปรียบเทียบผลิตภัณฑ์ ฯลฯ
วิธีปรับแต่งหน้าผลิตภัณฑ์ WooCommerce
เราหวังว่าคุณจะมีการติดตั้ง WordPress ที่ใช้งานได้และธีมอีคอมเมิร์ซที่ใช้งานได้ติดตั้งอยู่บนเซิร์ฟเวอร์ของคุณแล้ว ตอนนี้ มาดูกระบวนการทีละขั้นตอนของการปรับแต่งหน้าผลิตภัณฑ์โดยเริ่มจากทรัพยากรและเครื่องมือ WordPress เพิ่มเติมที่จำเป็น
ขั้นตอนที่ 1: การติดตั้งปลั๊กอินเสริม Elementor WooCommerce
ในตัวอย่างสดของการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ที่มีองค์ประกอบต่างๆ & ตัวอย่างรูปแบบผลิตภัณฑ์ WooCommerce ที่ควรนำเสนอหน้าผลิตภัณฑ์ที่ทันสมัยให้กับลูกค้า เราจะใช้สิ่งที่คล้ายกับตัว สร้างหน้าผลิตภัณฑ์ WooCommerce ซึ่งเรียกว่า ShopReady
เครื่องมือสร้างร้านค้า ShopReady Elementor เป็นเครื่องมือที่รวมทุกอย่างได้อย่างน่าทึ่งสำหรับการสร้างเว็บไซต์ร้านค้าอีคอมเมิร์ซที่มีประสิทธิภาพ ปลั๊กอินมาพร้อมกับวิดเจ็ตที่สร้างขึ้นอย่างมืออาชีพ 105+ รายการพร้อมฟังก์ชันและเครื่องมือเฉพาะกรณีการใช้งาน ตัวอย่างเช่น ด้วยปลั๊กอินอีคอมเมิร์ซนี้ คุณสามารถสร้างตัวกรองผลิตภัณฑ์ WooCommerce ที่ใช้งานได้ซึ่งสามารถกรองผลิตภัณฑ์ด้วยราคา ขนาด น้ำหนัก สี คะแนน การจัดส่ง ฯลฯ
ในการเริ่มต้นใช้งานปลั๊กอินเสริม WooCommerce ให้เริ่มต้นด้วยการดาวน์โหลด ในการดำเนินการดังกล่าว ให้เข้าสู่ระบบ แดชบอร์ด WordPress ของคุณ ไปที่ และคลิกที่ ปุ่ม ติดตั้ง
รอจนกระทั่งติดตั้งปลั๊กอินสำเร็จแล้วคลิก เปิดใช้ งาน
เมนู ShopReady จะปรากฏบนแดชบอร์ด WordPress ของคุณ จากที่นี่ คุณจะสามารถเข้าถึงวิดเจ็ต โมดูล และเนื้อหาที่กำหนดไว้ล่วงหน้าทั้งหมดที่มีให้โดยปลั๊กอินเครื่องมือปรับแต่งหน้าร้านค้า
จากเมนูง่ายๆ นี้ คุณสามารถเปิด/ปิดวิดเจ็ต สร้างเทมเพลต และแทรกคีย์ API สำหรับฟังก์ชันต่างๆ
คุณสมบัติที่ยอดเยี่ยมอีกประการของปลั๊กอินนี้คือตัวสลับสกุลเงินสำหรับความสามารถของ WooCommerce หากต้องการเปิดใช้งานฟังก์ชันนี้ คุณจะต้องทำตามคำแนะนำที่แสดงด้านล่าง
หากต้องการเพิ่มคีย์สกุลเงิน API ของคุณที่สร้างโดย Exchangerate ให้คลิกแท็บ API
เข้าสู่ระบบแดชบอร์ดบัญชี Exchangerate ของคุณและคัดลอกคีย์ API ของคุณเพื่อขอรับ หลังจากวางคีย์ API ของคุณแล้ว ให้ไปที่ แดชบอร์ด WordPress > ShopReady > API แล้วคลิก ขั้นตอนที่ 2: ใช้เทมเพลตหน้าผลิตภัณฑ์ที่ตั้งไว้ล่วงหน้าหรือสร้างจากศูนย์
ขั้นตอนต่อไปคือการเริ่มทำงานในหน้าผลิตภัณฑ์ แต่ก่อนหน้านั้น คุณจะต้องเพิ่มผลิตภัณฑ์ลงในเว็บไซต์ WooCommerce ของคุณ หากคุณไม่ทราบวิธีดำเนินการ คุณสามารถปฏิบัติตามคู่มือนี้ใน – วิธีเพิ่มผลิตภัณฑ์อย่างรวดเร็วของ WooCommerce
ตอนนี้เพื่อเริ่มปรับแต่งหน้าสำหรับการแสดงสินค้า ให้ใช้ ShopReady – WooCommerce Builder เพื่อสร้างหน้าผลิตภัณฑ์อย่างง่ายโดยไปที่แดชบอร์ดปลั๊กอินแล้วคลิก แท็บ เทมเพลต เปิดใช้งานหมวดหมู่เทมเพลตผลิตภัณฑ์และค้นหาการตั้งค่าผลิตภัณฑ์เดียว ตอนนี้คลิกที่ไอคอนแก้ไข
และคุณจะถูกเปลี่ยนเส้นทางไปยัง หน้าจอ Elementor Editor ตอนนี้เพื่อเริ่มปรับแต่งหน้า ให้คลิกที่เครื่องหมายบวกเพื่อเพิ่มส่วน Elementor มีส่วน Elementor หลายประเภทที่คุณสามารถเพิ่มลงในเพจของคุณ ขึ้นอยู่กับว่าคุณต้องการให้เพจของคุณมีหน้าตาเป็นอย่างไร และวิดเจ็ตใดที่คุณต้องการใช้
ขั้นตอนที่ 3: การปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ด้วย Elementor Widgets
- การเพิ่มชื่อสินค้า
เนื่องจากคุณได้วางโครงสร้างส่วน Elementor พื้นฐานสำหรับหน้าผลิตภัณฑ์ WooCommerce แล้ว คุณสามารถเริ่มต้นด้วยการเพิ่มชื่อผลิตภัณฑ์ ในการดำเนินการดังกล่าว คุณจะต้องลากและวางวิดเจ็ตชื่อผลิตภัณฑ์บนหน้าผลิตภัณฑ์
และเพื่อแสดงชื่อผลิตภัณฑ์ที่เหมาะสม ให้คลิกที่ แท็บ เนื้อหา จากนั้นคุณจะพบตัวเลือกการ รีเฟรช ตัว แก้ไข เลือกชื่อผลิตภัณฑ์ที่เหมาะสมจาก ตัวเลือก ผลิตภัณฑ์สาธิต
คุณต้องเพิ่มหรือแก้ไขข้อมูลผลิตภัณฑ์ที่เหมาะสมจาก แดชบอร์ดผลิตภัณฑ์ WooCommerce เพื่อให้ข้อมูลนี้แสดงชื่อผลิตภัณฑ์ที่เหมาะสม
- การเพิ่มรูปภาพเด่นลงในหน้าผลิตภัณฑ์
ถัดไป คุณจะต้องมีแกลเลอรีรูปภาพผลิตภัณฑ์และรูปภาพคุณลักษณะสำหรับผลิตภัณฑ์ของคุณ เพื่อจุดประสงค์นี้ คุณสามารถใช้วิดเจ็ตรูปภาพใดๆ ก็ได้ที่มีให้โดยส่วน เสริม Elementor เดียว สำหรับอีคอมเมิร์ซ
สำหรับตัวอย่างนี้ เราจะใช้ ShopReady Thumbnail กับวิดเจ็ต Zoom ซึ่งจะทำงานตามชื่อของมัน ด้วยวิดเจ็ตนี้ คุณสามารถแสดงให้ลูกค้าของคุณเห็นรูปแบบการซูมผลิตภัณฑ์ WooCommerce ของภาพผลิตภัณฑ์ของคุณเมื่อพวกเขาวางเมาส์เหนือรูปภาพผลิตภัณฑ์ของคุณ
เช่นเดียวกับก่อนหน้านี้ คุณสามารถเลือกรูปภาพผลิตภัณฑ์ที่ถูกต้องจาก ตัวเลือก ผลิตภัณฑ์สาธิต แท็บ เนื้อหา
- การเพิ่มบล็อคสำหรับ Widget ราคา
รายการสำคัญอีกประการหนึ่งที่ควรมีในหน้าผลิตภัณฑ์อีคอมเมิร์ซของคุณคือบล็อกการกำหนดราคาผลิตภัณฑ์ สำหรับสิ่งนี้ คุณจะต้องอัปเดตแอตทริบิวต์ผลิตภัณฑ์ WooCommerce ด้วยการอัปเดตที่ถูกต้อง และใช้วิดเจ็ต ShopReady Price ซึ่งต้องอยู่ใต้ชื่อผลิตภัณฑ์
หากต้องการแสดงราคาที่ถูกต้อง ให้เลือกชื่อผลิตภัณฑ์จาก ตัวเลือก ผลิตภัณฑ์สาธิต ใต้ แท็บ เนื้อหา
- การเพิ่มรายละเอียดสินค้า
นอกจากนี้คุณยังมีความสามารถในการเพิ่มรายละเอียดผลิตภัณฑ์ที่ปรับแต่งได้สูงโดยใช้ วิดเจ็ต คำอธิบาย ผลิตภัณฑ์ WooCommerce นี้ จากแท็บรูปแบบ คุณจะมีตัวเลือกในการปรับแต่งลักษณะที่คำอธิบายผลิตภัณฑ์จะปรากฏต่อมวลชน
- การเพิ่มฟังก์ชันการทำงานในรถเข็น
หยิบใส่ตะกร้าเป็นอีกหนึ่งคุณลักษณะที่สำคัญมากที่ต้องมี ซึ่งช่วยให้ลูกค้าของคุณมีสินค้าหลายรายการในหน้าตะกร้าสินค้าก่อนที่จะดำเนินการไปยังหน้าชำระเงิน
หากต้องการ ให้ฟังก์ชัน Add to Cart มีประสิทธิภาพ ในหน้าร้านค้าอีคอมเมิร์ซของคุณ คุณสามารถใช้วิดเจ็ต ShopReady Add to Cart ได้ ด้วยวิดเจ็ตนี้ คุณสามารถให้ลูกค้าของคุณเพิ่มและลดปริมาณสินค้าในรถเข็นได้โดยตรงจากบล็อก Add to Cart
คุณยังปรับแต่งปุ่ม Add-to-cart ของ Elementor จากการออกแบบผลิตภัณฑ์ WooCommerce การ พิมพ์แท็บ Elementor Style สี พื้นหลัง ระยะขอบ ช่องว่างภายใน ฯลฯ
- การเพิ่มข้อมูลเมตาไปยังหน้าผลิตภัณฑ์
เพื่อมอบประสบการณ์การช็อปปิ้งที่ดียิ่งขึ้นให้กับลูกค้าของคุณ คุณควรติดตั้งตัวกรองผลิตภัณฑ์ WooCommerce โดยใช้ข้อมูลเมตาและแอตทริบิวต์ผลิตภัณฑ์ที่คุณเพิ่มในขณะที่ เพิ่มผลิตภัณฑ์ไป ยัง WooCommerce
หากต้องการแสดงข้อมูลเหล่านี้บนหน้าสินค้าของคุณ ให้ค้นหา วิดเจ็ต ShopReady Meta แล้ววางลงใต้ปุ่มเพิ่มในรถเข็น
แท็กผลิตภัณฑ์และข้อมูลเมตาของคุณควรปรากฏอย่างถูกต้องเมื่อคุณเลือกชื่อผลิตภัณฑ์ที่ถูกต้องจาก ตัวเลือก ผลิตภัณฑ์สาธิต ใต้ แท็บ เนื้อหา
- การเพิ่มปุ่มแชร์โซเชียลมีเดียในหน้าผลิตภัณฑ์
ลูกค้าของคุณยังสามารถแชร์โพสต์ผลิตภัณฑ์ของคุณบนโซเชียลมีเดียได้จากหน้าผลิตภัณฑ์ WooCommerce ของคุณโดยใช้บล็อกปุ่มแชร์โซเชียลมีเดียอย่างง่าย ซึ่งคุณสามารถสร้างได้โดยใช้วิดเจ็ตแชร์ Elementor Social Share แบบลากและวาง
บล็อกสามารถปรับแต่งด้วยไอคอนโซเชียลมีเดีย ข้อความ และลิงก์ที่แชร์ได้โดยตรงจาก แท็บ เนื้อหา และยังสามารถปรับแต่งเพื่อเปลี่ยนรูปลักษณ์ของบล็อกการแบ่งปันทางสังคมจาก แท็บ Elementor Style
และคุณทำกับพื้นฐานของการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce เสร็จแล้ว
ขั้นตอนที่ 4: การเพิ่มผลิตภัณฑ์ที่เกี่ยวข้องไปยังหน้าผลิตภัณฑ์ WooCommerce
วิธีที่ยอดเยี่ยมในการเพิ่มยอดขายออนไลน์คือการแสดงผลิตภัณฑ์ที่เกี่ยวข้องในหน้าผลิตภัณฑ์ของคุณโดยใช้วิดเจ็ตผลิตภัณฑ์ที่เกี่ยวข้องของ WooCommerce ด้วยวิดเจ็ต ShopReady Related Products คุณสามารถสร้างบล็อกตัวเลื่อนสินค้าที่สวยงามในส่วนต่างๆ
ในการใช้วิดเจ็ต คุณเพียงแค่ลากและวางวิดเจ็ตไว้ใต้บล็อกผลิตภัณฑ์เดียว และเลือกผลิตภัณฑ์แต่ละรายการที่คุณต้องการแสดงภายใต้หน้าผลิตภัณฑ์เดียวของคุณ
สรุปแล้ว
เราหวังว่าคู่มือข้อมูลนี้จะช่วยให้คุณมีความเข้าใจที่กว้างขึ้นเกี่ยวกับการปรับแต่งเทมเพลตหน้าผลิตภัณฑ์ WooCommerce และวิธีที่คุณสามารถใช้เครื่องมือที่น่าทึ่งเหล่านี้เพื่อทำให้เว็บไซต์อีคอมเมิร์ซของคุณมีฟังก์ชันการทำงานที่ดีขึ้น
ด้วยรายละเอียดผลิตภัณฑ์ป๊อปอัปของ WooCommerce ไปยังตารางเปรียบเทียบผลิตภัณฑ์ ทุกสิ่งที่ตลาดอีคอมเมิร์ซต้องการ ShopReady สามารถส่งมอบได้ หากคุณมีคำถามใด ๆ เกี่ยวกับเรื่องนี้โปรดติดต่อในส่วนความคิดเห็นด้านล่าง