Posted on

Tips-trik Kustomisasi Halaman Produk WooCommerce

wpJakarta.Com – Tips-trik Kustomisasi Halaman Produk WooCommerce. Ketika membuat sebuah toko online, maka halaman produk adalah halaman yang krusial. Di halaman itulah showcase produk tersebut dengan beberapa deskripsi tentang produk yang di jual, mulai dari harga, gambar produk dan informasi lainnya.

Kustomisasi Halaman Produk WooCommerce.

Jika menggunakan tema website premium atau plugin page builder misalnya elementor pro, mungkin tidak akan sulit untuk membuat halaman produk menjadi lebih “indah”. Tapi bagaimana jika menggunakan tema website versi free, atau misalnya tema website storefront ? Artikel ini akan memberikan sedikit tips-trik ringan untuk memberikan kustomisasi halaman produk WooCommerce.

Tema website storefront memang dibuat oleh WooCommerce sendiri, tapi tidak banyak sentuhan kustomisasi sehingga membuat halaman produk WooCommerce menjadi terlihat sangat plain. Tidak banyak warna baik pada judul atau nama produk, juga tombol “add to cart” yang biasa-biasa saja.

Tips-trik kustomisasi halaman produk WooCommerce dengan addon atau extension

Tips-trik kustomisasi halaman produk WooCommerce akan mudah dilakukan dengan penambahan addon atau extension. Cara yang mudah namun bukan cara murah. Setiap addon atau extension WooCommerce biasanya harus dibeli atau tidak gratis. Itulah kenapa tema website storefront seperti tampil seadanya. Karena user akan merasa perlu untuk melakukan kustomisasi. Dan disanalah mereka menjual addon atau extension.

Dan salah satu addon yang bisa di gunakan adalah Product Add-Ons. Namun add-on tersebut tidak gratis dan mesti membayar $ 49 dan akan mendapatkan beberapa fitur seperti :

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

Tips-trik kustomisasi ringan halaman produk WooCommerce dengan CSS

Tips-trik menggunakan kode CSS juga bisa di lakukan untuk sekedar memberikan kustomisasi ringan pada halaman produk WooCommerce. Misalnya untuk mengubah ukuran atau mengubah warna text judul atau nama produk dan mengganti warna tombol “add to cart”. Meskipun hal tersebut bisa juga di lakukan melalui “theme customizer”.

// 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;
}