Woocommerce shop page optimization

76 views

Woocommerce shop page optimization merupakan kelanjutan artikel terdahulu dengan judul Modifikasi woocommerce shop page yang bisa anda baca pada blog ini untuk mempercantik ataupun menambahkan informasi pada halaman ‘shop’ woocommerce.

Woocommerce shop page optimization

Pada tulisan sebelumnya dibahas sampai dengan kode hook Woocommerce_before_shop_loop jadi masih ada beberapa kode hook woocommerce lainnya yang belum dibahas.

4. woocommerce_before_shop_loop_item

Woocommerce_before_shop_loop_item akan menampilan informasi yang ada di atas masing-masing produk. Kode hook ini akan memodifikasi file content-product.php pada template woocommerce.

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

Misalnya kita ingin menambahkan kata “TERLARIS”, maka kode yang ditambahkan adalah sebagai berikut:

add_action( 'woocommerce_before_shop_loop_item', 'terlaris', 5 ); 
     function terlaris() { 
         if( is_shop() ) { print '<br/>TERLARIS'; }
}

Hasilnya adalah seperti ini:

Jika anda ingin menambahkan kata “TERLARIS” pada produk tertentu, anda bisa memanfaatkan parameter post-id, contoh:

add_action( 'woocommerce_before_shop_loop_item', 'terlaris', 5 ); 
    function terlaris() { 
       global $post;
       if( $post->ID == 57 ) { print '<br/><h3>TERLARIS</h3>'; } 
}

Hasilnya akan seperti ini:

Woocommerce shop page optimization

5. woocommerce_before_shop_loop_item_title

Woocommerce_before_shop_loop_item_title akan menampilan informasi yang ada di atas gambar produk. Kode hook ini akan memodifikasi file content-product.php pada template woocommerce.

Misalnya kita ingin menambahkan kata “HARGA HEBAT” pada produk 57 dan 59, maka kode yang ditambahkan adalah sebagai berikut:

bukalapak banner
add_action( 'woocommerce_before_shop_loop_item_title', 'hebat', 5 );

function hebat() {
    global $post;
    if( $post->ID == 57 || $post->ID == 59 ) {
        print '<h3>HARGA HEBAT</h3>';
    }
}

Hasilnya akan seperti ini:

Woocommerce shop page optimization

6. woocommerce_shop_loop_item_title

Woocommerce_before_shop_loop_item_title akan menampilan informasi yang ada di atas nama produk. Kode hook ini akan memodifikasi file content-product.php pada template woocommerce.

Misalnya ingin menambahkan informasi stok produk, maka kodenya adalah sebagai berikut:

add_action( 'woocommerce_shop_loop_item_title', 'stok-produk', 1 );

function stok-produk() {
    global $post;
    $stock = get_post_meta( $post->ID, '_stock', true );

    if( $stock > 0 ) {
    
        echo "<div'>
            <h3>Sisa ". $stock."</h3>
        </div>";
    
    } else {
    
        echo "<div'>
            <h3>Banyak</h3>
        </div>";
    
    }
    
}

Hasilnya adalah sebagai berikut:

Woocommerce shop page optimization

7. woocommerce_after_shop_loop_item_title

woocommerce_after_shop_loop_item_title akan menampilan informasi di bawah nama produk. Kode hook ini akan memodifikasi file content-product.php pada template woocommerce.

Misalnya ingin menambahkan informasi kategori produk, maka kodenya adalah sebagai berikut:

add_action( 'woocommerce_after_shop_loop_item_title', 'kategori', 1 );

function kategori() {
    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' ); 
  $text = "<h3> (";

    foreach ($terms as $term) {
        $text .= $term->name;
    }
    $text .= ") </h3>";
    echo $text;
    
}

8. woocommerce_after_shop_loop_item

Woocommerce_after_shop_loop_item akan menampilan informasi di atas ‘Add to Cart’. Kode hook ini akan memodifikasi file content-product.php pada template woocommerce.

Misalnya ingin menambahkan informasi ‘Rekomendasi’, maka kodenya adalah sebagai berikut:

<?php

add_action( 'woocommerce_after_shop_loop_item', 'rekomen', 1 );

function rekomen() {
    global $post;
  if( $post->ID == 57 || $post->ID == 59 ) {
    echo "<div class='rekom'>
            <h3>Rekomendasi</h3>
        </div>";
    }

}

Kode <div class=’rekom’> harus anda buat terlebih dahulu di custom CSS.

9. woocommerce_after_shop_loop

Woocommerce_after_shop_loop akan menampilan informasi di bawah daftar produk. Kode hook ini akan memodifikasi file archive-product.php pada template woocommerce.

Misalnya ingin menambahkan informasi ‘Produk unggulan dan harganya’, maka kodenya adalah sebagai berikut:

add_action( 'woocommerce_after_shop_loop', 'produk-unggulan', 1 );

function produk-unggulan() {	
    $id = 57;
    $product = wc_get_product( $id );
    $url = get_permalink($id);

    echo "<a href='".$url."'>
      <div class='best-seller'>
        <h3> Produk Unggulan: ".$product->get_title()."</h3>
        <h4> Harga: ". $product->get_price_html() ."</h4>
      </div>
    </a>";
   
}

10. Woocommerce_after_main_content

Woocommerce_after_main_content akan menampilan informasi di bawah halaman produk. Kode hook ini akan memodifikasi file single-product.php pada template woocommerce.

Misalnya ingin menambahkan informasi ‘Support dan FAQ’, maka kodenya adalah sebagai berikut:

add_action( 'woocommerce_after_main_content', 'support', 1 );

function support() {
    echo "<div class='best-seller'>
            <h3>Jika anda membutuhkan bantuan informasi, silahkan kunjungi <a href='#'>Bantuan.</a></h3>
        </div";
}

Kesimpulan:

Woocommerce shop page optimization bisa digunakan untuk mempercantik halaman produk-produk website woocommerce anda. Contoh-contoh di atas merupakan sebagian kecil saja yang bisa anda modifikasikan. Anda bisa berkreasi lebih untuk mendapatkan hasil yang sesuai dengan keinginan anda.

Selamat mencoba 🙂

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 "Woocommerce shop page optimization"

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.