จะแก้ไขหน้าร้านค้า WooCommerce W / O Elementor ได้อย่างไร
เผยแพร่แล้ว: 2022-10-18สงสัยว่าจะทำให้หน้าร้านค้า WooCommerce ของคุณโดดเด่นจากฝูงชนได้อย่างไร? วิธีที่ดีที่สุดวิธีหนึ่งคือการแก้ไขหน้าเพื่อให้เป็นมิตรกับผู้ซื้อมากขึ้น ตัวอย่างเช่น คุณสามารถเพิ่มวิดเจ็ตผลิตภัณฑ์ของ Elementor เพื่อการปรับแต่งขั้นสูง
แต่เนื่องจากมีหลายวิธีในการแก้ไขหน้าร้านค้า WooCommerce ของคุณ คุณจึงใช้วิธีใด ทุกอย่างขึ้นอยู่กับวิธีที่คุณพอใจในการทำงาน คุณสามารถใช้ปลั๊กอิน elementor โค้ด หรือแม้แต่การ รวมกันของ elementor และ Shopready
โดยไม่ต้องกังวลใจอีกต่อไป มาดูกันว่าคุณจะแก้ไขหน้าร้านค้า WooCommerce ของคุณได้อย่างไรโดยไม่มีองค์ประกอบหรือเพื่อประสบการณ์การใช้งานที่ดียิ่งขึ้น
หากคุณต้องการเพิ่มยอดขายให้กับธุรกิจออนไลน์ของคุณ คุณควรเริ่มต้นด้วยการแก้ไขหน้าร้านค้า WooCommerce ของคุณ ด้วยวิธีนี้ คุณสามารถทำให้ใช้งานง่ายขึ้น ด้านล่างนี้เป็นวิธีที่มีประสิทธิภาพสูงสุดในการ ปรับแต่งหน้าร้านค้าของคุณ
สารบัญ
วิธีที่หนึ่ง: การแก้ไขด้วยตนเอง
หากคุณไม่มีปัญหาในการเขียนโค้ดเล็กน้อย คุณสามารถแก้ไขหน้าร้านค้า WooCommerce ได้ด้วยตนเอง ด้านล่างนี้เป็นคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการทำ
ขั้นตอนที่ 1: รับธีมลูกแล้วตั้งชื่อ
เมื่อคุณซื้อธีมของไซต์ ธีมนั้นควรมาพร้อมกับธีมย่อย แต่ถ้าคุณหามันไม่เจอ คุณสามารถขอให้ผู้พัฒนาธีมจัดหามาให้ได้เสมอ
หากต้องการตั้งชื่อธีมลูก ให้เปิดแผงควบคุม WordPress แล้วคลิกตัวจัดการไฟล์ จากนั้นเลือก WP-Content >Themes>Your-theme-name จากที่นี่ คุณสามารถเลือกตั้งชื่อธีมลูกของคุณอายุยี่สิบยี่สิบหรืออย่างอื่นที่ใกล้เคียงได้
ขั้นตอนที่ 2: เพิ่มโครงสร้างโฟลเดอร์ในธีมย่อย
เมื่อคุณสร้างธีมลูกแล้ว ขั้นตอนต่อไปคือการสร้างโครงสร้างโฟลเดอร์ภายในธีมนั้น ขั้นแรก ให้คลิกที่โฟลเดอร์ธีมลูกของคุณ (ยี่สิบยี่สิบคน) ซึ่งคุณจะพบได้ภายใต้ธีม จากนั้นสร้างโฟลเดอร์ใหม่ภายใต้นั้นและตั้งชื่อเป็น WooCommerce
ขั้นตอนที่ 3: สร้างโฟลเดอร์ย่อย
ภายใต้โฟลเดอร์ WooCommerce คุณจะต้องสร้างโฟลเดอร์อื่นและเรียกมันว่า 'archive-product-.php' โฟลเดอร์ เทมเพลตเก็บถาวรผลิตภัณฑ์ นี้จะทำหน้าที่เป็นไฟล์เทมเพลตหน้าร้านค้า
ขั้นตอนที่ 4: เพิ่มเนื้อหาลงในไฟล์เทมเพลตหน้าร้านค้าของคุณ
ไฟล์เทมเพลตหน้าร้านค้าที่คุณสร้างในขั้นตอนที่สามจะว่างเปล่า ดังนั้น เพื่อให้ใช้งานได้ คุณต้องเพิ่มเนื้อหา ในการทำเช่นนั้น คุณสามารถใช้รหัส แต่ถ้าคุณไม่มีความรู้เกี่ยวกับวิธีการดำเนินการ ให้ข้ามไปยังขั้นตอนถัดไป
ขั้นตอนที่ 5: ออกแบบเทมเพลตหน้าร้านค้าของคุณ
ที่นี่ คุณไม่จำเป็นต้องออกแบบหน้าร้านค้า WooCommerce จากศูนย์ คุณสามารถใช้ เทมเพลตหน้าผลิตภัณฑ์ที่ออกแบบไว้ล่วงหน้า แทนได้ จากนั้น ให้มองหา Parent Theme และเลือกไฟล์ single.php หรือ index.php จากนั้นคัดลอกและวางไฟล์ใดไฟล์หนึ่งลงในโฟลเดอร์ WooCommerce ที่คุณสร้างไว้ในขั้นตอนที่ 2
หลังจากนั้น ให้ลบไฟล์ 'archive-product.php' ที่มีอยู่ของคุณ จากนั้นตั้งชื่อไฟล์ใหม่ของคุณ (single.php หรือ index.php) 'archive-product.php' ถัดไป คุณจะต้องใช้รหัสย่อเพื่อแก้ไขหน้า
ขั้นตอนที่ 6: ใช้รหัสย่อ
ขั้นตอนแรกคือการแยกหน้าผลิตภัณฑ์ของคุณออกเป็นแถวหรือคอลัมน์ ตัวอย่างเช่น คุณสามารถตัดสินใจวางผลิตภัณฑ์สองรายการในแถวสองคอลัมน์เดียว ในกรณีนี้ คุณสามารถใช้รหัสย่อ:
อย่างไรก็ตาม หากต้องการแสดงผลิตภัณฑ์ในสองคอลัมน์โดยจำกัดผลิตภัณฑ์หกรายการในแต่ละคอลัมน์ ให้ใช้รหัสย่อนี้:
คุณเพียงแค่ป้อนรหัสในไฟล์ archive-product.php ของคุณ แต่ก่อนอื่น คุณต้องลบรหัสที่มีอยู่ก่อน คุณยังสามารถลองใช้รหัสย่อต่างๆ ได้จนกว่าคุณจะได้หน้าตาร้านค้าที่ต้องการ
วิธีที่สอง: การใช้ Elementor

ไม่ได้อยู่ในอารมณ์สำหรับการเข้ารหัส? คุณอาจ ปรับแต่งหน้าผลิตภัณฑ์ WooCommerce เริ่มต้น ด้วยความช่วยเหลือของ elementor วิธีนี้ค่อนข้างใช้งานง่าย และนี่คือขั้นตอนง่ายๆ ที่จะช่วยคุณ
ขั้นตอนที่ 1: เปิดใช้งาน WordPress elementor
หากคุณไม่มีองค์ประกอบ ให้ไปที่แดชบอร์ด WordPress แล้วคลิกปลั๊กอิน จากนั้นเพิ่มตัวเลือกใหม่ ในช่องค้นหา ให้มองหาเครื่องมือสร้างเว็บไซต์ Elementor แล้วเลือกติดตั้ง สุดท้ายให้กดปุ่มเปิดใช้งาน
ขั้นตอนที่ 2: ออกแบบที่เก็บถาวรผลิตภัณฑ์ใหม่
หลังจากติดตั้ง elementor คุณเพียงแค่สร้าง เทมเพลตไฟล์เก็บถาวรผลิตภัณฑ์ ใหม่ คุณสามารถทำได้โดยไปที่ WordPress Admin Dashboard และเลือก My Templates
ภายใต้ เทมเพลต คลิกแท็บ เพิ่มใหม่ ที่ด้านบนซ้ายของแดชบอร์ด และเลือก คลังผลิตภัณฑ์ สุดท้าย ใช้ตัวเลือกสร้างเทมเพลต ตั้งชื่อเทมเพลตของคุณ
ขั้นตอนที่ 3: ปรับแต่งเทมเพลตของคุณ
ในการปรับแต่งเทมเพลตหน้าผลิตภัณฑ์ของคุณ คุณสามารถเลือกทำตั้งแต่เริ่มต้น ในกรณีนี้ คุณจะพบวิดเจ็ตที่ไม่ซ้ำกันจำนวนหนึ่งบนแผงแก้ไขที่คุณสามารถใช้ได้
หรือคุณสามารถใช้เทมเพลตที่ออกแบบไว้ล่วงหน้าได้ Elementor ให้คุณเลือกเลย์เอาต์และสไตล์ของหน้าผลิตภัณฑ์ที่แตกต่างกัน ดังนั้น คุณเพียงแค่ต้องเลือกสไตล์แล้วปรับแต่งให้เหมาะกับแบรนด์ของคุณ
ขั้นตอนที่ 4: ใช้ประโยชน์จากวิดเจ็ตผลิตภัณฑ์
ในการปรับแต่งหน้าร้านค้า WooCommerce ของคุณเพิ่มเติม คุณจะต้องเพิ่มวิดเจ็ต บนแดชบอร์ด Elementor WordPress ให้คลิกที่แท็บ Elements คุณจะเห็นวิดเจ็ตมากมายให้เลือก รวมถึงรถเข็นเมนู ผลิตภัณฑ์ รายการเพิ่มในรถเข็นแบบกำหนดเอง และอื่นๆ อีกมากมาย
ขั้นตอนที่ 5: ดูตัวอย่างหน้าร้านค้าที่คุณกำหนดเอง
ก่อนที่คุณจะกดปุ่มเผยแพร่ คุณต้องดูตัวอย่างหน้าผลิตภัณฑ์ของคุณ ที่แผงด้านซ้ายล่าง คุณจะเห็นไอคอนรูปตา คลิกที่ไอคอนและเลือกการตั้งค่าการแสดงตัวอย่าง ถัดไป เลือกผลิตภัณฑ์เฉพาะเพื่อดูตัวอย่าง
ขั้นตอนที่ 6: บันทึกและเผยแพร่
เมื่อคุณแก้ไขหน้าร้านค้าเสร็จแล้วและพอใจกับการปรับแต่งแล้ว ให้คลิกปุ่มเผยแพร่ ฟิลด์ เพิ่มเงื่อนไข จะปรากฏขึ้นเพื่อถามคุณว่าคุณต้องการให้เทมเพลตผลิตภัณฑ์ของคุณแสดงที่ใด
เลือกตัวเลือกหน้าร้านค้าแล้วคลิกปุ่มบันทึกและปิด หน้าร้านค้า WooCommerce ที่กำหนดเองของคุณควรใช้งานได้แล้ว
วิธีที่สาม: การใช้ปลั๊กอิน
คุณสามารถใช้ปลั๊กอินใดก็ได้ตามต้องการ เพราะมีปลั๊กอินให้เลือกใช้มากมาย อย่างไรก็ตาม ในบทความนี้ เราจะเน้นที่การใช้ปลั๊กอิน elementor และ Shopready ร่วม กัน เพียงทำตามขั้นตอนเหล่านี้เพื่อแก้ไขหน้าร้านค้าของคุณ
ขั้นตอนที่ 1: ติดตั้ง Shopready
บนแดชบอร์ด WordPress ของคุณ คลิกที่แท็บ Plugins แล้วเลือก Add New option ถัดไป ในช่องค้นหาที่ด้านบนขวาของแผง ให้ค้นหา Shopready แล้วคลิกปุ่มเปิดใช้งาน
ขั้นตอนที่ 2: เพิ่มเทมเพลตหน้าร้านค้า
ถัดไป คุณควรพัฒนาเทมเพลตหน้าร้านค้าเพื่อ ปรับแต่งหน้าผลิตภัณฑ์ WooCommerce เริ่มต้น ในการดำเนินการนี้ ให้ค้นหาปลั๊กอิน Shopready ของคุณ จากนั้นภายใต้แดชบอร์ด ให้เลือกเทมเพลต ที่นี่ คุณจะพบกับเทมเพลตที่สร้างไว้ล่วงหน้ามากมายที่คุณสามารถเลือกให้เข้ากับสไตล์แบรนด์ของคุณได้
เลือกเทมเพลตของคุณและเลื่อนสวิตช์สลับไปทางขวาเพื่อเปิดใช้งานเทมเพลต สุดท้าย คลิกที่ปุ่ม บันทึกการเปลี่ยนแปลง
ขั้นตอนที่ 3: ปรับแต่งเทมเพลตของคุณ
หลังจากเลือกเทมเพลตหน้า Shopready แล้ว ตอนนี้ก็ถึงเวลาปรับแต่งโดยใช้ elementor คุณสามารถปรับแต่งได้โดยใช้ตัวสร้างหน้ารายละเอียดผลิตภัณฑ์ ตัวสร้างหน้ารถเข็น ตัวสร้างหน้าเก็บถาวร หรือแม้แต่ตัวสร้างหน้าบัญชี Shopready มีคุณสมบัติการปรับแต่งมากมายให้คุณ เมื่อคุณแก้ไขหน้าร้านค้า WooCommerce เสร็จแล้ว เพียงคลิกที่ปุ่มอัปเดต
เหตุใดจึงต้องใช้ Shopready เพื่อแก้ไขหน้าร้านค้า WooCommerce
ไม่แน่ใจว่าเหตุใดคุณจึงควรใช้ Shopready และไม่มีปลั๊กอินอื่นใดในการแก้ไขหน้าร้านค้าของคุณ นี่คือสาเหตุบางประการ
สะดวกในการใช้
Shopready ไม่เพียงแต่ใช้งานง่ายในการแก้ไขหน้าร้านค้าของ WooCommerce แต่ยังมีคุณสมบัติการปรับแต่งที่ใช้งานง่ายอีกด้วย ยิ่งไปกว่านั้น ยังมาพร้อมกับตัวเลือก เทมเพลตหน้าผลิตภัณฑ์ที่ออกแบบไว้ล่วงหน้า ดังนั้น คุณไม่จำเป็นต้องเป็นกูรูด้านเทคโนโลยีเพื่อใช้ปลั๊กอินนี้
ชุดปลั๊กอินที่สมบูรณ์
อีกเหตุผลหนึ่งที่คุณควรพิจารณาใช้การ ผสมผสานระหว่าง elementor และ Shopready เนื่องจากปลั๊กอินนี้มาพร้อมกับชุดอุปกรณ์ครบชุด พูดง่ายๆ ก็คือ มันมาพร้อมกับทุกสิ่งที่คุณต้องการในการปรับแต่งหน้าร้านค้า WooCommerce ของคุณ รวมถึงตัวสร้างร้านค้า
การสนับสนุนลูกค้าที่ยอดเยี่ยม
เมื่อคุณใช้ Shopready เพื่อแก้ไขหน้าร้านค้า WooCommerce คุณจะมั่นใจได้ว่าจะได้รับการสนับสนุนตลอด 24 ชั่วโมงพร้อมการฝึกอบรมฟรี ดังนั้น หากคุณติดขัดตรงไหน คุณสามารถติดต่อฝ่ายสนับสนุนลูกค้าเพื่อขอความช่วยเหลือได้ตลอดเวลา
มีให้ในเวอร์ชันฟรีและจ่ายเงิน
หากคุณมีงบประมาณจำกัด คุณสามารถใช้ประโยชน์จากเวอร์ชันฟรีของ Shopready ซึ่งมีตัวเลือกการปรับแต่งมากมาย แต่ถ้าคุณต้องการใบอนุญาตเว็บไซต์เพิ่มเติม คุณสามารถไปที่เวอร์ชัน Startup, Business หรือ Agency Shopready
บทสรุป
วิธีที่คุณนำเสนอผลิตภัณฑ์ของคุณบนเว็บไซต์อีคอมเมิร์ซสามารถมีอิทธิพลอย่างมากต่อยอดขายของคุณ ด้วยเหตุผลนี้ การปรับแต่งหน้าร้านค้า WooCommerce เริ่มต้นของคุณจึงเป็นเรื่องที่สมเหตุสมผล อย่างไรก็ตาม คุณต้องตัดสินใจว่าคุณต้องการแก้ไขเพจด้วยตนเอง โดยใช้ Elementor หรือปลั๊กอิน
โดยรวมแล้ว หากคุณมีความรู้พื้นฐานเกี่ยวกับการเขียนโค้ด เราแนะนำให้แก้ไขหน้าร้านค้าของคุณด้วยตนเอง แต่ถ้าคุณต้องการวิธีปรับแต่งที่ง่ายและรวดเร็ว คุณสามารถลองใช้องค์ประกอบหรือ ในขณะเดียวกัน หากคุณต้องการวิธีการที่นำเสนอคุณสมบัติการปรับแต่งที่ไม่ซ้ำใคร คุณควรใช้ elementor และ Shopready ร่วม กัน