Posted on by

Tips-trik Kustomisasi Layout Halaman Single Produk WooCommerce

wpJakarta.Com – Tips-trik Kustomisasi Layout Halaman Single Produk WooCommerce. Mungkin ada kalanya kita ingin mengubah layout halaman produk WooCommerce. 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.

Tips-trik WooCommerce lainnya

Kustomisasi layout halaman single produk WooCommerce yang terkesan “sempit”

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

Yaitu dengan menempatkan tab vertikal menjadi horizontal di atas. Dan block informasi utama berada di bawahnya. Seperti pada gambar berikut. Pada gambar tersebut, di atas adalah layout default halaman produk single WooCommerce, sementara kita ingin membuatnya menjadi seperti pada bagian bawah gambar tersebut.

Kustomisasi Layout Halaman WooCommerce

Tips-trik WordPress lainnya

Tips-trik kustomisasi layout halaman single produk WooCommerce dengan kode CSS

Untuk melakukan tips-trik dan kustomisasi layout halaman single produk WooCommerce 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.

Artikel lainnya