Semua Tentang Halaman Terima Kasih WooCommerce

Diterbitkan: 2022-09-19

Dalam bentuk bisnis apa pun, begitu pelanggan melakukan pembelian, selalu penting untuk mengucapkan "Terima Kasih". Di E-Commerce, ini difasilitasi dengan menggunakan halaman Terima Kasih.

Halaman Terima Kasih di E-Commerce cukup signifikan karena memungkinkan Anda terhubung dengan pelanggan dan dalam jangka panjang dapat membantu meningkatkan penjualan. Hal ini terjadi karena pelanggan yang merasa nyaman dengan pembelian kemungkinan akan melakukan pembelian lagi di masa mendatang dari toko, atau bahkan merekomendasikan suatu produk kepada pelanggan potensial lainnya.

Dalam artikel ini, kita akan melihat halaman Terima Kasih WooCommerce serta cara menyesuaikan halaman.

Daftar isi

Apa Itu Halaman Terima Kasih WooCommerce

Menyesuaikan Halaman Terima Kasih WooCommerce default

  1. Pentingnya Menyesuaikan Halaman Terima Kasih WooCommerce Default
  2. Cara Menyesuaikan Halaman Terima Kasih WooCommerce
    • Menggunakan Plugin
    • Menggunakan Kait
    • Penggantian Template Manual

Kesimpulan

Apa Itu Halaman Terima Kasih WooCommerce

Halaman Terima Kasih WooCommerce adalah halaman yang akan ditampilkan kepada pelanggan tepat setelah melakukan pemesanan dalam sebuah situs web. Ini juga disebut sebagai “halaman konfirmasi pembelian” atau “halaman pesanan yang diterima”.

Saat mengakses halaman Terima Kasih, format URL akan menjadi yourdomain/checkout/order-received/2554/?key=wc_order_WCS88FJQkkjI9.

Di bawah ini adalah contoh tangkapan layar halaman:

Ada berbagai komponen dalam halaman Terima Kasih seperti yang terlihat pada gambar di atas. Beberapa di antaranya adalah:

Pesan Terima Kasih: Ini hanyalah pesan untuk mengucapkan Terima Kasih kepada pelanggan Anda yang telah membeli barang tersebut. Seperti yang terlihat pada tangkapan layar di atas, itu dilambangkan sebagai: “Terima kasih. Pesanan Anda telah diterima."

Informasi Pesanan Umum: Bagian ini terutama berisi rincian umum tentang pesanan tertentu. Rincian ini termasuk nomor pesanan, tanggal, total, email yang digunakan dalam pembelian dan metode pembayaran.

Detail Pesanan: Di bagian ini adalah tempat kami memiliki representasi format tabel dari detail pesanan. Detail ini mencakup nama produk, harga produk, subtotal, harga total, metode pembayaran, biaya pengiriman jika diaktifkan.

Alamat: Bagian ini akan berisi rincian alamat ke pelanggan (Alamat Penagihan dan Alamat Pengiriman jika diaktifkan).

Menyesuaikan Halaman Terima Kasih WooCommerce default

Dari komponen-komponen yang dibahas di atas, kita dapat melihat bahwa halaman Terima Kasih masih menyisakan ruang untuk perbaikan dengan pertimbangan yang cukup vital dalam proses pembelian.

Dalam bagian ini kita akan melihat pentingnya menyesuaikan Halaman Terima Kasih WooCommerce default, serta bagaimana cara menyesuaikannya.

Pentingnya Menyesuaikan Halaman Terima Kasih WooCommerce Default

Setelah pelanggan membeli produk dan tiba di halaman Terima Kasih, ini tidak boleh dilihat sebagai langkah terakhir dalam perjalanan pembelian. Banyak lagi yang sebenarnya dapat dilakukan untuk meningkatkan keterlibatan dengan pelanggan serta menanamkan kepercayaan.

Halaman karenanya dapat memberikan lebih banyak fungsi di dalamnya. Beberapa di antaranya adalah:

  1. Menciptakan pengalaman orientasi yang hebat: Halaman Terima kasih dapat digunakan untuk berbagi materi orientasi kepada pelanggan yang baru saja membeli produk, jika berlaku. Materi tersebut dapat mencakup dokumentasi, video produk, dan materi lain apa pun yang mungkin dapat membantu pelanggan akhir.
    Informasi ini memungkinkan pelanggan menyelami penggunaan produk dengan sedikit waktu yang dihabiskan untuk mencoba mencari cara menggunakan produk.
  2. Menciptakan pengalaman pasca-penjualan yang luar biasa: Memiliki halaman Terima kasih yang dirancang dan disesuaikan dengan baik meninggalkan kesan yang luar biasa bagi pelanggan dibandingkan dengan halaman Terima kasih default. Ini pada gilirannya diterjemahkan menjadi pengalaman pelanggan yang hebat dalam situs web.
  3. Menghasilkan Kepercayaan: Kadang-kadang, setelah pelanggan melakukan pembelian terutama pada produk baru, mereka cenderung ragu apakah produk tersebut bekerja seperti yang diharapkan. Namun, jika halaman Terima Kasih disesuaikan untuk menyertakan konten seperti ulasan positif atau testimonial, ini berfungsi sebagai jaminan bagi pelanggan tersebut sehingga menghilangkan keraguan tersebut. Pelanggan juga cenderung melakukan tindakan lebih lanjut dalam situs web berdasarkan hal ini.
  4. Bertindak sebagai strategi pemasaran: Jika misalnya pelanggan tiba di tombol Terima kasih dengan berbagi sosial dan pelanggan tersebut sudah mempercayai produk, mereka cenderung membagikan pembelian mereka dalam situs sosial yang tersedia. Pembagian ini kemungkinan akan mendatangkan calon pelanggan ke situs web Anda.
    Anda juga dapat menampilkan penawaran di halaman sehingga memasarkan produk lain yang mungkin Anda miliki.
  5. Keunikan: Halaman terima kasih yang dirancang dengan baik membuat situs web Anda menonjol dan karenanya memberikan pengalaman yang berbeda secara keseluruhan kepada pelanggan.

Cara Menyesuaikan Halaman Terima Kasih WooCommerce

WooCommerce tidak menawarkan berbagai opsi penyesuaian untuk Halaman Terima Kasih. Namun ada beberapa cara untuk menyesuaikan halaman. Dalam bagian ini, kita akan melihat beberapa cara yang dapat Anda lakukan untuk menyesuaikan Halaman Terima Kasih.

Menggunakan Plugin

Ada sejumlah plugin yang dapat digunakan untuk menyesuaikan halaman Terima Kasih WooCommerce. Beberapa di antaranya adalah:

  • Ekstensi Halaman Terima Kasih Kustom
  • NextMove Lite – Halaman Terima Kasih untuk WooCommerce
  • Halaman Terima Kasih Kustom YITH untuk WooCommerce

Dalam panduan ini, kita akan melihat salah satu plugin, yaitu NextMove Lite – Terima Kasih Halaman untuk plugin WooCommerce gratis.

Memasang NextMove Lite – Halaman Terima Kasih untuk WooCommerce

Untuk menginstal plugin, navigasikan ke bagian Plugins > Add New dan cari “NextMove Lite – Halaman Terima Kasih untuk WooCommerce”.

Selanjutnya, klik tombol "Instal Sekarang" di sebelah plugin.

Setelah ini selesai, aktifkan plugin.

Halaman default NextMove Terima Kasih

Setelah mengaktifkan plugin NextMove, plugin menghasilkan halaman Terima Kasih default. Ini dapat ditemukan di bagian WooCommerce > Pengaturan > NextMove Lite: XLLugins .

Anda dapat menyesuaikan halaman Terima Kasih ini dengan preferensi Anda atau menambahkan yang baru. Untuk menambahkan halaman Terima Kasih baru, Anda perlu mengklik tombol “Tambah Baru” yang diilustrasikan pada bagian di bawah ini:

Penyesuai Halaman Terima Kasih

Penyesuai halaman Terima Kasih dapat diakses dengan terlebih dahulu mengklik tautan "Komponen" seperti yang diilustrasikan pada tangkapan layar di bawah ini:

Setelah melakukannya, Anda akan diarahkan ke bagian penyesuai halaman Terima Kasih:

Seperti yang terlihat pada tangkapan layar di atas, penyesuai berisi 4 bagian inti. Ini adalah:

  • Pilih Komponen: Berisi berbagai modul atau komponen yang dapat Anda gunakan dalam halaman Terima Kasih. Dalam bagian ini Anda dapat memilih komponen yang Anda inginkan.
  • Edit Component: Memungkinkan Anda untuk menyesuaikan komponen yang Anda pilih. Anda dapat mengubah berbagai konten di sini seperti judul dan juga menerapkan gaya yang berbeda.
  • Pilih Tata Letak: Dalam bagian ini Anda dapat menentukan tata letak halaman Terima Kasih yang Anda inginkan. Anda dapat memilih tata letak satu kolom atau dua kolom.
  • Atur Komponen: Bagian Atur Komponen memungkinkan Anda menarik dan melepas berbagai komponen yang Anda miliki di halaman Terima Kasih, ke urutan yang Anda inginkan.

Menyesuaikan Halaman Terima Kasih

Sebagai contoh tentang cara melakukan kustomisasi, dalam kasus kami di sini, kami akan menyiapkan halaman Terima Kasih baru dan menambahkan komponen ke dalamnya.

Untuk memulainya, klik tombol "Tambah Baru"

Pada layar berikutnya, tentukan judul halaman Terima Kasih Anda dan juga atur prioritas halaman menjadi 1 seperti yang diilustrasikan di bawah ini:

Setelah ini selesai, publikasikan halaman tersebut. Anda kemudian akan diarahkan ke bagian penyesuai halaman Terima Kasih. Di sini Anda akan menyadari bahwa ada beberapa komponen default yang ditambahkan ke halaman:

Ini adalah Konfirmasi Pesanan, Detail Pelanggan, dan Detail Pesanan. Anda dapat menyesuaikan berbagai aspek komponen ini sesuai keinginan Anda.

Untuk menyesuaikan masing-masing, Anda perlu mengklik komponen spesifik dari bagian "Atur Komponen". Komponen kemudian akan dirender dalam bagian "Edit Komponen" di mana Anda dapat mengubah berbagai aspeknya.

Dalam kasus kami di sini, untuk konfirmasi Pesanan, kami akan menyesuaikan ukuran font, warna judul dan subjudul, serta mengubah subjudul.

Sedangkan untuk komponen Customer details, kami akan mengubah border dan background seperti diilustrasikan di bawah ini:

Untuk bagian detail pesanan, kami akan menyesuaikan heading dan layout seperti di bawah ini:

Selain komponen di atas, kita juga akan menambahkan dua komponen tambahan.

i) Teks Gambar

Untuk komponen ini, kami akan menambahkan gambar serta beberapa teks promosi untuk mendorong pelanggan membeli produk lain.

Di dalam komponen, kami juga akan mengaktifkan tampilan tombol "lanjutkan belanja" seperti yang diilustrasikan pada tangkapan layar di bawah.

ii) Video

Di dalam halaman, kami juga akan menyertakan video yang memberikan informasi lebih lanjut tentang produk toko. Anda dapat menyertakan video Youtube atau Vimeo di dalam bagian sumber video.

Setelah hal di atas dilakukan, kita kemudian dapat mengubah tata letak dan memilih "Tata letak Dua Kolom". Anda kemudian dapat mengelompokkan komponen sesuai keinginan Anda dalam dua kolom.

Anda kemudian dapat melihat pratinjau halaman terima kasih Anda untuk memastikan bahwa perubahan diterapkan. Di bawah ini adalah contoh tampilan dari perubahan yang dilakukan di atas:

Menggunakan Kait

Ada sejumlah kait WooCommerce yang dapat digunakan untuk menyesuaikan halaman Terima kasih. Berikut adalah daftar lengkap dari hook tersebut: Action and Filter Hook Reference .

Kustomisasi kode ini perlu ditambahkan ke file functions.php dalam tema anak Anda.

Untuk misalnya mengubah pesan Pesanan diterima, Anda dapat menambahkan kode berikut:

 add_filter('woocommerce_thankyou_order_received_text', 'alter_order_received_text', 10, 2 ); function alter_order_received_text( $newstr, $neworder ) { $new_text = 'Thank You For Your Order. We are glad to have you as our customer.'; return $new_text; }

Di bawah ini adalah contoh ilustrasi keluaran:

Penggantian Template Manual

Halaman Terima Kasih WooCommerce juga dapat dikustomisasi melalui penggantian templat dalam tema anak Anda.

Untuk mencapai ini, Anda perlu:

i) Arahkan ke direktori woocommerce > templates > checkout dan salin file thankyou.php

ii) Tempel file di dalam tema anak Anda, ke jalur direktori woocommerce > checkout. Di bawah ini adalah ilustrasi tentang ini:

Setelah ini selesai, Anda kemudian dapat menyesuaikan kode thankyou.php dengan preferensi Anda.

Untuk misalnya memasukkan tanggal pemesanan dalam halaman Terima Kasih, Anda perlu menambahkan kode berikut di dalam file thankyou.php:

 <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p>

Kode lengkap di dalam file, misalnya, akan dibaca sebagai:

 <?php /** * Thankyou page * * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 3.7.0 */ defined( 'ABSPATH' ) || exit; ?> <div class="woocommerce-order"> <?php if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"> <a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a> <?php if ( is_user_logged_in() ) : ?> <a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a> <?php endif; ?> </p> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p> <?php endif; ?> <?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?> <?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?> <?php else : ?> <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received now.', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <?php endif; ?> </div>

Kesimpulan

Mengucapkan "Terima Kasih" kepada pelanggan Anda setelah membeli produk meningkatkan pengalaman pelanggan yang baik secara keseluruhan. WooCommerce memungkinkan ini dengan menyediakan halaman Terima Kasih. Namun tidak banyak detail yang dimasukkan ke dalamnya.

Dalam panduan ini, kami telah melihat bagaimana Anda dapat menyesuaikan halaman Terima Kasih WooCommerce default. Untuk cara cepat dan mudah menyesuaikan halaman Terima Kasih, Anda dapat menggunakan pendekatan plugin. Di sisi lain, jika Anda tidak terintimidasi oleh kode, Anda dapat menggunakan salah satu dari dua pendekatan lainnya.

Jika Anda memiliki pertanyaan atau kontribusi apa pun, jangan ragu untuk membagikannya di bagian komentar di bawah.