Cara Menampilkan Produk Woocommerce di Website Lain – Kemarin saya kepikiran ingin menambahkan daftar produk secara acak di blog Alvindayu.com ini yang produknya di ambil dari toko online yang berbasis wordpress di website lain. Setelah tanya-tanya ada yang menyarankan untuk di iframe, karena cara ini paling mudah.
Di situlah saya mulai dapat pencerahan, bagaimana skema yang akan saya buat untuk menampilkan daftar produk di website atau blog lain, yang keluar dari website toko online. Kalau masalahnya ingin menampilkan daftar produk di webiste yang sama kamu cukup menggunkan shortcode woocommerce yang sudah di sediakn dokumentasinya di sini: https://docs.woocommerce.com/document/woocommerce-shortcodes/
Daftar Isi:
Langkah-Langkah Lengkap Menampilkan Produk di Website lain
Tetapi jika masalahnya adalah kamu ingin menampilkan daftar produk di website lain maka kamu tepat membaca artikel ini. Langkah yang harus anda siapkan adalah buka dulu website toko online dan login via cpanel dan pergi ke file manager.
Login Cpanel Hosting
Pertama-Tama Login Cpanel Hosting anda untuk mengakses file yang kita butuhkan dan menambah file yang akan kita gunakan untuk cara ini.
Masuk File Manager Hosting
Lalu pilih menu file dan pilih file manager untuk masuk ke file hosting website kamu, setelah itu cari folder atau root domain yang produknya akan anda tampilkan di website lain.
Masuk ke: wp-content>themes>nama themes yang anda pakai
Buat Custom Page WordPress
Buatlah custom page wordpress dengan mencontoh file page.php atau page-single.php nama file ini akan berbeda-beda di setiap themes yang anda pakai, tetapi umumnya themes wordpress menggunakan nama file page.php
Buka file single page, lalu copy seluruh code yang ada di file single page.
Buat File Custom Page
Setelah copy kode yang ada di single page maka kamu harus membuat file baru yang berfungsi membuat costom page nantinya. Buatlah file custom page dengan nama tampilproduk.php atau nama yang anda inginkan untuk file ini.
Setelah itu buka file yang anda buat dan paste seluruh code hasil copy dari single page tadi di file custom page. Maka hasilnya akan seperti di bawah ini.
Hapus bagian header, sidebar, comment dan footer. Kita akan menyisakan kode yang akan kita buat maka hasilnya akan seperti di bawah ini.
Perhatian susunan themplate anda, biasanya akan ada part di mana kode tidak lengkap, kamu harus mengambil keseluruhan kode yang ada di folder part dan menempatkanya di custom page yang kamu buat, dan hapus bagian part teamplate jika di tempatkan di folder lain.
Kode Panggil Daftar Produk
Salin kode di bawah ini dan tempatkan di atas tag </article> untuk menampikan produk secara acak.
Perhatikan bagian posts_per_page‘ => 5 di mana angka 5 berarti menampilkan jumlah produk yang akan kamu tampikan, kamu bisa menyesuaikan sesuai kebutuhanmu.
Setelah itu simpan custom page yang anda buat, lalu pergi ke dashboard wordpress dan ke menu page dan tambah halaman baru.
Mengatur CSS Custom Page
Agar tampilan daftar produk menjadi rapi kamu butuh untuk menambahkan CSS di halaman custom yang kamu buat. Letakan CSS di bagian paling atas diantara tag <style></style>
Beriku ini cssnya.
Menampilkan Custom Page
Setalah masuk dan membuat halaman baru, silahkan kamu pilih teamplate halaman custom dengan nama yang sudah kamu buat tadi.
Lalu Terbitkan halaman custom yang kamu buat untuk melihat hasil kerjamu.
Menampilkan Produk Dengan Iframe
Untuk menampilkan produk acak yang kamu buat tadi, cukup dengan menambahkan kode ini di sidebar kamu.
<iframe frameborder=”0″ scrolling=”yes” src=”url halaman custom page” style=”height: 900px; width: 100%;”></iframe>
Nah sampai di sini sudah selesai, terimakasih telah membaca, silahkan bagikan kepada teman-temankamu yang membuhkan trik ini ya.
