17. Border Radius untuk Produk Katalog WooCommerce

Hello everyone!

Di sini saya mencoba menggunakan Astra Theme dalam pengaplikasiannya, silahkan disesuaikan saja dengan theme yg kamu gunakan.

Langkah pertama adalah masuk ke menu, "Appearance" lalu "Customize" langsung pergi ke paling bawah menu namanya, "Additional CSS" dan mulai tambahkan kode sebagai berikut,

CSS Code

				
					/* WooCommerce */
.woocommerce ul.products li.product {
    border-radius: 10px;
    overflow: hidden;
    padding: 0px;
}
.woocommerce ul.products li.product .button {
    border-radius: 5px;
}

.woocommerce ul.products li.product {
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0);
    transform: translate3d(0,0,0); 
    transition: all 0.2s ease-in;
}
.woocommerce ul.products li.product:hover {
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
    transform: translate3d(0,-5px,0); 
}
				
			

Semoga bermanfaat dan selamat mencoba!

Shopping Cart
Scroll to Top