
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
- Tips-trik Kustomisasi Halaman Checkout WooCommerce
- Tips-trik Menambahkan Teks Pada Halaman Login WooCommerce
- Tips-trik Membuat Deskripsi Pendek Produk Pada Halaman Belanja WooCommerce
- Tips-trik Kustomisasi Halaman Produk WooCommerce
- Tips-trik Membuat Produk WooCommerce
- Menampilkan Harga Yang Berbeda Pada Masing-Masing Kustomer WooCommerce
- Tips-trik Merubah Teks No-Shipping Available WooCommerce
- Memindahkan Deskripsi Kategori Produk WooCommerce Ke Bagian bawah
- Menambahkan Gambar Checkout Aman Pada Halaman Single WooCommerce
- Membuat Menu Sosial Media Pada Tema Storefront WooCommerce
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
- Tema Website WordPress Oketheme (Buatan Dalam Negeri)
- Tips-trik Kustomisasi Tombol WordPress
- Tips-trik Kustomisasi Prev Next Post WordPress
- Untuk Website WordPress, Pilih myISAM atau InnoDB
- Tips-trik Kustomisasi Footer WordPress
- Tips-trik Membuat Dan Kustomisasi Topbar WordPress
- Tips-trik Menampilkan Jumlah View Halaman WordPress
- Tips-trik Membatasi Jumlah Revisi Post Website WordPress
- Tips-trik Mengatasi WordPress Error Establishing a Database Connection
- The Response Is Not A Valid JSON Response
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
- Tips Menghadapi Serangan Brute Force Attack
- Monetisasi Trafik Dengan Afiliasi Accesstrade
- Desain Ulang Website Freshplus62.Com
- Daftar Iklan Alternatif Selain Google Adsense
- Remove BG – Tools Online Remove Background
- Kaos Sablon WordPress Murah Di wpJakarta
- Merchandise WordPress Dan WooCommerce Murah Di wpJakarta
- Insight dan Data Industri Laundry di Indonesia (pengalaman selama 10 tahun QnC Laundry)
- Waralaba Usaha Laundry Kiloan oleh QnC Laundry
- Perbedaan Kol Dan Kubis ?
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.