Posted on

Tips-trik Menambah Jumlah Produk Pada Halaman WooCommerce

wpJakarta.Com – Tips-trik Menambah Jumlah Produk Pada Halaman WooCommerce. Pada artikel kami sebelumnya kami menuliskan mengenai tiga cara atau tips-trik menambah jumlah kolom produk halaman WooCommerce. Tiga cara tersebut seperti yang di catat dalam halaman dokumentasi WooCommerce. Pada artikel ini kami memberikan cara menambah jumlah produk pada halaman WooCommerce.

Apa bedanya ? Memang terdengar hampir sama. Tetapi sebenarnya ini adalah artikel tips trik yang berbeda. Jika pada artikel sebelumnya adalah hanya menambah jumlah kolomnya. Maka pada artikel ini juga menambah jumlah produknya. Karena rata-rata satu halaman produk WooCommerce (Shop page) hanya memuat 12 produk dalam satu halaman. (3 kolom x 4 row). Jadi jika misalnya anda menambah hanya jumlah kolomnya saja. Maka jumlah produknya akan tetap berjumlah 12 produk.

Misalnya anda hanya menambah jumlah kolom menjadi enam (6). Maka satu row akan berisi 6 produk dan rownya akan tetap 2. Hingga halaman tersebut tetap memuat 12 produk (6 x 2). Idealnya adalah jika ingin mendisplay jumlah produk sebanyak 30 produk dalam satu halaman. Jadi selain menambah kolom menjadi 6 maka juga harus menambah jumlah row menjadi 5. Sehingga total produk yang bisa ditampilkan pada halaman tersebut adalah 30 (6 x 5).

Jadi pada artikel ini kami menuliskan tentang tips-trik atau cara yang bisa dilakukan untuk menambah jumlah produk pada satu halaman WooCommerce. Bukan hanya menambah jumlah kolomnya saja. Yang disesuaikan dengan penambahan jumlah kolomnya.

Tips-trik menambah jumlah produk pada halaman WooCommerce

Tips-trik Menambah Jumlah Produk Pada Halaman WooCommerce

Pada artikel kami ini, kami berasumsi anda menggunakan tema website yang sudah jadi dan terinstall plugin WooCommerce. Seperti yang umumnya website WordPress adalah menggunakan tema atau template jadi. Bukan membuatnya dari scratch. Pada tema website WordPress yang memang 100% mendukung plugin WooCommerce, maka rangkaian kode-kode berikut sudah dituliskan didalam sebuah file php. Dan anda hanya perlu menemukan kode tersebut lalu merubah angka atau variabelnya. Namun jikapun tidak, maka kode berikut dapat di tuliskan pada file function.php atau “site specific plugin”.

  • Akses folder tema menggunakan file manager dari cPanel.
  • Carilah file “woocommerce.php”. Biasanya pada folder /wp_content/themes/nama_tema/inc/woocommerce.php. Letak file ini mungkin berbeda di lain tema.
  • Cari kode atau fungsi php yang bertuliskan sebagai berikut : , atau bisa dengan menuliskan kode berikut pada file function.php.
 function nama_tema_wc_setup() { // sesuaikan dengan nama tema atau nama fungsi yang ingin dibuat
	 add_theme_support( 'woocommerce', apply_filters( 'nama_tema_wc_args', array(
	 	'product_grid'          => array(
	 		'default_columns' => 6, // ubah ke jumlah kolom yang diinginkan
	 		'default_rows'    => 5, // ubah ke jumlah row yang diinginkan
	 		'min_columns'     => 1,
	 		'max_columns'     => 6,
	 		'min_rows'        => 1
	  	)
	 ) ) );
	 add_theme_support( 'wc-product-gallery-zoom' );
	 add_theme_support( 'wc-product-gallery-lightbox' );
	 add_theme_support( 'wc-product-gallery-slider' );
 }
 add_action( 'after_setup_theme', 'nama-tema_wc_setup' ); // sesuaikan dengan nama tema atau nama fungsi yang ingin dibuat
  • Berikutnya masih pada file yang sama, temukan baris kode seperti di tulis sebagai berikut. Atau anda bisa menuliskannya pada file function.php.
 function nama_tema_wc_loop_columns() { // sesuaikan dengan nama tema atau nama fungsi yang ingin dibuat
 	return 6; // ubah ke jumlah kolom yang diinginkan
 }
 add_filter( 'loop_shop_columns', 'nama_tema_wc_loop_columns' );
  • Berikutnya, juga masih pada file yang sama. Temukan baris kode seperti di tulis sebagai berikut.
 function nama_tema_products_per_page() {
 	$num_prod = ( isset( $_GET['products-per-page'] ) ) ? $_GET['products-per-page'] : 
 apply_filters( 'schoolplus_products_per_page', 30 ); // ubah ke jumlah total yang ingin ditampilkan

 	if ( $num_prod == 'all' ) {
 		$num_prod = wp_count_posts( 'product' )->publish;
 	}

 	return $num_prod;
 }
 add_filter( 'loop_shop_per_page', 'nama_tema_products_per_page' );
  • Save dan coba lihat halaman produk WooCommerce. Sampai disini halaman produk WooCommerce akan mendisplay 30 produk dengan 6 kolom menyamping dan 5 row ke bawah.
  • Namun masih ada yang janggal dimana judul halaman menampilkan:
    • “Showing 1–12 of xxx results Show 12 – 24 – All” link .
  • Atas dan bawah masih belum nyambung.
  • Caranya temukan file “number-product.php” yang biasanya terletak pada folder /wp_content/themes/nama_tema/woocommerce/number-product.php.
 /**
  * Number of products on shop page
  */

 // Exit if accessed directly
 if ( ! defined( 'ABSPATH' ) ) {
	exit;
 }

 if ( is_single() || ! have_posts() ) return;

 $num_prod = ( isset( $_GET['products-per-page'] ) ) ? $_GET['products-per-page'] : 30; /* ganti dengan 
 jumlah produk yang ingin di tampilkan */

 $num_prod_x1 = 30; // ganti dengan jumlah produk yang ingin di tampilkan
 $num_prod_x2 = $num_prod_x1 * 2;

 $obj  = get_queried_object();
 $link = '';

 ................. kode selanjutnya .................
  • Jangan lupa juga untuk mengatur jumlah produk “Related Product”. Ubah atau tambahkan kode berikut.
 function nama_tema_wc_related_products_args( $args ) {
 	$defaults = array(
 		'posts_per_page' => 4, // ubah ke jumlah produk related
 		'columns'        => 4,
 	);
 
 	$args = wp_parse_args( $defaults, $args );
 
 	return $args;
 }
 add_filter( 'woocommerce_output_related_products_args', 'nama_tema_wc_related_products_args' );
 add_filter( 'woocommerce_upsell_display_args', 'nama_tema_wc_related_products_args' );

 if ( ! function_exists( 'nama_tema_wc_product_columns_wrapper' ) ) {
  • Kini halaman produk WooCommerce anda akan menampilkan jumlah produk yang lebih banyak sesuai yang diinginkan.
    • Juga dengan jumlah kolom dan row yang sesuai
    • Plus dengan “statement/title” yang sesuai yang tertera diatas halaman.

Kesimpulan : tips-trik menambah jumlah produk pada halaman WooCommerce

  • Sekali lagi kami memberikan tutorial ini dengan asumsi bahwa anda menggunakan tema website yang sudah jadi dan tentunya mendukung plugin “WooCommerce”.
  • Kode diatas atau letak file mungkin berbeda antara tema satu dengan yang lainnya. Jadi lakukan beberapa penyesuaian.
  • Jika anda merubah kode langsung pada file di folder tema dan terdapat update dikemudian hari, maka kode tersebut akan berubah ke awal dan anda akan perlu untuk merubahnya lagi.
  • Pilihan lainnya adalah, kode tersebut bisa di tuliskan pada file function.php atau pada “site specific plugin” untuk mencegah kode tersebut ter”overide” jika ada update atau pembaruan tema.