Mengatur Jumlah Kolom Produk WooCommerce Pada Tema Website Storefront

mengatur jumlah kolom produk woocommerce

TokoDaring.Com – Mengatur Jumlah Kolom Produk WooCommerce Pada Tema Website Storefront. Siapa yang tidak kenal dengan tema website storefront? Tema default WooCommerce yang bisa di kustomisasi sesuai bentuk toko online anda.

Artikel terkait :

63 Ide Usaha Kecil di Tahun 2024

Mengatur Jumlah Kolom Produk WooCommerce Pada Tema Website Storefront

Biasanya tema website yang saat ini sudah sangat responsif hanya menampilkan sati kolom jika di veiw menggunakan handphone. Dan kebanyakan pemilik website terutama website toko online ingin menampilkan dua kolom untuk produknya.

Jika anda menggunakan tema website storefront, itu bisa dilakukan hanya dengan menambahkan beberapa baris kode CSS sebagai berikut (tambahkan pada menu additional CSS dari halaman customizer) :

/*
 * Mengatur Jumlah Kolom Produk WooCommerce
 * Pada Tema Website Storefront
 */

ul.products li.product {
	width: 46.411765%;
	float: left;
	margin-right: 5.8823529412%;
}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}

@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}

Hasil kode CSS tersebut bisa dilihat di website klien kami Seledri.Com yang menggunakan tema Storefront WooCommerce.

TokoDaring
TokoDaring

Dari menggoreng tempe hingga menulis script php. Jika tidak sedang cooking dia sedang coding. Thank you for your time!

We will be happy to hear your thoughts

      Leave a reply

      TokoDaring.Com
      Logo
      Compare items
      • Total (0)
      Compare
      0
      Shopping cart