Posted on

Tips-trik Menambah Jumlah Kolom Produk Halaman WooCommerce

wpJakarta.Com – Tips-trik Menambah Jumlah Kolom Produk Halaman WooCommerce. Banyak cara dapat dilakukan untuk membuat halaman WooCommerce menjadi lebih menarik. Lebih menarik disini tentu saja adalah relatif tergantung bagaimana “mood” dari masing-masing orang. Secara default halaman produk WooCommerce berjumlah tiga produk atau kolom per row. Ada yang merasa bahwa tiga kolom produk tersebut sudah cukup karena dapat menampilkan gambar-gambar dengan ukuran yang besar.

Namun ada juga orang yang ingin menambah jumlah produk dalam satu kolom menjadi empat, lima atau enam. Mungkin karena punya banyak produk yang di jual sehingga ingin menampilkan lebih banyak produk pada halaman tersebut. Kami punya “beberapa” tips trik yang bisa dilakukan untuk menambah jumlah produk atau kolom halaman WooCommerce.

Tips-trik Menambah Jumlah Kolom Produk Halaman WooCommerce Dengan Plugin

Jika anda memiliki plugin “builder” macam elementor, beaver builder, siteorigin dan lain sejenisnya. Tentu anda dapat menggunakan plugin tersebut untuk mengatur halaman produk WooCommerce. Selain mengaturnya untuk tampil baik pada layar pc/laptop, juga dimungkinkan untuk dapat diatur secara responsif pada layar handphone atau tablet. Sesuai dengan parameter setting yang ada pada plugin tersebut. Baca juga : Tips-Trik Mendesain Halaman Produk Responsif (WooCommerce, WordPress) Menggunakan Plugin Elementor.

Baca Juga :

Tips-trik menambah jumlah kolom produk halaman WooCommerce tanpa plugin

Seperti yang biasa kami lakukan dalam mengkustom website WordPress. Bahwa kami lebih sering menggunakan kode atau skrip fungsi php. Lalu menggunakan hook yang ada untuk mengkustom atau memodifikasi halaman website WordPress atau WooCommerce. Pada artikel ini ada beberapa cara atau tips-trik untuk menambah jumlah kolom produk dalam satu row di halaman WooCommerce tanpa menggunakan plugin. Anda bisa mencobanya satu persatu lalu memilih cara mana yang bisa diterapkan pada website WooCommerce anda. Untuk contoh live anda bisa melihat halaman “dummy” WooCommerce pada website ini https://wpjakarta.com/shop/ atau website salah satu rekan kami https://freshplus62.com/shop/ yang juga tampil responsif pada layar HP.

Kami mengutip salah satu halaman dokumentasi plugin WooCommerce sendiri https://docs.woocommerce.com/document/change-number-of-products-per-row/. Pada halaman tersebut ada tiga cara yang bisa dilakukan untuk menambah jumlah produk atau kolom, yaitu :

1. Menambahkan fungsi php pada tema website WordPress kustom

Jika anda menggunakan tema website selain “storefront” yang dikembangkan oleh WooCommerce itu sendiri. Maka anda dapat menambahkan kode/skrip fungsi php berikut pada file function.php.

 add_filter('loop_shop_columns', 'loop_columns', 999);
 if (!function_exists('loop_columns')) {
 	function loop_columns() {
 		return 3; // ganti dengan jumlah yang diinginkan. 4, 5, maks 6
 	}
 }

2. Menambahkan fungsi php pada tema website WordPress kustom

Cara kedua adalah jika anda menggunakan tema website yang dikembangkan oleh WooCommerce, misalnya storefront. Maka tambahkan kode berikut pada file function.php.

 function loop_columns() {
 return 5; // 5 products per row
 }
 add_filter('loop_shop_columns', 'loop_columns', 999);

3. Menggunakan shortcode

Cara atau tips-trik ketiga atau yang terakhir untuk menambah jumlah kolom produk WooCommerce. Dari yang kami kutip di halaman dokumentasi tersebut. Adalah dengan menambahkan shortcode langsung pada halaman produk anda.

 [recent_products per_page="12" columns="5"]

Kesimpulan : tips-trik menambah jumlah kolom produk halaman WooCommerce

Cara diatas hanyalah tips-trik untuk menambah jumlah kolom dalam satu row halaman. Bukan menambah jumlah produk. Jika anda mencari cara bagaimana menambah jumlah produk untuk ditampilkan pada satu halaman produk WooCommerce. Maka kunjungi artikel kami berikut : Tips-trik Menambah Jumlah Produk Pada Halaman WooCommerce. Artikel tersebut memuat cara bagaimana menambah jumlah produk dengan menyesuaikan jumlah kolom dan jumlah row. Dengan mengedit langsung file woocommerce.php dan file number-product.php yang ada pada folder tema website anda.