Posted on by

Tips-trik Kustomisasi Layout Halaman Single Produk WooCommerce

Kustomisasi Layout Halaman WooCommerce

wpJakarta.Com – Tips-trik Kustomisasi Layout Halaman Single Produk WooCommerce. Mungkin ada kalanya kita ingin mengubah atau sekedar melakukan kustomisasi layout halaman WooCommerce (halaman produk single) Khususnya halaman produk tema website storefront yang sepertinya kelihatan “sempit”.

Halaman produk tema website storefront memang terlihat agak kurang menarik, mungkin karena kesan sempit tersebut. Coba lihat pada bagian long description, tab deskripsi, informasi tambahan dan ulasan berada pada posisi vertikal dan bersebelahan dengan block informasi utama. Terlihat semakin sempit karena dua blok yang berbagi tempat, apalagi jika halaman produk WooCommerce di setting dengan widget sidebar. Ada cara atau tips-trik untuk meng kustomisasi layout, sehingga halaman single produk WooCommerce terlihat lebih lebar.

Tips-trik WooCommerce lainnya

Kustomisasi layout halaman WooCommerce yang terkesan “sempit”

Kustomisasi layout halaman WooCommerce dapat dilakukan dengan merubah tab vertikal menjadi horizontal di atas. Dan blok informasi utama, informasi tambahan maupun review berada di bawahnya. Seperti pada halaman produk dummy WooCommerce di website kami berikut, https://wpjakarta.com/produk/poster-woocommerce-biru-sejuk/. Pada halaman produk single WooCommerce tersebut, tab Deskripsi, Informasi Tambahan dan Ulasan kami tempatkan di bagian atas (memanjang).

Tips-trik WordPress lainnya

kustomisasi layout halaman WooCommerce dengan kode CSS

Untuk melakukan tips-trik dan kustomisasi layout halaman WooCommerce (halaman single produk) tersebut tidak akan membuat loading menjadi berat. Karena hanya dengan menambahkan kode CSS, tidak memodifikasi apalagi menambahkan element yang sudah ada. Hanya pengaturan ulang posisi murni dengan kode CSS. Melalui kotak snippet kode CSS tambahkan beberapa kode berikut.


/* Ubah layout halaman produk WC */
@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%;
 }
}

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

Kenapa harus melakukan kustomisasi layout halaman WooCommerce ?

Jika kita menggunakan tema website WordPress premium, mungkin tidak perlu lagi melakukan kustomisasi layout halaman WooCommerce tersebut. Lain halnya jika anda menggunakan tema website dasar (framework) seperti storefront WooCommerce, atau hello theme elementor. Maka melakukan kustomisasi layout halaman WooCommerce rasanya mutlak di lakukan. Tanpa di lakukan kustomisasi halaman produk single produk tersebut akan terlihat “cupu”.

Kustomisasi lainnya yang bisa di lakukan selain merubah layout adalah dengan memberikan pallete warna yang sesuai. Misalnya berikan warna yang sesuai untuk judul (nama produk), warna untuk teks deskripsi produk, warna tombol dan sebagainya. Pilihlah pallete warna yang sesuai dengan niche atau produk yang di jual.

Artikel lainnya

Untuk tips-trik WooCommerce lainnya kunjungi halaman kategory WooCommerce. Dimana kami banyak menulis tentang tips-trik kustomisasi atau modifikasi pada tampilan (visual) maupun skrip toko online WooCommerce. Kami juga banyak menulis artikel dan tips-trik kustomisasi tema website storefront. Anda dapat mengunjungi artikel-artikel yang di tag sebagai storefront.