Posted on

Tips-trik Kustomisasi WooCommerce Store Notice

wpJakarta.Com – Tips-trik Kustomisasi WooCommerce Store Notice. Jika anda menggunakan Plugin WooCommerce sebagai toko online di website anda sendiri. Pasti tidak asing dengan ‘WooCommerce demo store notice’. Sebuah pop up yang muncul di bagian bawah layar yang bisa di fungsikan pemilik toko online untuk memberikan informasi ke pelanggan. Sering di sebut juga dengan WooCommerce demo store notice karena sering di fungsikan sebagai informasi ketika kita sedang melakukan setup toko online (development mode).

Artikel, tips-trik dan tutorial WooCommerce

Pilihan untuk mengaktifkan WooCommerce store notice

WooCommerce store notice

WooCommerce store notice tidak secara default aktif. WooCommerce memberikan pilihan kepada kita apakah informasi store notice tersebut mau di aktifkan atau tidak. Jika di aktifkan, secara default pop up WooCommerce store notice akan muncul di bagian bawah layar baik layar berdimensi kecil (handphone, tablet) maupun layar berdimensi besar (desktop).

Jika WooCommerce store notice tersebut di aktifkan maka itu akan berlaku site wide. Yang artinya WooCommerce store notice akan muncul pada pengunjung website anda di semua halaman website, baik halaman WooCommerce maupun halaman non-WooCommerce. Lihat di sini apa yang kami maksud dengan halaman WooCommerce dan halaman non WooCommerce.

Sebaliknya, jika kita memilih untuk tidak mengaktifkannya, maka pop up WooCommerce store notice tersebut tidak akan muncul di seluruh halaman website. Isi dari informasi yang di tampilkan juga bisa di kustom. Secara default kalimat tersebut sebagai berkut “This is a demo store for testing purposes & no orders shall be fulfilled”.

Artikel, tips-trik dan tutorial WordPress

Mengaktifkan WooCommerce store notice via customizer

Ketika kita sukses memasang plugin WooCommerce, maka akan ada lima menu WooCommerce itu sendiri pada halaman customizer.

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

WooCommerce Store Notice

WooCommerce store notice, memungkinkan anda untuk memasukkan pesan di seluruh halaman website yang ditampilkan kepada semua orang yang mengunjungi toko anda. Pesannya bisa berupa :

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

Menampilkan WooCommerce store notice

Untuk menunjukkan WooCommerce store notice di seluruh situs kepada pelanggan:

Pengunjung website anda akan melihat tampilan WooCommerce store notice ketika mereka mengunjungi situs website anda. Dengan mengklik ‘Dismiss’, pengunjung dapat memilih untuk menutup pemberitahuan.

  • 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 melalui layar live yang ada di sebelah kanan.
  • Klik Publish jika sudah selesai dan sesuai.

Lokasi dan tampilan Pemberitahuan Toko akan berbeda-beda, bergantung pada tema yang anda gunakan. Untuk tampilan jika anda menggunakan tema website storefront, tampilan WooCommerce store notice mungkin terlihat tidak menarik. Pada seksi selanjutnya artikel ini kami sertakan tips-trik bagaimana melakukan kustomisasi WooCommerce store notice menjadi lebih enak di lihat.

Merubah atau menghapus WooCommerce store notice

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

  • Buka 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

WooCommerce store notice juga bisa di setting untuk meanmpilkan informasi secara terjadwal. Menggunakan opsi jadwal (schedule) untuk menampilkan informasi toko dapat membantu anda saat menjalankan promosi untuk waktu terbatas atau mengakhiri penjualan / diskon pada tengah malam pada tanggal-tanggal tertentu.

  • 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 tersebut tidak terkoneksi pada jadwal promosi toko anda. Misalnya, jika anda membuat sebuah promosi jadwal diskon pada tanggal tertentu, maka anda perlu melakukan setting secara terpisah pada halaman produk WooCommerce.

Tips-trik dan tutorial pemrograman website (HTML, CSS, JS, PHP)

Kustomisasi / Modifikasi WooCommerce store notice

Mungkin anda ingin melakukan perubahan atau memodifikasi pada tampilan WooCommerce store notice di website anda. Misalnya hanya ingin agar informasi store notice tersebut hanya tampil pada halaman WooCommerce (katalog produk / shop, single produk atau halaman WooCommerce lainnya). Dan sebaliknya ingin informasi WooCommerce store notice tidak di tampilkan pada halaman post / blog, atau halaman reguler WordPress lainnya (homepage, about us, dan lainnya). Maka perlu sedikit untuk mengetahui lebih dulu sumber kode / script fungsinya.

Hook dan Fungsi

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 = __( '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 );
	}
}

Tentang informasi WooCommerce store notice bisa anda lihat pada halaman dokumentasi WooCommerce berikut. WooCommerce Customizer – Manage Store Notice, Catalog View and Product Image. Script fungsi tersebut bisa anda lihat pada file wc-template-functions.php. Github, /includes/wc-template-functions.php. #L1043-#L1064.

Tentang hook WooCommerce store notice bisa anda lihat pada halaman artikel hook kami berikut. WooCommerce store notice hook.

Artikel, tips-trik dan tutorial WooCommerce lainnya

Menampilkan WooCommerce store notice hanya pada halaman WooCommerce via PHP

Untuk menampilkan WooCommerce store notice hanya pada halaman WooCommerce saja. Tambahkan kode berikut ke dalam file function.php, atau tambahkan ke dalam plugin snippet code yang anda buat sendiri untuk menghindari kode tersebut terhapus saat terdapat update tema website. Tentang apa itu plugin snippet code atau site specific plugin, lihat artikel kami berikut. Tips-trik membuat site specific plugin.

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 = __( 'This is a demo store for testing purposes &mdash; no orders shall be fulfilled.', '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 dari halaman tersebut (.page-id-xxx atau .post-id-xxx). Misalnya hal tersebut bisa di lakukan dengan menambahkan kode CSS sebagai berikut :

.page-id-5, .page-id-6 { //page id dari halaman Non WooCommerce
    visibility: hidden;
    clear: both;
    display: none;
}

Menampilkan WooCommerce store notice hanya pada tampilan desktop via CSS

Sedangkan untuk menampilkan WooCommerce store notice hanya tampil pada tampilan desktop juga bisa di lakukan dengan menambahkan kode CSS. 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;
    }
}

Artikel, tips-trik dan tutorial WordPress lainnya

Artikel umum kami di luar kategori WordPress & WooCommerce