Kustom Halaman Produk WooCommerce (WooCommerce)

TokoDaring.Com – Kustom Halaman Produk WooCommerce. Apa yang lebih sakral pada sebuah website eCommerce selain halaman produk ? Di halaman itulah harapan dan masa depan anda di gantungkan. Lalu apa itu halaman produk ? Bagaimana itu bekerja ? Bagaimana mengkustom halaman produk website toko daring yang di buat menggunakan WooCommerce ?

Artikel Lainnya:

Halaman WooCommerce VS Halaman Non WooCommerce

Halaman produk

Halaman produk toko online anda adalah sumber kehidupan bisnis eCommerce anda. Setiap pelanggan yang hendak berbelanja online pasti akan mencari informasi segala sesuatu yang perlu mereka ketahui sebelum membeli produk itu.

Dan ketika anda memutuskan untuk menjalankan bisnis online, Kami yakin anda ingin memberikan info lengkap bagi pelanggan. Membuat halaman produk eCommerce dengan konversi tinggi adalah bagian penting dari toko online yang sukses.

Apa itu halaman produk atau juga disebut single product page pada sebuah website eCommerce ? Halaman produk adalah halaman website di situs website toko online atau eCommerce yang menyediakan informasi tentang produk tertentu. Informasi itu mencakup ukuran, warna, harga, informasi pengiriman, ulasan, dan informasi lain yang relevan perlu diketahui kustomer sebelum mereka membeli.

Halaman produk woocommerce

Membahas single product page secara detail hingga dapat menghasilkan website toko online yang produktif akan menjadi topik yang menarik dan panjang. Maka bahasan teoritis itu akan kami kesampingkan dulu, kami menulisnya di banyak artikel terpisah dan anda bisa melihatnya di artikel yang kami tag sebagai halaman produk eCommerce secara general.

Artikel ini lebih kepada bagaimana jika anda ingin merubah atau melakukan sedikit kustom halaman produk WooCommerce.

Halaman produk WooCommerce juga seperti halaman eCommerce pada umumnya. Yaitu di mana sebuah (gambar) produk di tampilkan, lalu di sematkan secukupnya informasi tentang produk tersebut. Tentu saja ada harga dan tombol beli (add to cart) untuk orang membeli produk tersebut.

Terkait dengan harga yang ada pada halaman produk WooCommerce sebenarnya bisa disembunyikan pada pengunjung yang spesifik. Simak artikel ini untuk menyembunyikan harga dan menampilkannya hanya kepada user yang login saja.

Yang terpenting adalah bagaimana anda memiliki halaman yang sesuai dengan model bisnis anda. Tetapi yang sedikit menjadi persoalan bahwa setiap halaman WooCommerce berada dalam kontrol penuh tema yang anda gunakan dan tentu saja plugin WooCommerce itu sendiri.

Kustom halaman produk WooCommerce

Maka mengkustom halaman produk WooCommerce adalah yang krusial untuk anda dan tim lakukan. Syurkurlah bahwa banyak cara yang bisa di lakukan untuk sekedar mengkustom halaman itu.

Mulai dari menggunakan plugin, menggunakan extension atau membuat fungsi sendiri dengan mengaitkannya pada sebuah hook. Mari kita coba bahas satu persatu dari tiga langkah di atas.

Kustom halaman produk WooCommerce dengan plugin

Plugin semacam elementor, site origin, beaver builder dan plugin page builder lainnya mungkin bisa membantu anda untuk mendesain single product page secara mudah. Mudah karena biasanya plugin semacam itu menawarkan desain dengan cara drag and drop.

Drag and drop adalah cara mendesain semudah anda memilih element lalu menyeretnya ke dalam kanvas halaman. Tapi sayangnya untuk merambah pada desain WooCommerce, biasanya anda perlu untuk membeli versi premium. Versi gratis plugin tersebut terbatas hanya pada element-element dasar atau blok WordPress.

Kustom halaman produk WooCommerce dengan addon atau extension

Mengkustom dengan menggunakan addon atau extension mungkin cara yang mudah. Tapi kami tidak yakin itu adalah cara yang murah. Di halaman marketplace WooCommerce, setiap addon atau extension biasanya harus dibeli atau tidak gratis.

Mungkin ini yang menyebabkan kenapa tampilan layout setiap halaman default WooCommerce seperti tampil seadanya. User akan merasa perlu untuk melakukan kustomisasi, dan di sanalah mereka para developer menjual addon atau extension.

Dan salah satu addon yang bisa di gunakan adalah Product Add-Ons yang di banderol seharga $49 dan akan mendapatkan beberapa fitur sebagai berikut :

• Opsi produk berdasarkan warna (untuk produk fashion).
• Percentage fees.
• Dropdown.
• Checkboxes.
• Custom text.
  • Jika menjalankan bisnis printing kaos online, maka ini adalah hal yang berguna. Kustomer dapat memberikan text yang di mau untuk di print pada kaosnya.

Kustom halaman produk WooCommerce menggunakan hook

Inilah yang menjadi bahasan pokok artikel ini. Yaitu bagaimana melakukan sedikit modifikasi pada halaman produk WooCommerce dengan menambahkan script baik php, html maupun css.

Beberapa kustomisasi ringan pada halaman produk tersebut kami rangkum sebagai berikut :

Tips-trik kustomisasi ringan halaman produk WooCommerce dengan CSS

Kode CSS bisa di gunakan untuk sekedar memberikan kustomisasi ringan pada halaman produk. Misalnya untuk mengubah ukuran, mengubah warna judul nama produk dan mengganti background warna tombol add to cart.

Masukan beberapa potong kode berikut ke dalam kotak snippet additional css di halaman customizer.

/* 
 * kustom halaman produk woocommerce
 * menggunakan kode CSS
 */

// Mengubah ukuran huruf judul produk
.woocommerce div.product .product_title {
	font-size: 36px;
}

// Mengubah warna huruf judul produk
.woocommerce div.product .product_title {
	color: #FF5733;
}

// memBOLD variasi produk
.woocommerce div.product form.cart .variations label {
   font-weight: bold;
}

// Memiringkan teks variasi produk
.woocommerce div.product form.cart .variations label {
   font-style: italic;
}

// Mengubah warna tombol
.woocommerce div.product .button {
   background: #000000;
}

Menambahkan seal Guaranteed SAFE Checkout pada halaman produk WooCommerce (single)

Halaman produk adalah halaman dimana kustomer memutuskan untuk membeli produk anda. Membeli artinya mereka akan menghabiskan uangnya baik dengan cara membayar secara cash atau mungkin menggunakan kartu kredit.

Maka anda dapat menambahkan seal Guaranteed SAFE Checkout yang anda dapatkan dari provide service keamanan yang anda gunakan. Langkah ini seperti yang pernah kami utarakan pada artikel tutorial kustom halaman checkout WooCommerce.

Pastikan bahwa gambar seal sudah berada pada folder uploads dan coba tambahkan script kode berikut ke dalam file function.php atau menggunakan plugin editor.

/* 
 * kustom halaman produk woocommerce
 * menambahkan ekstra konten
 */

function tkdr_seal_safe_checkout() {
    global $product;
        print '<img src="/wp-content/uploads/gambar/safe-certificate-woocommerce.jpg" alt="Guaranteed SAFE Checkout" class="img_safe_checkout"/>';
}
add_action ( 'woocommerce_single_product_summary', 'tkdr_seal_safe_checkout', 40 );

Script di atas mengait hook woocommerce_single_product_summary, yang hasilnya seal tersebut berada di bawah SKU, kategori dan tag produk (taxonomy). Opsi lain jika gambar seal ingin di tambahkan tepat pada bagian bawah tombol “add to cart” dengan script berikut.

/* 
 * kustom halaman produk woocommerce
 * menambahkan ekstra konten
 */

function tkdr_seal_safe_checkout() {          
        echo "<div> <img src="/wp-content/uploads/gambar/safe-certificate-woocommerce.jpg"> </div>";
}

Menambahkan deskripsi pendek (excerpt) pada halaman produk WooCommerce (archive)

Secara default halaman produk WooCommerce ada dua deskripsi yang bisa di gunakan untuk mendeskripsikan produk yang dijual. Short description dan Long Description, dan keduanya baru akan dapat dibaca oleh pengunjung atau kustomer ketika sudah masuk ke dalam single product page.

Langkah kustom ini akan memungkinkan anda untuk memberikan informasi berupa text yang dapat di lihat oeh pengunjung bahkan pada halaman katalog produk (archive).

Coba tambahkan script kode berikut ke dalam file function.php atau menggunakan plugin editor.

/* 
 * kustom halaman produk woocommerce (archive)
 * menambahkan ekstra konten
 */

function tkdr_ringkasan_arsip_produk() {
  the_excerpt();
}
add_action( 'woocommerce_after_shop_loop_item_title', 'tkdr_ringkasan_arsip_produk', 40 );

Bonus : kustom halaman produk WooCommerce pada tema website Storefront

Anda mungkin menggunakan tema website storefront, yaitu tema yang di kembangkan oleh WooCommerce sendiri dan menjadi tema default untuk membuat toko online. Tema yang di klaim paling kompatible dengan setiap versi WordPress dan WooCommerce.

Sayangnya tema website storefront terlihat sangat plain, dan layout product page singlenya yang sepertinya kelihatan “sempit”.

Tab deskripsi, informasi tambahan dan ulasan yang ada pada section long description berada pada posisi vertikal dan bersebelahan dengan blok informasi utama. Terlihat semakin sempit karena berbagi tempat, dan semakin sempit karena terdapat sidebar.

Berikut cara atau tips-trik untuk mendapatkan layout agar menjadi lebih lebar. Yaitu dengan merubah tab vertikal di samping menjadi horizontal di atas. Dan blok informasi utama, informasi tambahan maupun review berada di bawahnya.

Menggunakan kotak snippet kode CSS, tambahkan beberapa kode CSS berikut.

@media only screen and ( min-width : 768px ) di gunakan agar kode tersebut hanya bekerja pada tampilan desktop / laptop. Sementara pada layar yang lebih kecil (handphone) tetap pada kondisi default. Hal ini agar tidak menggangu atau merusak aspek mobile friendly pada google search console.

/* Ubah layout halaman produk tema storefront */

@media only screen and (min-width:768px) {
 div.woocommerce-tabs.wc-tabs-wrapper > ul {
  display: flex;
  width: 100%;
  border-bottom:1px solid rgba(0,0,0,.05);
}

 #tab-title-description, #tab-title-additional_information, #tab-title-reviews {
  margin-right:1.5em;
}

 .woocommerce-tabs ul.tabs li:after {
  content:none;
}

 #tab-description, #tab-additional_information, #tab-reviews {
  margin: 0 auto;
  padding-top: 5%;
  width: 100%;
 }
}

Mengatur jumlah produk pada halaman katalog WooCommerce

Anda mungkin ingin mengatur jumlah produk pada halaman katalog dan arsip ? Atau anda juga ingin mengatur jumlah related produk yang ingin ditampilkan pada halaman produk single ?

Artikel kami berikut adalah bagaimana cara mengatur jumlah produk maupun related produk WooCommerce.

Artikel terkait :