Putu Adi — Bekerja & Berkarya

Membuat layout single-product.php (WooCommerce) tampilan berbeda beda, untuk kategori tertentu

Ditulis oleh : Putu Adi, 1 Juli 2023

Daftar isi

Kronologi

Saya lagi nambah fitur baru, di salah satu website (website hobby). Dimana kami menyediakan konten berupa stock foto, hal-hal yang berhubungan dengan hobby tersebut. Intinya, disana kami menyediakan ribuan file foto kualitas tinggi, yang bisa di download oleh member. Ada yang gratis, ada yang berbayar. Jadi mirip mirip kayak freepik.com lahh.. (ala ala). Tapi sekali lagi, konten fotonya hanya bertemakan 1 hobby saja, sesuai tema dari website tersebut.

Nah, di website tersebut, ada halaman store/toko nya. Dibangun dengan Woocommerce. Disana menjual berbagai barang yang berhubungan sama hobby tersebut. Hari ini produk-produk yang dijual masih 100% produk fisik. Mulai dari bahan, peralatan, hingga merchandise.

Nah karena stok foto ini nantinya ada yang berbayar, maka ada kaitannya dengan sistem pembayaran kan?, maka saya putuskan, fitur ini nantinya akan saya tempelin di Woocommerce aja. Karena nanti bisa memanfaatkan sistem pembayaran, sistem filternya, single product layout, dan lain-lain.

Masalahnya apa?

Nah, masalahnya antara produk fisik yang sudah ada, kurang relate sama konten foto ini. Sehingga kalau single-product.php nya jadi satu layout. Maka secara estetika kayak nggak nyambung. Dan sampai detik itu saya belum tau apakah single-product.php bisa dibuat custom juga seperti single.php

Walaupun bisa, saya juga belum tau caranya. Karena setelah saya coba ganti single-product.php menjadi single-product-foto.php tidak berhasil.

Solusinya apa?

Setelah menimba ilmu di universitas youtube.com dan kampus stackoverflow.com, akhirnya saya menemukan titik terang. Ternyata bisa. Caranya?

1. Buat file baru di WP themes directory kamu

Dalam kasus ini, nama kategorinya adalah “foto”. Jadi saya buat file php baru bernama single-product-foto.php sementara isinya, saya copy paste dari file single-product.php yang tentunya, nanti akan saya customize isinya. Agar setema dengan kategori foto. Disana ada tombol downloadnya, intinya desain layoutnya di desain khusus agar sesuai dengan tema halaman download foto stok.

2. Edit file functions.php

Buka file functions.php di themes directory kamu, edit. Lalu tambahkan code berikut ini. Sesuaikan nama kategori (disana isinya : ‘foto’), dan url filenya (disana isinya : ‘single-product-foto.php’).

add_filter( 'template_include', 'foto_page_template' );
function foto_page_template( $template ) {
  if ( is_singular('product') && (has_term( 'foto', 'product_cat')) ) {
    $template = get_stylesheet_directory() . '/single-product-foto.php';
  } 
  return $template;
}

3. Buat kategori product baru

Masuk ke wp-admin kamu, lalu di tab products tambah kategori baru. Dalam kasus ini kategori yang mau saya tambahkan adalah “foto”.

Setelah bikin kategori baru, posting produk baru, lalu pada tab Product categories, hubungkan dengan kategori yang kamu buat tadi, (contoh : foto).

Dan lengkapi semuanya, seperti judul, deskripsi produk, foto, dll. lalu publish.

Nah saat kamu buka url produk tersebut, sekarang sudah tampil di layout halaman single-product-foto.php bukan lagi di single-product.php

Semoga bermanfaat.

Salam,

Putu Adi.