bungfrangki Sebaik mungkin mencoba bergumul dengan hasrat. Gagasan. Sebelum hal itu benar-benar menghilang karena ketidakmampuan jiwa-raga untuk membuatnya selalu melekat. Saat-saat mulai terasa berat untuk dideklarasikan. Apa boleh buat, itu sudah tugas kita untuk membuat hidup menjadi lebih menarik dan independen.

Custom WooCommerce Pagination CSS

1 min read

Custom WooCommerce Pagination CSS

WooCommerce merupakan salah satu plugin powerfull untuk menjalankan toko online berbasis WordPress. Seperti diketahui, plugin ini juga saya gunakan untuk membangun toko online, jualan template Blogger premium untuk Themeindie.com.

Untuk bahan penting build toko online lainnya, saya menggunakan Bimber sebagai framework themenya, salah satu theme terbaik yang dijual di Envato – Themeforest. Anehnya, walau menggunakan theme premium, pagination (page number) untuk WooCommerce tidak teratur, alias berantakan. Mungkin karena saya tidak menginstall semua plugin yang disarankan pada theme tersebut. Asumsinya seperti itu.

Alsan tidak menginstall, karena plugin-plugin itu tidak terlalu dibutuhkan. Ditambah lagi sudah begitu banyak plugin yang terinstall untuk mendukung WooCommerce.

Jadi, bisa saja ini (tampilan pagination WooCommerce yang berantakan) bukan karena tidak diatur oleh developer Bimber theme. Mungkin saja sudah diatur, tapi secara inline pada requirement plugin.

Nah, daripada harus menginstal plugin, mending saya buat sendiri pengaturan CSS pagination WooCommerce tersebut. Biar stylenya bisa sama dengan tampilan pagination di website utama.

WooCommerce Pagination Style Using CSS

/* WooCommerce pagination */
nav.woocommerce-pagination {
  display: flex;
  flex-direction: row; 
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
	overflow:visible!important
}
nav.woocommerce-pagination ul{
  list-style:none;
  text-align:center;
  text-decoration:none;
  margin:2rem auto;
}
nav.woocommerce-pagination li span.current,nav.woocommerce-pagination li a{
width:50px;
height:50px;
line-height:50px;
display:inline-block;
}
nav.woocommerce-pagination li{
	box-shadow:0 3px 20px -0.2px rgba(0,0,0,0.1);transition:all 300ms cubic-bezier(0.250,0.100,0.250,1.000);transition-timing-function:cubic-bezier(0.250,0.100,0.250,1.000);
	color:#000;
	background:#fff;
	float:left;
}
nav.woocommerce-pagination li a{
	color:#000;
  text-decoration:none;
}
nav.woocommerce-pagination li span.current,nav.woocommerce-pagination li:hover{
	background: -webkit-linear-gradient(35deg, #fad8a6, #faa6e9);
	background:linear-gradient(35deg, #fad8a6, #faa6e9);
}
nav.woocommerce-pagination li span.current{
	color:#fff;
}
nav.woocommerce-pagination li a.next{
	width:auto!important;
	padding:0 2rem 0 0.8rem!important;
  position:relative;
}
nav.woocommerce-pagination li a.prev{
	width:auto!important;
	padding:0 0.8rem 0 2rem!important;
  position:relative;
}
.next:after,.prev:before {
  content:'';
  position:absolute;
  font-family:FontAwesome;
  font-weight:400;
}
.prev:before{
	left:.5rem;
}
.next:after{
	right:.5rem;
}
.prev:before {
    vertical-align: middle;
    content: "\f060";
}
.next:after {
    vertical-align: middle;
    content: "\f061";
}

Tested: WooCommerce version 3.8.1

bungfrangki Sebaik mungkin mencoba bergumul dengan hasrat. Gagasan. Sebelum hal itu benar-benar menghilang karena ketidakmampuan jiwa-raga untuk membuatnya selalu melekat. Saat-saat mulai terasa berat untuk dideklarasikan. Apa boleh buat, itu sudah tugas kita untuk membuat hidup menjadi lebih menarik dan independen.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *