Cara Menampilkan Produk Woocommerce di Website Lain

Menampilkan Produk Woocommerce di Website Lain

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/

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.

Menampilkan Produk Woocommerce di Website Lain
Menampilkan Produk Woocommerce

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.

Login cPanel Hosting
Login cPanel Hosting

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.

Buka File Single Page
Buka File Single page.php

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 => 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.

Pilih Template Halaman Custom
Pilih Template Halaman Custom

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.

Cara Menampilkan Produk Woocommerce di Website Lain 1