Haloo master koding, selamat lembur..hehehe
Kali ini kami akan memberikan
cara untuk merubah woocommerce shop menjadi 3 column, simak baik baik, jangan sampai berkedip, kalo ngantuk minum kopi dulu gan..hehehe
tapi alangkah baiknya bila anda membaca juga penjelasan tentang
menambahkan button detail di woocommerce shop list
Cara mengatasi Fixing Outdated WooCommerce Templates
Mengatasi Warning: Division by zero in di woocommerce
lanjtkan, secara default, maka woocommerce akan ditampilkan menggunakan 4 column.
sehingga gambar/ image akan mejadi agak kecil atau mini.
secara default, view/ tampiannya akan seperti gambar di bawah ini
Maka, untuk mengubah tampilan tersebut menjadi 3 column kita ubah dengan css widthnya sehingga menjadi 33.333%
dan secara default, widthnya adalah 22.05%
Lanjut sekarang coba buka file style.css lalu tambahkan kode berikut di baris paling bawah
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
width: calc(33.3333% - 3.8%);
}
Gunakanlah funtion calc di css untuk mengurangi dengan margin di css nya karena di css nya menggunakan margin 3.8% maka kita harus kurangi dengan 3.8%
tapi ada sedikit masalah di css nya. karena ada class last pada setiap 4 kali perulangan
lihat tampilan di bawah ini
cara mengubah tampilan tersebut adalah dengan cara menghapus class last yang ada di post-class wordpress nya
caranya hanya cukup dengan menggunakan function add filter yang sudah disediakan oleh wordpress
Langsung saja kita buka file functions.php
kemudian tambahkan kode di bawah ini ke dalam file tersebut
add_filter( 'post_class', 'prefix_post_class', 21 );
function prefix_post_class( $classes ) {
if ( 'product' == get_post_type() ) {
$classes = array_diff( $classes, array( 'first', 'last' ) );
}
return $classes;
}
Setelah itu lanjut simpan file functions.php coba sekarang refresh page shop anda
jika tampilannya menjadi 3 column seperti tampilan di bawah ini berarti anda telah sukses
Cukup mudah bukan??
Siapapun bisa melakukannya, apalagi agan master koding, hehe.., barangkali sudah menjadi hal yang biasa saja..
cukup sekian penjelasan mengenai bagaimana
cara merubah woocommerce shop menjadi 3 column dengan sederhana, apabila
ada yang perlu didiskusikan tinggalkan koment anda pada kolom komentar
atau hubungi saya langsung lewat
Contact Us
Kritik, saran maupun usulan yang positif sangat kami tunggu-tunggu sekali demi kemanfaatan blog archives code ini
Baik, selamat mencoba dan semoga berhasil dan sukses..