Part 6 : Membuat Halaman Yang Menampilkan Harga Dan Diskon Pada Tema Wordpress

tema wordpress

Jika agan ingin membuat website e-commerce dari wordpress dan tema/theme yang dibuat dari nol serta tanpa plugin woocommerce disinilah tempatnya. Disini saya akan membagikan ilmu saya untuk membuat seperti yang agan inginkankan. Sebelumnya agan harus mengerti bahasa HTML, CSS, dan PHP untuk dapat melanjutkan membuat halaman yang menampilkan harga dan diskon dari produk (halaman tampil produk).

Untuk dapat menampilkan harga dan diskon, ditutorial ini saya akan menggunakan custom fields. Custom fields terletak pada wp-admin kemudian pergi ke halaman all posts, lalu klik salah satu postingan kemudian scroll ke bawah pada halaman tersebut. Masih bingung? Ikuti terus tutorial ini sampai selesai.

Bagi yang belum mengikuti tutorial part sebelumnya, bisa di klik link di bawah :
Part 1 : Persiapan Membuat Tema Wordpress
Part 2 : Membuat Header.php , Sidebar.php, Style.css, Footer.php dan Index.php
Part 3 : Membuat Halaman Content.php , Archive.php Dan Single.php Di Themes Wordpress
Part 4 : Membuat Functions.php Pada Wordpress
Part 5 : Memberikan Logo dan Membuat Search Pada Tema Wordpress

Langsung saja ke pembahasan, buka kembali kodingan yang telah dikerjakan pada part sebelumnya. Jika tidak mengikuti part sebelumnya, buka projek milik agan.

Mengaktifkan Custom Fields 
Buka wp-admin agan, dan pilih post kemudian klik all post. Pilih salah satu postingan agan. Jika agan scroll ke bawah tidak menemui custom fields, maka custom field agan belum aktif. Berikut langkah-langkah mengaktifkan nya :

1. Klik pada screen optionyang terletak di kanan atas.

2. Kemudian centang pada custom fields, jika agan menggunakan bahasa indonesia maka centang pada combo box ruas tersesuai.

Setelah itu scroll ke bawah dan agan dapat menemui custom fields nya :

Tambahkan Harga dan Diskon pada Custom Fields
Name adalah untuk nama yang akan ditambahkan, kita akan menambahkan harga dan diskon maka Name nya adalah harga atau diskon. Jika value nya, misalkan harga produknya Rp10.000, maka value nya 10000.

1. Tambahkan Harga.

Setelah diisi klik Add Custom Field.

2. Tambahkan Diskon.
Untuk valuenya nanti kita isi dengan persenan, misal ada diskon 20% maka value nya kita isi angka 20.

Setelah diisi klik Add Custom Field.

Pastikan klik tombol update pada postingan terlebih dahulu agar pengaturannya tersimpan. Isikan sama seperti diatas untuk semua postingan yang agan kategorikan sebagai produk. Jika sudah terbuat maka untuk postingan selanjutnya yang ingin agan kasih harga dan diskon tidak usah membuat baru name nya untuk harga dan diskon, jadi kita tinggal mengisi value nya saja.

Cara diatas adalah untuk mengisi harga dan diskon terlebih dulu. Untuk menampilkan value harga dan diskon pada setiap postingan pada website, simak langkah-langkah dibawah :

Menampilkan Isi Custom Fields/Meta Data Pada Website Wordpress
1. Buka folder tema agan yang terletak pada C:\xampp\htdocs\wordpress\wp-content\themes\tema_agan sesuai projek pada part sebelumnya(jika mengikuti part sebelumnya).

2. Setelah terbuka, buka file content.php (yang mengikuti part sebelumnya) atau file yang bertugas untuk menampilkan postingan pada wordpress agan dengan notepad atau software editor lainnya.

3. Taruh kode di bawah pada file agan :

     <?php
       $harga = get_post_meta($post->ID, 'harga', TRUE);
       $diskon = get_post_meta($post->ID, 'diskon', TRUE);
       if(!empty($diskon)){
           echo "<font style='color:#1d8283;'><strike>Rp. ".$harga."</strike> </font>&nbsp;";
       }
               
       if(empty($diskon)){
           echo "<font style='color:#1d8283;'><b>Rp. ". $harga."</b></font>";
       } else {
           echo "<br/>Diskon <font style='color:#eb3232;'>".$diskon."%</font><br/>";
           $hasil = $harga - (($diskon/100)*$harga);
           echo "Rp. ". $hasil;
       }
   ?>

Penjelasan kode diatas :
get_post_meta($post->ID, 'harga', TRUE); berfungsi untuk mengambil value harga pada custom fields. Name pada custom fields yang kita buat tadi bernama harga, harga disini akan menjadi ID dari setiap custom fields.

get_post_meta($post->ID, 'diskon', TRUE); berfungsi untuk mengambil value diskon. $post->ID untuk mengambil ID nya, ID dari "diskon" adalah diskon.


Setelah kode diatas disimpan, maka tampilan website agan akan seperti ini :

Untuk source kode nya dari content.php yang aku rubah, agan bisa download nya disini :

Download content.php

Bagikan

Jangan lewatkan

Part 6 : Membuat Halaman Yang Menampilkan Harga Dan Diskon Pada Tema Wordpress

4/ 5

Oleh Bayu Ambika

July 21, 2018 Komentar