วิธีตั้งค่าขนาดย่อหน้าร้าน WooCommerce

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

ตั้งค่าขนาดย่อหน้าร้าน WooCommerce

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

ประโยชน์ของการตั้งค่าขนาดภาพผลิตภัณฑ์ของคุณคืออะไร

ก่อนที่เราจะพูดถึง 'how' คุณอาจสงสัยว่าทำไม? นี่คือประโยชน์บางประการ:

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

ขั้นตอนในการปรับขนาดภาพขนาดย่อของผลิตภัณฑ์

ตามค่าเริ่มต้น WooCommerce อนุญาตให้คุณปรับขนาดภาพผลิตภัณฑ์ สิ่งที่คุณต้องทำคือทำตามขั้นตอนง่าย ๆ เหล่านี้:

1. ลงชื่อเข้าใช้ไซต์ WordPress และเข้าถึง แดชบอร์ด ในฐานะผู้ดูแลระบบ
2. จากเมนูแดชบอร์ด ให้คลิกที่ เมนูลักษณะที่ปรากฏ > ปรับแต่ง
3. คลิกที่ WooCommerce > รูปภาพผลิตภัณฑ์
4. ในช่องการครอบตัดภาพขนาดย่อ คุณสามารถกำหนดความสูงของรูปภาพได้
5. คลิกที่ เผยแพร่ หากคุณพอใจกับการเปลี่ยนแปลง

สุดยอดคู่มือความสูงของภาพสินค้าในร้านค้า

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

• 1:1: หากคุณเลือก 1:1 รูปภาพของคุณจะถูกครอบตัดให้มีความกว้าง 360px และความสูง 360px วิธีนี้จะได้ผล สมมติว่าคุณได้ตั้งค่าความกว้างของรูปภาพ 360px ในช่องความกว้างของภาพขนาดย่อ
• กำหนดเอง: ที่นี่คุณสามารถเลือกอัตราส่วนกว้างยาวของรูปภาพได้ นี่คืออัตราส่วนภาพยอดนิยมบางส่วน (1:1, 5:4, 4:3, 3:2, 16:9 และ 3:1)
• Uncropped: ในตัวเลือกนี้ ความสูงของรูปภาพจะไม่ถูกแตะต้อง รูปภาพในร้านค้าของคุณจะแสดงโดยใช้อัตราส่วนภาพที่อัปโหลด

คำถามที่พบบ่อย

• ฉันจะเปลี่ยนขนาดรูปภาพได้อย่างไรหาก Theme Developer ตั้งค่าไว้

มีวิธีแก้ไขง่ายๆ โดยการลบหรือเปลี่ยนการตั้งค่าความกว้างของรูปภาพจากไฟล์ functions.php ของธีมของคุณ ในธีมหน้าร้าน ไม่มีการตั้งค่าสำหรับรูปภาพหลักหรือช่องรูปขนาดย่อ ที่เป็นเช่นนี้เพราะมีประกาศไว้ก่อนแล้วว่าใน storefront/inc/class-storefront.php

 // ประกาศสนับสนุน WooCommerce

 add_theme_support( 'woocommerce', apply_filters ( 'storefront_woocommerce_args', อาร์เรย์ (

 'single_image_width' => 416,

 'thumbnail_image_width' => 324,

 'product_grid' => อาร์เรย์ (

 'default_columns' => 3,

 'default_rows' => 4,

 'min_columns' => 1,

 'max_columns' => 6,

 'min_rows' => 1

 )

) ) );

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

• ฉันจะกำหนดขนาดภาพแคตตาล็อกได้อย่างไร

สำหรับรูปภาพสินค้าของร้านค้าและรูปภาพแคตตาล็อกหรือหมวดหมู่ รูปภาพจะถูกปรับขนาดตามการตั้งค่าจาก ลักษณะที่ปรากฏ > ปรับแต่ง > WooCommerce > รูปภาพสินค้า > ความกว้างของรูปย่อ

• เหตุใดรูปภาพผลิตภัณฑ์ WooCommerce ของฉันจึงพร่ามัว

หากเป็นกรณีนี้ในร้านค้า WooCommerce ของคุณ คุณสามารถตรวจสอบบางสิ่งได้:

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

• ขนาดภาพที่ดีที่สุดคืออะไร?

ขนาดภาพที่ดีที่สุดของร้านค้าออนไลน์ของคุณขึ้นอยู่กับธีมที่คุณใช้สำหรับร้านค้าของคุณ ขนาดภาพกว้าง 800 – 1000px เหมาะหากคุณขายสินค้าง่ายๆ เช่น เสื้อเชิ้ต

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

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

บทสรุป

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

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

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

บทความที่คล้ายกัน

1. วิธีเพิ่มแถบด้านข้างหน้าร้าน WooCommerce
2. วิธีสร้างธีมลูกหน้าร้าน WooCommerce [คู่มือฉบับสมบูรณ์]
3. วิธีเปลี่ยนเส้นทางผู้ใช้หลังจากลงทะเบียนตามบทบาท
4. วิธีลบเอฟเฟกต์การซูมบนภาพผลิตภัณฑ์ WooCommerce
5. วิธีปรับความสูงของหน้าร้าน WooCommerce ของส่วนหัว
6. วิธีลบแถบด้านข้างออกจากหน้าผลิตภัณฑ์ในธีม WooCommerce
7. วิธีอนุมัติคำสั่งซื้ออัตโนมัติใน WooCommerce
8. วิธีตั้งค่าผลิตภัณฑ์ที่เกี่ยวข้องที่กำหนดเองใน WooCommerce
9. วิธีค้นหา ID ผลิตภัณฑ์ของคุณอย่างรวดเร็วใน WooCommerce
10. วิธีเพิ่มผลิตภัณฑ์ Woocommerce จาก Frontend
11. วิธีเพิ่มสินค้าหลังจากตั้งค่าหน้าร้าน [คู่มือสำหรับผู้เริ่มต้น]
12. วิธีซ่อนรูปแบบสินค้าหมดใน WooCommerce
13. วิธีซ่อนปุ่ม Add to Cart ใน WooCommerce
14. วิธีซ่อนผลิตภัณฑ์ WooCommerce จากผลการค้นหา
15. วิธีแก้ไข Uncaught TypeError: wp.template ไม่ใช่ฟังก์ชัน
16. วิธีใช้คุณสมบัติของผลิตภัณฑ์ WooCommerce ทีละขั้นตอน [คู่มือฉบับสมบูรณ์]
17. วิธีแสดงผลิตภัณฑ์ WooCommerce ตามหมวดหมู่