Woocommerce shop page optimization

166 views

Intro

Contents

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

Woocommerce shop page optimization

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.

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.

Woocommerce shop page optimization

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:

Woocommerce shop page optimization

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>';
  }
}

Woocommerce shop page optimization

Daftar Layanan Hosting Terlaris
Target AudienProviderHarga Mulai Dari
USAContabo£ 2.99/bulan
EropaContabo£ 2.99/bulan
IndonesiaNiagahoster IndonesiaRp. 8.000,00/bulan
Exabytes IndonesiaRp. 10.000,00/bulan
Hostinger IndonesiaRp. 8.000,00/bulan
DomainesiaRp. 8.000,00/bulan

Leave a reply "Woocommerce shop page optimization"

Author: 
author
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.