Cara Mengatur Ukuran Thumbnail Toko WooCommerce
Diterbitkan: 2020-09-26
Jika Anda menjalankan toko WooCommerce, maka Anda tahu bahwa gambar adalah salah satu bagian terpenting dari toko online Anda. Namun, WooCommerce menggunakan begitu banyak jenis ukuran gambar produk yang berbeda. Hal ini membuat sulit untuk mencari tahu di mana Anda dapat mengubahnya agar sesuai dengan kebutuhan spesifik Anda.
Setel Ukuran Gambar Mini Toko WooCommerce
Ini berarti kustomisasi gambar WooCommerce bisa menjadi sedikit rumit. Inilah mengapa saya menyusun panduan ini untuk membahas setiap aspek gambar WooCommerce, sehingga Anda dapat langsung beralih ke bagian yang cocok untuk Anda. Selain itu, saya akan menggunakan tema Storefront.
Apa Manfaat Mengatur Ukuran Gambar Produk Anda?
Sebelum kita masuk ke 'bagaimana', Anda mungkin bertanya-tanya tentang mengapa? Berikut adalah beberapa manfaatnya:
- Ini mencegah kekaburan gambar. Gambar dengan ukuran yang salah dapat terlihat buram, yang akan memberikan kesan pertama yang buruk kepada pembeli Anda.
- Ini mengoptimalkan kecepatan. Ketika sebuah gambar besar, dibutuhkan waktu lebih lama untuk memuat. Ini akan memperlambat situs Anda dan ini akan menghasilkan lebih sedikit pendapatan dan pengguna yang tidak senang.
Langkah-langkah untuk Mengubah Ukuran Gambar Thumbnail Produk
Secara default, WooCommerce memungkinkan Anda untuk mengubah ukuran gambar produk. Yang perlu Anda lakukan adalah mengikuti langkah-langkah sederhana ini:
- Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
- Dari menu Dashboard, klik pada Appearance Menu > Customize.
- Klik WooCommerce > Gambar Produk.
- Di bidang pemotongan gambar mini, Anda dapat mengatur ketinggian gambar.
- Klik Terbitkan jika Anda puas dengan perubahannya.
Panduan Utama untuk Ketinggian Gambar Produk Toko
Di bidang thumbnail, Anda ditawarkan 3 opsi berbeda untuk mengatur ketinggian toko atau gambar Katalog:
- 1:1: Jika Anda memilih 1:1, gambar Anda akan dipangkas menjadi lebar 360 piksel dan Tinggi 360 piksel. Ini akan berfungsi, dengan asumsi Anda telah mengatur lebar gambar 360px di bidang Lebar Gambar Kecil.
- Kustom: Di sini Anda dapat memilih rasio aspek gambar. Ini adalah beberapa rasio aspek yang populer (1:1, 5:4, 4:3, 3:2, 16:9, dan 3:1).
- Uncropped: dalam opsi ini, ketinggian gambar tidak akan tersentuh. Gambar di toko Anda akan ditampilkan menggunakan rasio aspek saat diunggah.
Pertanyaan yang Sering Diajukan
- Bagaimana saya bisa mengubah ukuran gambar jika Pengembang Tema mengaturnya?
Ada solusi sederhana untuk ini, dengan menghapus atau mengubah pengaturan lebar gambar dari file functions.php tema Anda. Dalam tema etalase, tidak ada pengaturan untuk gambar utama atau bidang gambar mini. Ini karena mereka dideklarasikan sebelumnya di storefront/inc/class-storefront.php
// Deklarasikan dukungan WooCommerce. add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array( 'single_image_width' => 416, 'thumbnail_image_width' => 324, 'produk_grid' => larik( 'default_columns' => 3, 'default_rows' => 4, 'min_columns' => 1, 'max_columns' => 6, 'min_rows' => 1 ) ) ) );
Ukuran gambar produk tunggal telah diatur ke lebar 416px dan thumbnail ke lebar 324px. Ini berarti Anda dapat menghapus kedua garis ini atau mengubah nomor lebar menjadi lebar yang Anda inginkan. Namun, Anda perlu memastikan bahwa Anda berubah setelah membuat tema anak. Ini karena itu akan kembali ke pengaturan sebelumnya jika Anda memperbarui tema.
- Bagaimana cara mengatur ukuran gambar katalog?
Untuk gambar produk toko dan gambar katalog atau kategori, ukurannya diubah berdasarkan pengaturan dari bidang Appearance > Customize > WooCommerce > Product Images > Thumbnail Width .
- Mengapa gambar produk WooCommerce saya buram?
Jika hal ini terjadi di toko WooCommerce Anda, Anda dapat memeriksa beberapa hal:
- Periksa kualitas gambar. Periksa apakah kualitasnya bagus dan jika kualitasnya rendah saat ditambahkan ke toko WooCommerce Anda, itu tidak akan terlihat sejernih dan sejelas yang Anda inginkan.
- Pengaturan gambar mini. Periksa pengaturan dan jika pengaturan mencari gambar 500px untuk halaman produk Anda dan gambar 160px di halaman katalog Anda, tetapi Anda hanya mengunggah gambar 160px, maka WooCommerce akan secara otomatis memperbesar gambar Anda, menyebabkannya terlihat buram.
- Berapa ukuran gambar terbaik?
Ukuran gambar terbaik dari toko online Anda tergantung pada tema yang Anda gunakan untuk toko Anda. Ukuran gambar dengan lebar 800 – 1000px cocok jika Anda menjual produk sederhana seperti kemeja.
Namun, jika Anda memiliki detail atau rumit, mengunggah gambar yang lebih besar akan memungkinkan calon pelanggan memperbesar dan melihat detail tersebut dari dekat. Ukuran yang disarankan adalah lebar 2000 piksel, yang akan berfungsi lebih baik
Perlu juga disebutkan bahwa Anda tidak boleh mengunggah gambar besar. Gambar yang terlalu besar akan memperlambat situs Anda dan akibatnya, kemungkinan akan memengaruhi penjualan.
Kesimpulan
Dalam tutorial singkat ini, Anda telah belajar bagaimana Anda dapat mengatur ukuran thumbnail WooCommerce Storefront hanya dengan beberapa klik. Selain itu, saya telah menjelaskan bagaimana Anda dapat mengubah ukuran gambar produk dan galeri, dan panduan utama untuk pengaturan thumbnail.
Selain itu, Anda telah mempelajari manfaat mengatur ukuran gambar produk WooCommerce Anda. Gambar yang terlalu besar akan memperlambat situs Anda dan akibatnya, kemungkinan akan memengaruhi penjualan. Selain itu, saya telah menambahkan bagian pertanyaan umum yang mencakup beberapa masalah umum yang mungkin Anda temui.
Gambar sangat penting dalam hal melakukan penjualan di toko online Anda. Pastikan Anda mengikuti panduan yang disediakan dalam tutorial ini dan jika Anda tidak yakin dengan perubahannya, pertimbangkan untuk menggunakan plugin seperti WooThumbs untuk WooCommerce. Ini akan memungkinkan Anda untuk mengubah ukuran gambar produk WooCommerce Anda tanpa kerumitan dan meningkatkan galeri produk WooCommerce Anda.
Artikel Serupa
- Cara Menambahkan Bilah Sisi ke Etalase WooCommerce
- Cara Membuat Tema Anak Toko WooCommerce [Panduan Lengkap]
- Cara Mengarahkan Pengguna Setelah Registrasi berdasarkan Peran
- Cara Menghilangkan Efek Zoom pada Gambar Produk WooCommerce
- Cara Menyesuaikan Tinggi Header Toko WooCommerce
- Cara Menghapus Sidebar dari Halaman Produk di Tema WooCommerce
- Cara Menyetujui Pesanan Secara Otomatis di WooCommerce
- Cara Mengatur Produk Terkait Kustom Di WooCommerce
- Cara Cepat Menemukan ID Produk Anda di WooCommerce
- Cara Menambahkan Produk Woocommerce dari Frontend
- Cara Menambahkan Produk Setelah Pengaturan Etalase [Panduan Pemula]
- Cara Menyembunyikan Variasi Stok yang Habis di WooCommerce
- Cara Menyembunyikan Tombol Tambahkan ke Keranjang di WooCommerce
- Cara Menyembunyikan Produk WooCommerce dari Hasil Pencarian
- Cara Memperbaiki TypeError yang Tidak Tertangkap: wp.template bukan fungsi
- Cara Menggunakan Atribut Produk WooCommerce Langkah demi Langkah [Panduan Lengkap]
- Cara Menampilkan Produk WooCommerce Berdasarkan Kategori