WooCommerce Demo Store Notice – woocommerce_demo_store()

TokoDaring.Com – WooCommerce Demo Store Notice. Ketika menggunakan Plugin WooCommerce sebagai toko daring bisnis anda. Mungkin sudah tidak asing dengan ‘WooCommerce demo store notice’.

WooCommerce demo store notice

Artikel Lainnya:

WooCommerce HPOS (High-Performance Order Storage)

WooCommerce store notice atau sering juga di sebut dengan WooCommerce demo store notice.

Embel kata ‘demo’ karena sering di fungsikan sebagai informasi bahwa website tersebut masih dalam pengembangan (development mode), dan belum dapat melayani order apapun.

WooCommerce demo store notice adalah sebuah pop up yang muncul di bagian bawah layar yang bisa di fungsikan pemilik toko online untuk memberikan informasi apapun ke pelanggan.

WooCommerce menu setting via customizer

Setelah menginstal plugin WooCommerce, maka akan ada lima menu WooCommerce di bagian live setting (WooCommerce customizer).

• Store Notice.
• Product Catalog.
• Product Page.
• Product Images.
• Checkout.

Informasi WooCommerce Store Notice

WooCommerce store notice, memungkinkan anda untuk memasukkan pesan di seluruh halaman website (halaman regular WordPress maupun halaman WooCommerce). Tanpa kustomisasi, pesan tersebut bersifat sitewide dan ditampilkan kepada semua orang yang mengunjungi toko anda.

Pesannya bisa berupa rangkaian informasi teks atau link <a href> yang mengarah ke halaman yang di inginkan.

• Informasi – Catatan yang memberi tahu pelanggan anda tentang penundaan pengiriman karena kondisi-kondisi teknis tertentu.
• Pemberitahuan jika toko anda mungkin sedang tutup.
• Promosi – Informasi yang memberitahukan pelanggan anda sebuah acara, event, liburan khusus, promo bundling, kupon, pengiriman gratis.
• Atau tentang informasi apapun yang ingin di tampilkan pada website eCommerce anda.
• Bahkan anda bisa mengarahkan pengunjung untuk menuju ke satu halaman tertentu (landing page).

Opsi untuk mengaktifkan store notice WooCommerce

WooCommerce store notice tidak secara default aktif. WooCommerce memberikan pilihan apakah informasi tersebut itu mau di aktifkan atau tidak.

Jika di aktifkan, secara default pop up informasi akan muncul di bagian bawah layar, baik layar berdimensi kecil (handphone, tablet) maupun layar berdimensi besar (desktop).

Penampilan atau aktifasi juga akan berlaku site wide. Yang artinya informasi yang sudah di setting sebelumnya akan muncul pada pengunjung website anda di semua halaman website. Baik halaman WooCommerce maupun halaman non-WooCommerce.

Lihat artikel ini tentang perbedaan halaman WooCommerce dan halaman non WooCommerce.

Sebaliknya, jika kita memilih untuk tidak mengaktifkan, maka pop up WooCommerce store notice tersebut tidak akan muncul, yang juga berlaku site wide.

Isi dari informasi apa yang ingin di tampilkan dapat di setting di halaman customizer. Secara default kalimat tersebut berbunyi “This is a demo store for testing purposes & no orders shall be fulfilled”.

Cara menampilkan WooCommerce store notice via customizer

Untuk dapat menampilkan WooCommerce store notice di seluruh situs website kepada pelanggan:

• Buka halaman customizer : Appearance >
  • Customize >
    • WooCommerce >
      • Store Notice.
• Masukkan pesan yang ingin anda tampilkan di dalam area teks box.
• Centang kotak checkbox ‘Enable store notice’.
• Preview tampilan store notice secara live.
• Jika sudah selesai dan sesuai klik Publish.

Dengan demikian pengunjung website anda akan melihat tampilan informasi sesuai masukan anda ketika mereka mengunjungi situs website. Lalu dapat menutupnya dengan mengklik ‘Dismiss’ (x).

Lokasi dan tampilan informasi tersebut mungkin akan berbeda-beda tergantung pada tema yang di gunakan. Tampilan WooCommerce store notice mungkin terlihat tidak menarik. Untuk mempercantiknya, di perlukan tambahan kode CSS dengan selector .demo_store.

Merubah atau menghapus WooCommerce store notice

Sementara untuk mengubah atau berhenti menampilkan notice store di seluruh halaman website :

• Buka kembali halaman customizer : Appearance >
  • Customize >
    • WooCommerce >
      • Store Notice.
• Edit pesan di area teks untuk mengubahnya atau hapus seluruhnya teks informasi yang ada di dalam teks box.
• Hapus centang (untick) pada kotak checkbox ‘Enable store notice’.
• Klik publish untuk menyimpan perubahan.

Melakukan penjadwalan store notice

Notice tersebut juga bisa di setting untuk menampilkan informasi secara terjadwal. Ini di mungkinkan dengan menggunakan opsi jadwal (schedule) pada halaman customizer.

Misalnya, ini berguna untuk menampilkan informasi toko saat menjalankan promosi pada waktu-waktu tertentu, mengakhiri penjualan, diskon pada tengah malam dan lainnya.

• Buka halaman customizer : Appearance > Customize > WooCommerce > Store Notice.
• Hapus centang (untick) pada kotak checkbox ‘Enable store notice’.
• Pilih roda gigi di sebelah tombol biru ‘Publish’, maka sebuah panel akan terbuka dengan pilihan publish, save draft dan schedule.
• Pilih schedule di menu kanan, lalu masukkan tanggal dan waktu yang anda inginkan untuk menerapkan perubahan.

Perlu di ingat bahwa penjadwalan ini adalah penjadwalan setting customizer dan bukan jadwal promosi WooCommerce anda. Misalnya, jika anda membuat sebuah promosi jadwal diskon pada tanggal tertentu, produk tertentu atau lainnya maka anda perlu melakukan setting secara terpisah pada halaman produk WooCommerce.

Pada seksi selanjutnya artikel ini kami sertakan tips-trik bagaimana melakukan kustomisasi WooCommerce store notice dengan beberapa kondisi. Misalnya hanya tampil pada halaman WooCommerce saja, pada produk atau kategori tertentu saja, dan lain-lain.

Kustomisasi WooCommerce store notice

Mungkin anda ingin melakukan kustom, baik tampilan maupun pada kondisi atau fungsi tertentu. Misalnya hanya ingin agar informasi store notice tersebut tampil pada halaman WooCommerce saja (katalog produk / shop, single produk atau halaman WooCommerce lainnya).

Dan sebaliknya, jika tidak ingin informasi notice di tampilkan pada halaman reguler WordPress (post / blog, atau halaman reguler WordPress lainnya (homepage, about us, dan lainnya).

Maka itu bisa di lakukan dengan menambahkan baris fungsi php baru. Namun perlu untuk sedikit untuk mengetahui lebih dulu sumber kode / script fungsinya.

woocommerce store notice hook (Hook dan Fungsi)

includes/wc-template-functions.php : #1048

/*
 * WooCommerce demo store
 *
 */

if ( ! function_exists( 'woocommerce_demo_store' ) ) {

	/*
	 * Adds a demo store banner to the site if enabled.
	 */

	function woocommerce_demo_store() {
		if ( ! is_store_notice_showing() ) {
			return;
		}

		$notice = get_option( 'woocommerce_demo_store_notice' );

		if ( empty( $notice ) ) {
			$notice = __( 'This is a demo store for testing purposes — no orders shall be fulfilled.', 'woocommerce' );
		}

		$notice_id = md5( $notice );

		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		echo apply_filters( 'woocommerce_demo_store', '<p class="woocommerce-store-notice demo_store" data-notice-id="' . esc_attr( $notice_id ) . '" style="display:none;">' . wp_kses_post( $notice ) . ' <a href="#" class="woocommerce-store-notice__dismiss-link">' . esc_html__( 'Dismiss', 'woocommerce' ) . '</a></p>', $notice );
	}
}

Menampilkan WooCommerce store notice hanya pada halaman WooCommerce saja

Untuk menampilkan notice hanya pada halaman WooCommerce saja. Tambahkan kode berikut ke dalam file function.php child theme. Atau bisa di tambahkan ke dalam plugin editor sesuai tutorial pada artikel cara edit website WordPress tersebut.

/*
 * WooCommerce demo store
 *
 */ 

if ( ! function_exists( 'woocommerce_demo_store' ) ) {

	function woocommerce_demo_store() {
		if ( ! is_store_notice_showing() ) {
			return;
		}

		$notice = get_option( 'woocommerce_demo_store_notice' );

		if ( empty( $notice ) ) {
			$notice = __( 'Dapatkan diskon 10% untuk setiap orang yang anda ajak berbelanja di toko kami.', 'woocommerce' );
		}

		$notice_id = md5( $notice );

		if (! is_woocommerce () ) {
                        echo apply_filters( 'woocommerce_demo_store', '<p class="demo_store" style="display:none;">' . $notice . '</p>'  );
		} else { echo apply_filters( 'woocommerce_demo_store', '<p class="demo_store">' . $notice . '</p>'  );
                }
	}
}

Menampilkan WooCommerce store notice hanya pada halaman WooCommerce via CSS

Untuk mengkustom agar WooCommerce store notice hanya tampil pada halaman WooCoomerce saja juga bisa di lakukan dengan menambahkan kode CSS. Yang pasti anda harus mengetahui selector masing halaman yang di maksud (.page-id-xxx atau .post-id-xxx).

Misalnya hal tersebut bisa di lakukan dengan kode CSS berikut :

.page-id-5, .page-id-6 { //page id dari halaman yang tidak ingin di tampilkan
    visibility: hidden;
    clear: both;
    display: none;
}

Menampilkan WooCommerce store notice hanya pada tampilan desktop via CSS

Sedangkan untuk menampilkan notice store hanya tampil pada tampilan desktop saja juga bisa di lakukan dengan menambahkan kode CSS menggunakan query @media.

Seperti kami pernah membuka thread di forum WordPress.Org, https://wordpress.org/support/topic/woocommerce-demo-store-notice/. Hal tersebut bisa di lakukan dengan menambahkan kode CSS sebagai berikut :

@media only screen and (max-width:767px) {
.demo_store {
    visibility: hidden;
    clear: both;
    display: none;
    }
}

Kustomisasi lainnya terkait WooCommerce demo store

woocommerce_demo_store() menambahkan banner informasi demo jika di aktifkan.

woocommerce_demo_store() : mixed

Menambahkan hook callback

Contoh berikut untuk menambahkan hook callback.

/*
 * WooCommerce demo store
 * 
 */

function tkdr_woocommerce_demo_store() {
	if ( get_option( 'woocommerce_demo_store' ) == 'no' )
		return;

	if (! is_woocommerce () ) {
                echo apply_filters( 'tkdr_woocommerce_demo_store', '<p class="demo_store" style="display:none;">' . $notice . '</p>'  );
	} else { 
                echo apply_filters( 'tkdr_woocommerce_demo_store', '<p class="demo_store">' . $notice . '</p>'  );
        }
}        
// add the filter 
add_filter( 'woocommerce_demo_store', 'tkdr_woocommerce_demo_store', 10, 2 ); 

Meremove hook callback

// remove callback
remove_action( 'wp_footer', 'woocommerce_demo_store' );

Contoh kustomisasi lainnya.

/*
 * WooCommerce demo store
 * 
 */

function conditional_woocommerce_demo_store() {
    remove_action( 'wp_footer', 'woocommerce_demo_store' );

    // menampilkan informasi pada kategori tertentu
    if ( is_product_category( array( 'pakaian-pria', 'aksesories-pria' ) ) ) {
        add_action( 'woocommerce_before_shop_loop', 'woocommerce_demo_store' );
    }

    // menampilkan informasi pada halaman single produk tertentu
    if ( is_single( array( 100, 102 ) ) ) {
        add_action( 'woocommerce_before_single_product', 'woocommerce_demo_store' );
    }
}
add_action( 'template_redirect', 'conditional_woocommerce_demo_store' );

Artikel terkait :