Bagaimana cara menambahkan gambar ke produk di WooCommerce

Mencari cara untuk menambahkan gambar ke produk Anda? Baik itu fitur atau gambar atau galeri, cara Anda menyajikan item akan menentukan seberapa banyak Anda menjual. Itulah mengapa dalam panduan ini, kami akan menunjukkan cara menambahkan gambar ke produk di WooCommerce .

Pentingnya gambar dalam eCommerce

Gambar adalah salah satu elemen kunci dalam menjual produk. Sebuah gambar menceritakan seribu kata, sehingga produk dengan gambar yang menarik memiliki peluang lebih besar untuk menarik perhatian pelanggan dan menghasilkan penjualan.

Pemilik toko cenderung berusaha keras untuk menggambarkan fitur produk mereka. Tetapi meskipun kita ingin berpikir bahwa kita membuat keputusan yang rasional, kenyataannya sebagian besar keputusan bersifat emosional. Manusia cenderung membuat keputusan emosional dan membenarkannya secara rasional. Jika suatu produk terlihat bagus, kemungkinan besar kita akan membelinya karena akan menarik perhatian kita.

Terlepas dari jenis produk yang Anda jual, mereka akan memiliki peluang lebih baik untuk menjual jika terlihat bagus. Jika Anda memikirkannya, itu logis. Jika seseorang akan menggunakan atau memakai suatu produk apakah itu sepatu, pakaian, atau perangkat lunak, mereka akan menginginkannya terlihat bagus. Itulah mengapa penting untuk menambahkan dan mengoptimalkan gambar yang Anda gunakan untuk mempromosikan produk Anda dan memastikan bahwa apa yang Anda jual terlihat terbaik.

Sekarang setelah kita memahami pentingnya, mari kita lihat bagaimana Anda dapat menambahkan gambar ke produk WooCommerce.

Bagaimana cara menambahkan gambar ke produk di WooCommerce

Ada 2 cara utama untuk menambahkan gambar ke produk di WooCommerce:

1. Menggunakan dasbor WooCommerce
2. Secara terprogram

Mari kita lihat kedua metode tersebut.

1) Tambahkan gambar dari dasbor WooCommerce

Menambahkan gambar ke produk adalah tugas yang cukup sederhana di toko WooCommerce. Saat Anda membuat atau mengedit produk, Anda akan menemukan kotak meta gambar di bilah sisi. Di sana, Anda akan dapat mengatur satu gambar unggulan dan galeri gambar dengan banyak gambar untuk memamerkan barang-barang Anda.

Ketika Anda mengklik salah satu dari ini, modal akan terbuka dan Anda akan dapat mengunggah file gambar baru atau memilih salah satu yang sudah ada dari perpustakaan media WP.

Jika Anda menambahkan gambar ke galeri produk, Anda dapat menekan CTRL + klik kiri untuk memilih beberapa gambar dan menambahkannya dalam satu tindakan.

Atau, Anda dapat menambahkan gambar dari deskripsi konten produk. Cukup tekan tombol Add Media dan pilih gambar yang ingin Anda tambahkan. Jika Anda menggunakan metode ini, ingatlah bahwa ini dapat memengaruhi desain halaman produk secara keseluruhan, jadi pastikan Anda memilih ukuran dan perataan yang tepat sebelum menambahkan gambar di editor teks.

Menambahkan gambar dari dasbor sangatlah mudah. Namun, jika Anda memiliki keterampilan pengkodean, Anda juga dapat menambahkan gambar secara terprogram yang memberi Anda lebih banyak fleksibilitas. Mari kita lihat bagaimana melakukannya.

2) Bagaimana cara menambahkan gambar ke produk WooCommerce secara terprogram

Dalam beberapa kasus, Anda mungkin perlu menambahkan gambar secara terprogram. Ini memberi Anda lebih banyak fleksibilitas dan memungkinkan Anda untuk memasukkan semuanya mulai dari gambar hingga produk tunggal, gambar fitur, galeri, dan banyak lagi.

Di bagian ini, kami akan menunjukkan contoh skrip yang akan membantu Anda menambahkan gambar ke produk tertentu. Perhatikan bahwa Anda perlu mengganti ID produk dan gambar pada dua baris pertama fungsi dengan ID produk dan gambar Anda. Jika tidak, jika ID produk dan gambar itu tidak ada, Anda akan mendapatkan kesalahan.

Juga, perlu diingat bahwa skrip akan bekerja dalam sekali jalan. Ini berarti Anda dapat menghapusnya setelah Anda menjalankannya.

Terakhir, Anda perlu menempelkan skrip berikut ke file functions.php dari tema anak Anda. Anda dapat melakukannya dengan membuka Appearance > Theme Editor. Kemudian, cari file functions.php di kolom kanan dan paste kode seperti gambar di bawah ini. Atau, Anda dapat menggunakan plugin seperti Cuplikan Kode.

CATATAN : Karena kami akan mengedit beberapa file inti, sebelum memulai, kami sarankan Anda membuat cadangan situs Anda. Selain sebagai praktik terbaik, itu selalu merupakan ide yang baik untuk memiliki cadangan terbaru jika terjadi kesalahan. Jika Anda tidak terbiasa dengan kait, lihat panduan kait WooCommerce kami di mana Anda akan mempelajari berbagai jenis kait dan cara menggunakannya.

2.1) Menambahkan gambar unggulan ke satu produk

Skrip ini akan menetapkan gambar unggulan untuk satu produk. Untuk itu, Anda perlu menentukan ID gambar dan ID produk seperti yang ditunjukkan di bawah ini. Misalnya, dalam hal ini, kami menyetel gambar dengan ID 48 sebagai gambar unggulan produk dengan ID 195.

 fungsi QuadLayers_add_featured_image() {

    $gambarID = 48; // ID Gambar
    $post_id = 195; //ID Produk

    set_post_thumbnail( $post_id, $imageID );
    
}

add_action('init', 'QuadLayers_add_featured_image');

Kait init akan memastikan bahwa fungsi tersebut dapat dijalankan di mana saja dengan setiap pemuatan halaman. Selain itu, kami menggunakan fungsi set_post_thumbnail() untuk mengatur gambar unggulan. Ini akan bekerja baik untuk produk dan posting.

2.2) Menambahkan gambar unggulan ke beberapa produk

Demikian pula, Anda dapat melakukan hal yang sama dengan beberapa produk hanya dengan menambahkan ID mereka. Skrip ini akan menambahkan gambar dengan ID 53 ke produk dengan ID 32, 33, dan 34.

 fungsi QuadLayers_multiple_featured_image() {

    $gambarID = 53; // ID Gambar
    $post_id = array(32,33,34); //ID Produk

    untuk ($ii=0; $ii < count($post_id); $ii++) { 
          
           set_post_thumbnail( $post_id[$ii], $imageID );      
    }
    
}
add_action('init', 'QuadLayers_multiple_featured_image');

Seperti yang Anda lihat, ini adalah skrip yang sama seperti sebelumnya, tetapi kami menempatkan semua ID produk dalam array. Dengan cara ini, Anda dapat menetapkan gambar unggulan yang sama untuk beberapa produk secara bersamaan. Ini dapat berguna untuk variasi produk yang tidak menghasilkan perubahan estetika. Misalnya, Anda dapat menggunakan gambar unggulan yang sama untuk variasi ponsel yang sama dengan RAM memori yang berbeda.

2.3) Menambahkan gambar ke galeri produk

Menambahkan gambar ke galeri produk di WooCommerce sedikit lebih rumit karena Anda perlu menggunakan dua fungsi. Jika Anda memeriksa skrip berikut, Anda akan melihat bahwa fungsi pertama ( QuadLayers_create_gallery ) menyiapkan informasi yang diperlukan untuk membuat galeri. Itu adalah daftar gambar dan ID produk tempat Anda ingin menambahkan galeri.

Di sisi lain, update_post_met() bertanggung jawab atas pembuatan galeri. Untuk mencapai ini, kita perlu menggunakan ID produk di mana kita ingin menambahkan galeri dan daftar gambar dalam array.

 fungsi QuadLayers_create_gallery(){ 
        $imgs_ids=array(48,53,47); //ID gambar
        add_img_to_gallery(195,$imgs_ids); // ID Produk
}
fungsi add_img_to_gallery($product_id,$image_id_array){
        update_post_meta($product_id, '_product_image_gallery', implode(',',$image_id_array)); 
  
}
add_action('init','QuadLayers_create_gallery');

2.4) Tetapkan gambar default ke produk tanpa gambar unggulan

Kami telah melihat bahwa untuk mengatur gambar unggulan suatu produk, di dasbor admin Anda, Anda harus membuka WooCommerce > Pengaturan > Produk .

Jika Anda ingin menyetel gambar default secara terprogram, gunakan cuplikan berikut.

 add_filter('QuadLayers_default_image', 'custom_woocommerce_placeholder_img_src');

function QuadLayers_default_image( $src ) {
	$upload_dir = wp_upload_dir();
	$upload = untrailingslashit( $upload_dir['baseurl'] );
	// ganti dengan jalur ke gambar Anda
	$src = $upload . '/2021/07/album-1.jpg';
	 
	kembali $src;
}

Ini akan menetapkan gambar default untuk semua produk tanpa gambar unggulan. Dalam hal ini, kami menggunakan jalur gambar alih-alih ID, jadi ingatlah untuk menggantinya dengan jalur gambar Anda yang benar.

Untuk mendapatkan jalurnya, cukup buka Pustaka Media , cari gambar yang ingin Anda gunakan, salin jalur URL dan tempel di kode di atas dengan mempertahankan format saat ini.

Bagaimana Menambahkan Ukuran Gambar Kustom

Selain menambahkan gambar ke produk WooCommerce, ada lagi yang dapat Anda lakukan untuk menyesuaikan item Anda. Pilihan yang baik adalah membuat ukuran gambar khusus. Secara default, WordPress menyertakan 3 ukuran gambar: thumbnail (150 x 150), sedang (300 x 300), dan besar (1024 x 1024). Anda dapat dengan mudah mengubah ukuran ini dari dasbor, tetapi bagaimana jika Anda ingin menambahkan ukuran default khusus? Mari kita lihat bagaimana melakukannya.

Pertama, buka file functions.php dan paste kode berikut:

add_theme_support( 'post-thumbnails' );

Ini akan mengaktifkan fungsi add_image_size dan memungkinkan Anda membuat ukuran gambar tambahan. Kemudian, perbarui file. Sekarang mari tambahkan beberapa ukuran gambar baru. Dalam kode berikut, kami akan menambahkan empat ukuran khusus dengan dimensi berbeda. Cukup tempel kode dan sesuaikan nama dan dimensi sesuai kebutuhan Anda.

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

Itu dia! Sekarang Anda akan dapat memilih lebih banyak ukuran default di situs Anda. Untuk informasi lebih lanjut tentang ini, lihat panduan kami tentang cara menambahkan ukuran gambar khusus.

Bonus: Hapus Ukuran Gambar Default di WordPress

Anda mungkin telah memperhatikan bahwa setiap kali Anda mengunggah gambar ke WordPress, itu secara otomatis menghasilkan 3 salinannya dalam 3 ukuran gambar default yang baru saja kita lihat: thumbnail, medium, dan large.

Ini dapat berguna dan membantu Anda menghemat waktu. Namun, jika Anda tidak menggunakan beberapa ukuran ini, gambar hanya akan menghabiskan ruang di server Anda. Solusi cepat adalah menghapus ukuran gambar tersebut dari situs Anda dan menghindari membuat salinan gambar tersebut.

Kabar baiknya adalah Anda dapat melakukannya dengan skrip sederhana. Misalnya, Anda ingin menghapus ukuran sedang dari situs Anda. Cukup salin dan tempel skrip berikut di file functions.php dari tema anak Anda.

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Ini akan menghapus ukuran gambar medium default. 
function prefix_remove_default_images( $sizes ) { 
tidak disetel( $ukuran['sedang']); // 300 piksel 
kembalikan $ukuran;
}

Untuk menghapus ukuran lain, tambahkan baris lain dengan ukuran yang ingin Anda hapus. Misalnya, jika Anda juga ingin menghapus ukuran besar, kodenya adalah:

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); 
// Ini akan menghapus ukuran gambar medium dan besar default. 
function prefix_remove_default_images( $sizes ) { 
tidak disetel( $ukuran['sedang']); // 300 piksel
tidak disetel( $ukuran['besar']); // 1024 piksel 
kembalikan $ukuran;
}

Itu dia! Begitulah cara Anda dapat dengan mudah menghapus ukuran gambar. Untuk detail lebih lanjut tentang ini, lihat tutorial langkah demi langkah kami.

Kesimpulan

Singkatnya, gambar sangat penting dalam hal menjual produk Anda. Item dengan gambar yang menarik memiliki lebih banyak peluang untuk menarik perhatian pelanggan dan menghasilkan penjualan untuk toko Anda.

Dalam panduan ini, kita telah melihat 2 metode berbeda untuk menambahkan gambar ke produk WooCommerce:

• Dari dasbor WooCommerce
• Secara terprogram

Sekarang mana yang lebih tepat untuk Anda? Menambahkan gambar dari dasbor cukup mudah, jadi ini adalah opsi yang bagus. Namun, jika Anda memiliki keterampilan pengkodean dan menginginkan lebih banyak fleksibilitas, Anda juga dapat menambahkan gambar secara terprogram. Kami telah menunjukkan kepada Anda beberapa skrip yang akan membantu Anda dengan mudah menambahkan gambar, gambar unggulan, dan galeri ke produk Anda.

Terakhir, kami juga telah melihat cara menambahkan gambar ukuran khusus dan menghapus ukuran gambar default di situs Anda, sehingga Anda dapat menyesuaikan situs dan membuat produk Anda lebih menarik. Untuk informasi lebih lanjut tentang cara memaksimalkan halaman produk Anda, lihat panduan kami untuk menyesuaikan halaman produk.

Sudahkah Anda menambahkan gambar ke produk Anda? Metode mana yang Anda gunakan? Beri tahu kami di bagian komentar di bawah!

Untuk tutorial lebih lanjut untuk menyesuaikan toko Anda, lihat posting berikut:

• Cara menyesuaikan Halaman Toko di WooCommerce
• Panduan: Cara mengedit halaman Terima Kasih WooCommerce secara terprogram
• Panduan Lengkap untuk Optimasi Pembayaran