Pada Seri Tutorial WordPress kali ini kita akan membuat plugin kecil yang menambah fungsionalitas WooCommerce dengan link ke Produk yang sama di Online Shop.
Apa itu Woocommerce?
Woocomerce adalah plugin untuk membuat website e-commerce di WordPress. Woocommerce sendiri adalah salah satu dari plugin Wordpress terbaik saat ini, khususnya dibidang e-Commerce, bahkan tidak kurang lebih dari sepertiga website e-commerce dunia menggunakan plugin. Tak salah kalau ada yang menempatkan dia dalam
14 plugin wordpress terbaik tahun 2018. Dan membuat Automattic, Inc perusahaan dibalik WordPress, membelinya dari sebuah perusahaan di Selandia Baru tahun 2015 yang lalu.
Meskipun demikian, Woocommerce juga tidak selalu memenuhi kebutuhan usernya secara penuh. Adakalanya ada fitur tambahan yang butuh ditambahkan atau bahkan ada fitur yang harus dihilangkan/dikurangi.
Pada tutorial kali ini,
kita akan membuat Woocommerce lebih baik lagi dengan menambahkan link tiap produk yang kita jual di Marketplace. Jadi, pembeli yang datang ke website berbasis woocommerce bisa memilih, beli via website kita, atau beli lewat marketplace, misalnya Tokopedia, Bukalapak, Shopee dll.
Contohnya lihat laman ini:
Tutorial Membuat Plugin WordPress untuk WooCommerce
Pertama, bikin identitas plugin:
[sourcecode language="php"]
<?php
/*
Plugin Name: WooCommerce Indonesian Olshop Link
Plugin URI: http://sisteminformasi.biz
Description: Indonesian Online Shop Link for WooCommerce, additional link
to Add to Chart, like 'Beli di Tokopedia'
Author: SistemInformasi.biz
Version: 0.1
Author URI: http://shop.sisteminformasi.biz/product/woocommerce-olshop-link
*/
[/sourcecode]
Kemudian bikin script pluginnya sesuai contoh. Disini, saya buat plugin ini memakai konsep OOP. Jadi bisa diperluas lagi jika diperlukan.
Contoh sederhana, jika ingin menambahkan Link tertentu di bawah Tombol Beli seperti diatas:
[sourcecode language="php"]
add_action( 'woocommerce_after_add_to_cart_button', array(&$this, 'content_after_addtocart_button') );
function content_after_addtocart_button() {
global $post;
echo '
Atau Silakan Beli via Online Shop Berikut:
';
echo '<a href="http://tokopedia.com/ppppp/ujicoba" class="btn btn-tokopedia"><img src="'.plugin_dir_url(__FILE__).'icon/tokopedia.png" class="img-icon"/> Klik untuk Beli di Tokopedia</a>
';
[/sourcecode]
Untuk ikon sendiri, silakan cari di Google Images "tokopedia icon" lalu simpan ke folder icon pada satu folder dengan file plugin ini.
Silakan coba aktifkan plugin ini. Dan lihat hasilnya.
Untuk versi lengkap silakan coba tuliskan seperti berikut:
Bikin Skeleton Class nya dulu:
[sourcecode language="php"]
Class Sibiz_Olshop
{
public function __construct()
{
}
function content_after_addtocart_button()
{
}
function custom_tab( $tabs )
{
}
function custom_tab_panel()
{
}
function save_linkolshop_option_fields()
{
}
}
$Sibiz_Olshop = new Sibiz_Olshop();
[/sourcecode]
Lalu lanjutkan dengan masing-masing code sehingga jadi utuh sbb:
[sourcecode language="php"]
<?php
/*
Plugin Name: WooCommerce Indonesian Olshop Link
Plugin URI: http://sisteminformasi.biz
Description: Indonesian Online Shop Link for WooCommerce, additional link
to Add to Chart, like 'Beli di Tokopedia'
Author: SistemInformasi.biz
Version: 0.1
Author URI: http://shop.sisteminformasi.biz/product/woocommerce-olshop-link
*/
Class Sibiz_Olshop
{
public function __construct()
{
add_action( 'woocommerce_after_add_to_cart_button', array(&$this, 'content_after_addtocart_button') );
add_filter( 'woocommerce_product_data_tabs', array(&$this,'custom_tab') );
add_action( 'woocommerce_product_data_panels', array(&$this,'custom_tab_panel') );
add_action( 'woocommerce_process_product_meta_simple', array(&$this,'save_linkolshop_option_fields') );
add_action( 'woocommerce_process_product_meta_variable', array(&$this,'save_linkolshop_option_fields') );
}
function content_after_addtocart_button() {
global $post;
echo '
Atau Silakan Beli via Online Shop Berikut:
';
$tokopedia = get_post_meta($post->ID,'link_tokopedia',true);
$bukalapak = get_post_meta($post->ID,'link_bukalapak',true);
$shopee = get_post_meta($post->ID,'link_shopee',true);
$instagram = get_post_meta($post->ID,'link_instagram',true);
if(!empty($tokopedia))
{
echo '<a href="'.$tokopedia.'" class="btn btn-tokopedia"><img src="'.plugin_dir_url(__FILE__).'icon/tokopedia.png" class="img-icon"/> Klik untuk Beli di Tokopedia</a>
';
}
if(!empty($bukalapak))
{
echo '<a href="'.$bukalapak.'" class="btn btn-bukalapak"><img src="'.plugin_dir_url(__FILE__).'icon/bukalapak.png" class="img-icon"/> Klik untuk Beli di Bukalapak</a>
';
}
if(!empty($shopee))
{
echo '<a href="'.$shopee.'" class="btn btn-shopee"><img src="'.plugin_dir_url(__FILE__).'icon/shopee.png" class="img-icon"/> Klik untuk Beli di Shopee</a>
';
}
if(!empty($instagram))
{
echo '<a href="'.$instagram.'" class="btn btn-instagram"><img src="'.plugin_dir_url(__FILE__).'icon/instagram.png" class="img-icon"/> Klik untuk Beli di Instagram</a>';
}
echo '
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20.btn-shopee%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23F2D3C9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20350px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-tokopedia%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23D1EDD2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20350px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-bukalapak%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23EDBBC9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20350px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.btn-instagram%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23D9D9D9%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20350px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.img-icon%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2030px%20!important%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
';
}
function custom_tab( $tabs ) {
$tabs['custom_tab'] = array(
'label' => __( 'Link Olshop', 'sibiz_link_olshop' ),
'target' => 'link_olshop_panel',
'class' => array(),
);
return $tabs;
}
function custom_tab_panel() {
?>
<div id="link_olshop_panel" class="panel woocommerce_options_panel">
<div class="options_group">
<?php woocommerce_wp_text_input( array( 'id' => 'link_tokopedia',
'label' => __( 'Link Tokopedia', 'textdomain' ),
)
);
woocommerce_wp_text_input(
array(
'id' => 'link_bukalapak',
'label' => __( 'Link Bukalapak', 'textdomain' ),
)
);
woocommerce_wp_text_input(
array(
'id' => 'link_shopee',
'label' => __( 'Link Shopee', 'textdomain' ),
)
);
woocommerce_wp_text_input(
array(
'id' => 'link_instagram',
'label' => __( 'Link Instagram', 'textdomain' ),
)
);
?>
</div>
</div>
<?php
}
function save_linkolshop_option_fields( $post_id ) {
if ( isset( $_POST['link_tokopedia'] ) ) :
update_post_meta( $post_id, 'link_tokopedia', $_POST['link_tokopedia'] );
endif;
if ( isset( $_POST['link_bukalapak'] ) ) :
update_post_meta( $post_id, 'link_bukalapak', $_POST['link_bukalapak'] );
endif;
if ( isset( $_POST['link_shopee'] ) ) :
update_post_meta( $post_id, 'link_shopee', $_POST['link_shopee'] );
endif;
if ( isset( $_POST['link_instagram'] ) ) :
update_post_meta( $post_id, 'link_instagram', $_POST['link_instagram'] );
endif;
}
}
$sibiz_olshop = new Sibiz_Olshop();
[/sourcecode]
Hasilnya di Panel Admin:
Silakan dicoba....
