Bagaimana Cara Menampilkan Gambar Produk Woocommerce

Penulis

Maret 3, 2016

2995

Gambar Produk Woocommerce — Contoh thumbnail gambar produk Woocommerce

Apakah Anda sedang membuat tema WordPress (WordPress theme) sendiri dan sedang mencoba untuk menampilkan gambar dari produk yang terdapat pada produk woocommerce Anda?, atau mungkin Anda sedang bingung dengan cara menampilkan judul atau nama produk dari woocommerce Anda pada wordpress theme yang Anda buat sendiri?. Jika Anda merasa tidak bingung dengan cara menampilkan judul produk, gambar produk, ataupun attribut lain dari woocommerce Anda pada theme yang sedang Anda buat, berarti hanya saya sendiri yang pernah bingung dengan masalah-masalah tersebut

Saat tulisan ini saya tulis, saya sedang membuat wordpress theme untuk keperluan sebuah website toko online. Dalam desain website ini, saya harus menampilkan slider dari foto galeri, 3 berita terbaru, 3 video terbaru, dan 3 produk unggulan pada halaman utama website (front page). ke-4 jenis konten tersebut disimpan pada bagian masing-masing jenis konten. Jadi desain halaman depan toko online yang sedang saya bangun ini terbagi kedalam 4 bagian utama, yaitu : slider, berita, video dan produk unggulan. Sebagai plugin utama untuk toko online ini saya menggunakan plugin woocommerce

Cukup sampai disitu, kata pengantar sebagai ilustrasi keadaan yang saya hadapi dalam merancang wordpress theme untuk keperluan toko online. Langsung saja kepada pokok permasalahan dan pembahasan dari tulisan ini : Bagaimana cara menampilkan gambar dari produk woocommerce di halaman muka website?. Apa saja persyaratan yang harus dipenuhi agar dapat menampilkan gambar produk dari produk woocommerce?

Syarat Menampilkan Gambar Produk WooCommerce

Persyaratan utama agar wordpress theme dapat menampilkan attribut-attribut dari produk yang ada pada woocommerce diantaranya:

Plugin woocommerce telah terinstall dan dalam kondisi aktif (tentunya)
Woocommerce merupakan plugin e-commerce yang memiliki fitur lengkap untuk toko online berbasis wordpress. Dengan bantuan plugin ini Anda bisa membuat toko online sesuka Anda bahkan sekarang woocomerce telah meiliki fitur baru yaitu woocommere multi vendor yang akan membuat toko online Anda layaknya mall online
Telah ada konten produk pada woocommerce dan konten produk tersebut telah memiliki gambar produk
WordPress theme yang kita gunakan atau kita rancang harus dapat mensupport : woocommerce, post tipe (post type) produk (product)

Penjelasan dari syarat-syarat tersebut, mudah-mudahan dapat saya bahas pada tulisan saya yang lain.

Setelah persyarata-persyaratan tersebut dapat terpenuhi, bagaimana caranya mengambil dan kemudian menampilkan attribut-attribut produk woocommerce tersebut pada theme yang sedang kita bangun?

Ternyata caranya tidak sesulit yang dibayangkan. Cukup dengan hanya memanggil gambar thumbnail seperti memanggil gambar/thumbnail pada konten standar saja, seperti berikut ini:

<?php  the_post_thumbnail(); ?>

1	<?php the_post_thumbnail(); ?>

Jika membutuhkan sedikit polesan untuk memperindah atau sedikit penyesuaian terhadap desain wordpress Anda, maka Anda dapat menambahkan beberapa parameter terhadap fungsi tersebut, seperti parameter berikut ini misalnya:

<?php  the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?>

1	<?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?>

Dengan fungsi tersebut kita telah dapat menampilkan gambar dari produk toko online kita dalam ukuran/resolusi yang besar (large) dan ditampilkan dengan class img-responsive yang ditentukan dari style sheet yang dipergunakan. Fungsi tersebut telah otomatis memanggil gambar produk lengkap dengan tag image-nya, sehingga Anda tidak perlu lagi menulis

<img src ="<?php the_post_thumbnail(); ?>">

1	<img src ="<?php the_post_thumbnail(); ?>">

Masih perlu contoh yang lebih detil?. Berikut ini adalah contoh cara memanggil gambar produk woocommerce dalam sebuah loop

$args3 = array(
	'post_type' => 'product',
);
$loop3 = new WP_Query( $args3 );

while ( $loop3->have_posts() ) : $loop3->the_post(); 
      the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) );
endwhile; 
wp_reset_postdata();

$args3 = array(

'post_type' => 'product',

);

$loop3 = new WP_Query( $args3 );

while ( $loop3->have_posts() ) : $loop3->the_post();

the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) );

endwhile;

wp_reset_postdata();

Semoga permasalahan tentang bagaimana menampilkan gambar produk woocommerce pada wordpress theme rancangan sendiri dapat teratasi dengan tulisan ini. Jika Anda masih perlu referensi tentang fungsi post thumbnail, Anda dapat mengunjungi halaman fungsi the_post_thumbnail ini