Posted on

Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce

wpJakarta.Com – Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce. Jika melihat halaman login WooCommerce sepertinya membuat kita berfikir tentang konten apa yang bisa di tambahkan disana. Maklum, yang namanya halaman login di ibaratkan sebagai pintu masuk rumah kita. Area yang pasti akan dilewati oleh orang, baik yang pertama kali datang, atau datang untuk kesekian kalinya.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Artikel WordPress dan WooComerce lainnya

Kustomisasi Halaman Login WooCommerce

Menambahkan Teks Halaman Login WooCommerce

Rasanya akan lebih “asyik” jika kita memberikan informasi pada halaman login tersebut. Bisa jadi sebuah informasi, penawaran atau persyaratan-persyaratan ketika mengakses website kita. Nyatanya halaman login WooCommerce tentu bisa dimanfaatkan untuk hal demikian. Contohnya gambar di samping adalah halaman login WooCommerce yang di akses melalui handphone. Dimana terdapat sepenggal paragraph berisi informasi bagi pengunjung yang hendak mengakses halaman login WooCommerce tersebut.

Ada cara atau tips-trik untuk menambahkan teks pada halaman login WooCommerce tersebut. Contoh live halaman tersebut dapat di akses pada halaman login website freshplus62.com. Freshplus62.com adalah website yang juga kami kelola dan menggunakan plugin “WooCommerce” serta menjalankan aktivitas toko online .

Menambahkan Teks Halaman Login WooCommerce

Berikut tips-trik menambahkan teks pada halaman login WooCommerce tersebut. Tambahkan kode berikut ke dalam file function.php. Namun itu bukanlah cara yang baik, karena kode yang biasa di tambahkan pasti akan terhapus jika terdapat update tema website.

Untuk menyiasatinya bisa dengan membuat site specific plugin khusus untuk menambahkan setiap kode tambahan ke dalam file WordPress. Untuk lebih jelas mengenai apa itu “site specific plugin” ? Kunjungi artikel Tips-Trik Membuat Site Specific Plugin WordPress. yang pernah di tulis di website ini.

// Teks di halaman login
add_action( 'woocommerce_login_form_start','wpjkt_login_text' );
 function wpjkt_login_text() {
   if ( is_checkout() ) return;
   echo '<p><i><a class="login-teks" href="">Untuk pendaftaran kustomer baru, mohon agar dapat menghubungi kami terlebih dahulu (WA/SMS/Telp. 0816 1234 567). Diskon 10% untuk customer baru/order pertama.</a></i></p>';
}

Untuk memberikan sedikit style css, tambahkan kode css berikut ke dalam file eksternal css menggunakan selector .login-teks

// CSS
.login-teks a {background-color:#f5f5f5;color:#3740ff;}

Atau langsung tulis kode tersebut beserta dengan kode CSSnya ke dalam file function.php atau “file specfic plugin”.

// Teks di halaman login
add_action( 'woocommerce_login_form_start','wpjkt_login_text' );
function wpjkt_login_text() { ?>
<style type="text/css">p.login-teks {background-color:#f5f5f5;color:#3740ff;border:1px solid #71b02f;padding:0.4em 1em 0.5em 1em;box-shadow:2px 2px 4px #71b02f;margin-bottom:2em;}
</style>
<?php
if ( is_checkout() ) return;
echo '<p class="login-teks"><i><b>Informasi :</b><br>Untuk pendaftaran kustomer baru, mohon agar dapat menghubungi kami terlebih dahulu (WA/SMS/Telp: 0816 1234 567). Diskon 10% untuk customer baru/order pertama.</i></p>';
}

Artikel lainnya