Baca Situs dot Com
  • Beranda
  • Kebijakan Privasi
  • Kontak
  • Pelepasan Tanggung Jawab
  • Peta Situs
  • Syarat & Ketentuan
  • Tentang Kami
  • id Indonesia
  • en English
No Result
View All Result
Baca Situs dot Com
  • Beranda
  • Kebijakan Privasi
  • Kontak
  • Pelepasan Tanggung Jawab
  • Peta Situs
  • Syarat & Ketentuan
  • Tentang Kami
  • id Indonesia
  • en English
Baca Situs dot Com
No Result
View All Result
Home Internet WordPress

Bagaimana Cara Menampilkan Gambar Produk Woocommerce

Baca Situs by Baca Situs
3 Maret 2016
in WordPress
Reading Time: 3 mins read
397 25
Gambar Produk Woocommerce

Contoh thumbnail gambar produk Woocommerce

585
SHARES
3.2k
VIEWS
Share on FacebookShare on Twitter

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(); ?>

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' ) ); ?>

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(); ?>">

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();


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

This entry has been published on 3 Maret 2016 and may be out of date.
Tags: bloggambarprodukwoocommercewordpress

Related Posts

3 Laptop Video Editing dan Desain Grafis Terbaik Harga Sekitar 10 Juta

3 Laptop Video Editing dan Desain Grafis Terbaik Harga Sekitar 10 Juta

by Baca Situs
13 Maret 2023
0

Ketika Anda berpikir tentang laptop multimedia, harga yang mahal biasanya adalah hal pertama yang terlintas dalam pikiran Anda. Namun, Anda...

Form Tag Generator - Recaptcha Kosong

Solusi untuk reCaptcha Form Tag Generator Kosong

by Baca Situs
21 September 2015
0

Jika Anda memiliki blog ataupun situs yang dibangun dengan Wordpress, dan sedang mencoba membuat halaman/tulisan dengan mempergunakan plugin Contact Form...

CSS Tulisan Arab

Mempercantik Tulisan Arab Pada Website

by Baca Situs
6 September 2015
0

Apakah Anda sedang atau pernah bingung dengan cara menampilkan tulisan Arab dalam website/situs atau blog Anda?. Jika Anda tidak pernah...

Discussion about this post

Categories

  • Agama
  • Bisnis
  • Featured
  • Internet
    • Website
    • WordPress
  • Kecantikan
  • Kendaraan
  • Kesehatan
    • Hewan Peliharaan
  • Seni & Budaya
  • Teknologi
Baca Situs dot Com

© 2022 Bacasitus - Update Pengetahuan dengan Baca Situs

Navigate Site

  • Beranda
  • Kebijakan Privasi
  • Kontak
  • Pelepasan Tanggung Jawab
  • Peta Situs
  • Syarat & Ketentuan
  • Tentang Kami

Follow Us

No Result
View All Result
  • Home
  • Tentang Kami
  • Syarat & Ketentuan
  • Pelepasan Tanggung Jawab
  • Kebijakan Privasi
  • Kontak
  • Peta Situs
  • English

© 2022 Bacasitus - Update Pengetahuan dengan Baca Situs

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.