วิธีเปลี่ยนเทมเพลตผลิตภัณฑ์ใน WooCommerce สำหรับ WordPress

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

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

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

คุณสามารถเพิ่มโค้ด CSS ได้โดยใช้ WordPress Theme Customizer ไปที่ ลักษณะที่ปรากฏ > จัดการการตั้งค่า บนแดชบอร์ด WordPress ของคุณ เลื่อนลงและเลือก "CSS เพิ่มเติม" จากเมนู คุณจะได้รับแจ้งให้ป้อนรหัส CSS ของคุณในช่องข้อความ

ในการแทนที่ ไฟล์เทมเพลต WooCommerce คุณสามารถสร้างโฟลเดอร์ชื่อ 'woocommerce' ในไดเร็กทอรีของธีมของคุณ จากนั้นสร้างโฟลเดอร์/เทมเพลตที่คุณต้องการแทนที่ที่นั่น

ในการสร้างไฟล์ที่กำหนดเอง ให้สร้างไดเร็กทอรีใหม่ในธีมย่อยของคุณ Woocommerce ควรอยู่ในไดเร็กทอรีธีมของ WordPress ซึ่งอยู่ที่ WP-content/themes/yourthemename.html หากคุณทำเช่นนี้ คุณจะมั่นใจได้ว่าการเปลี่ยนแปลงใดๆ ที่คุณทำจะไม่ถูกลบเมื่อคุณอัปเดต WooCommerce หรือธีมหลักของคุณ

ฉันจะเปลี่ยนการแสดงผลิตภัณฑ์ใน Woocommerce ได้อย่างไร

ที่ด้านซ้ายของหน้าจอ ให้คลิก ลิงก์ WooCommerce หลังจากนั้นให้เลื่อนลงไปทางด้านซ้ายของ Product Catalogue เพื่อดูหน้า Products per Row และจำนวนสินค้าต่อหน้าสำหรับสินค้าที่ต้องการ

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

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

ตัวแก้ไขหน้าผลิตภัณฑ์ Woocommerce อยู่ที่ไหน

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

วิธีปรับแต่งหน้าผลิตภัณฑ์ Woocommerce ใน WordPress

มีสองสามวิธีที่คุณสามารถปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ใน WordPress วิธีหนึ่งคือแก้ไขไฟล์เทมเพลตหน้าผลิตภัณฑ์ (product-template.php) ในธีมของคุณ นี่เป็นวิธีขั้นสูงที่สุดในการปรับแต่งหน้าผลิตภัณฑ์ เนื่องจากคุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับ PHP อีกวิธีหนึ่งในการปรับแต่งหน้าผลิตภัณฑ์ WooCommerce คือการใช้ปลั๊กอิน มีปลั๊กอินสองสามตัวที่ให้คุณปรับแต่งหน้าผลิตภัณฑ์ได้ ซึ่งรวมถึง WooCommerce Custom Product Page Builder และ WooCommerce Product Page Builder ปลั๊กอินเหล่านี้ช่วยให้คุณสามารถเพิ่มฟิลด์ที่กำหนดเองในหน้าผลิตภัณฑ์ รวมทั้งเปลี่ยนเลย์เอาต์ของหน้า หากคุณไม่สะดวกที่จะแก้ไข PHP หรือใช้ปลั๊กอิน คุณสามารถจ้างนักพัฒนาซอฟต์แวร์เพื่อปรับแต่งหน้าผลิตภัณฑ์ WooCommerce ให้คุณได้ นี้มักจะเป็นตัวเลือกที่แพงที่สุด แต่จะช่วยให้มั่นใจได้ว่าหน้าผลิตภัณฑ์ตรงกับที่คุณต้องการ

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

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

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

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

เทมเพลตหน้ารายละเอียดผลิตภัณฑ์ Woocommerce

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

คุณสมบัติใหม่สำหรับร้านค้าออนไลน์!

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

รหัสหน้าผลิตภัณฑ์ Woocommerce

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

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

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

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

หน้าผลิตภัณฑ์ Woocommerce

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

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

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

หน้าผลิตภัณฑ์ WooCommerce ช่วยให้คุณสามารถอัปโหลดภาพนิ่งมากกว่าวิดีโอไปยังแกลเลอรีผลิตภัณฑ์ แต่คุณไม่สามารถอัปโหลดวิดีโอได้ ส่วนขยาย Product Video สามารถใช้เพื่อฝังวิดีโอจาก YouTube, Vimeo, Dailymotion, Metacafe หรือ Facebook ด้วยส่วนขยาย Recommendation Engine คุณสามารถเพิ่มคำแนะนำผลิตภัณฑ์จาก Netflix หรือ Amazon ในหน้าผลิตภัณฑ์ของคุณ

หน้าผลิตภัณฑ์ Woocommerce คืออะไร?

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