Modifikasi woocommerce shop page

278 views

Modifikasi woocommerce shop page terkadang diperlukan untuk mempercantik halaman toko yang kita miliki. Menambahkan beberapa keterangan/catatan sebagai tambahan informasi halaman toko untuk memberikan pengunjung informasi tambahan.

Modifikasi woocommerce shop page

Bahkan beberapa toko online menambahkan banner-banner tertentu untuk mempromosikan sebuah produk unggulan. Jika anda seorang internet marketing, bisa menambahkan banner-banner produk afiliasi yang bisa mendatangkan komisi jika ada pembelian.

Woocommerce memiliki banyak variasi kode hook untuk halaman toko, produk, bahkan untuk halaman checkout. Kode hook ini sangat berguna untuk menambahkan keterangan tambahan dan mempercantik toko online kita.

Niagahoster dan Contabo merupakan salah satu penyedia jasa layanan hosting/VPS terbaik dengan teknologi wordpress accelerator.

Pada postingan kali ini, saya akan coba membantu menjelaskan kode hook woocommerce dan cara meletakkannya di halaman toko kita. Kode hook ini sudah saya coba di woocommerce versi 4.1.0.

Modifikasi woocommerce shop page

Halaman toko woocommerce bisa disisipkan kode hook sebagai berikut:

  1. woocommerce_before_main_content
  2. woocommerce_archive_description
  3. woocommerce_before_shop_loop
  4. woocommerce_before_shop_loop_item
  5. woocommerce_before_shop_loop_item_title
  6. woocommerce_shop_loop_item_title
  7. woocommerce_after_shop_loop_item_title
  8. woocommerce_after_shop_loop_item
  9. woocommerce_after_shop_loop
  10. woocommerce_after_main_content

1. Woocommerce_before_main_content

Kode hook woocommerce_before_main_content bertempat pada awal dan atas halaman toko anda. Hook ini dideklarasikan pada file single-product.php pada template woocommerce.

Contoh di bawah ini, kita akan menambahkan banner promosi sebuah produk di halaman toko kita:

add_action( 'woocommerce_before_main_content', 'banner-1', 5 );
function banner-1() {
  if( is_shop() ) {
    print '<br/><p><center><a href="link tujuan" target="_blank"><img src="alamat gambar"></a></center></p>';
  }
}

Untuk menambahkan kode tersebut, sebaiknya anda menambahkan plugin code snippet supaya tidak terlalu banyak merubah kode function.php template website.

Code Snippets

Hasil tampilan dari kode di atas adalah sebagai berikut:

#BikinAsikdiRumah - Mar 2020

Modifikasi woocommerce shop page

Untuk memodifikasi halaman toko di woocommerce tidak harus selalu berupa banner atau gambar, tapi bisa juga berupa kalimat atau kata-kata yang membuat pengunjung melihat produk yang ditawarkan.

Misalnya: <h2>Get a discount of 10% on any item</h2>

Jadi kodenya adalah:

add_action( 'woocommerce_before_main_content', 'banner-1', 5 );
function banner-1() {
  if( is_shop() ) {
    print '<br/><p><center><h2>Get a discount of 10% on any item</h2></center></p>';
  }
}

 

2. Woocommerce_archive_description

Kode hook woocommerce_archive_description akan menghasilkan tulisan/banner di bagian header halaman toko. Kode ini akan dieksekusi pada file archive-product.php WooCommerce.

add_action( 'woocommerce_archive_description', 'banner-2', 5 );
function banner-2() {
  if( is_shop() ) {
    print '<br/><p><center>Shop from a wide selection of LED TVs, Smart TVs, HD Ready TVs, 4K Ultra HD TVs and Full HD TVs available from top brands</center></p>';
  }
}

Hasilnya akan seperti ini:

Modifikasi woocommerce shop page

3. Woocommerce_before_shop_loop

Kode woocommerce_before_shop_loop akan menghasilkan output sebelum daftar produk di halaman toko kita. Kode ini akan dieksekusi pada file archive-product.php WooCommerce.

add_action( 'woocommerce_before_shop_loop', 'banner-3', 5 );
function banner-3() {
  if( is_shop() ) {
    print '<br/><p><center><a href="link tujuan" target="_blank"><img src="alamat gambar"></a></center></p>';
  }
}

Hasilnya akan seperti ini:

Modifikasi woocommerce shop page

Selebihnya akan dibahas pada postingan selanjutnya, berharap temen-temen semua sudah bisa menerapkan kode-kode hook woocommerce untuk memodifikasi halaman tokonya.

 

Daftar Layanan Hosting Terbaik
Target Audien Provider Harga Mulai Dari
USA Contabo £ 2.99
Eropa Contabo £ 2.99
Indonesia Niagahoster Indonesia Rp. 8.000,00
Exabytes Indonesia Rp. 10.000,00
Hostinger Indonesia Rp. 8.000,00
Domainesia Rp. 8.000,00
Cloudmild Rp. 8.000,00

Leave a reply "Modifikasi woocommerce shop page"

Author: 
Harry
Nama saya Harry. Ini merupakan blog pribadi. Isi utamanya tentang belajar wordpress dari nol sampai lupa lagi, karena keseringan lupa, akhirnya yang pernah lupa dituangkan dalam blog sederhana. Terkadang di waktu luang, saya menulis tentang apa yang ingin saya tulis. Jadi jangan heran pada akhirnya blog ini jadi gado-gado.