Menambahkan Fitur Upload Foto di Review Produk Pelanggan pada Woocommerce dengan Plugin

Info Plugin0 comments896 Views

Tampilan custom layout normal

Dapatkan Versi Pro - $26 Download Versi Gratis Cara Custom Plugin

Jika anda pemilik toko online yang menggunakan Woocommerce sebagai platform kemudian anda ingin pelanggan dapat mengupload foto saat mereka mengirimkan review produk yang sudah mereka beli seperti di website marketplace. Jika hal tersebut yang sedang anda cari maka artikel ini tepat untuk anda, karena saya akan membahas bagaimana menambahkan fitur upload foto kedalam review produk Woocommerce dengan plugin. Oke langsung saja silahkan dibaca dengan seksama 🙂

Woocommerce merupakan plugin CMS WordPress yang berfungsi sebagai media jual-beli online. Pada fitur bawaannya Woocommerce telah memberikan fasilitas review produk di setiap halaman produk masing-masing. Pada review produk sudah ada fitur rating dan komentar, dua fitur ini sebetulnya sudah cukup tapi jika anda ingin lebih meningkatkan kepercayaan pengunjung toko online anda, anda dapat menambahkan fitur upload foto. Bagaimana cara menambahkannya? Caranya gampang, silahkan instal plugin Photo Reviews for WooCommerce by VillaTheme. Setelah berhasil instal fitur upload foto akan langsung ditambahkan pada review produk dan anda akan mendapatkan 2 fitur lainnya.

Photo Reviews for WooCommerce by VillaTheme

Pada halaman resmi direktori plugin WordPress, dijelaskan bahwa plugin “Photo Reviews for Woocommerce” dapat membantu anda mengijinkan pelanggan mengirimkan review produk yang dibeli beserta fotonya. Dengan foto, toko anda mendapatkan bukti dari pelanggan yang sudah membeli yang menjadikan kepercayaan toko anda semakin meningkat.

Plugin ini memiliki tiga fitur utama, selain upload foto review produk, plugin akan mengirimkan permintaan review ke pelanggan yang telah membeli produk di toko anda, dan secara otomatis membuatkan kupon untuk pelanggan yang sudah memberikan review tentunya setelah anda mempublikasi reviewnya.

Untuk mendapatkan plugin ini anda bisa langsung mendownload gratis di WordPress.org atau jika anda ingin mendapatkan fitur yang lebih lengkap anda dapat membelinya di envato.

Untuk penjelasan yang lebih lengkap anda bisa membaca langsung di halaman plugin tersebut, saat ini saya ingin fokus membahas layout tampilan plugin ini. Untuk layout, plugin ini memberikan 2 pilihan: normal, dan grid (masonry).

Untuk versi berbayarnya, kedua layout tersebut diberikan opsi yang lengkap bisa disesuaikan dengan kebutuhan, tapi untuk yang versi gratis terutama untuk layout grid/masonry tidak semua theme cocok (saya menggunakan theme front store), jadi saya memilih layout normal, itupun tampilannya standar dan untuk foto review ukurannya kecil ditengah dan ketika foto diklik, akan tampil foto yang lebih besar di bawah foto review, menurut saya tidak rapi sama sekali.

Custom Style Plugin Photo Reviews Woocommerce

Karena hal tersebut, saya mencoba memperbaiki tampilannya dengan menambah beberapa baris CSS, dari yang sebelumnya foto review tampilannya kecil dan ditengah menjadi rata kiri dan ukurannya lebih besar, dan untuk tampilan foto besar (ketika foto review diklik) yang sebelumnya muncul dibawah menjadi bentuk popup yang sudah responsive ketika di buka di mobile. Dan inilah hasil custom yang saya kerjakan.

Untuk membuat tampilan seperti diatas, saya sertakan kode css yang bisa anda masukkan ke dalam website anda, bisa menggunakan plugin custom css atau fitur custom css bawaan theme atau jika anda menggunakan child theme silahkan masukkan di style.css, saya tidak merekomendasikan anda memasukkan kode css ini langsung di theme induk karena bisa saja hilang karena di-overwrite saat update theme.

/* Custom Style Photo Reviews Plugin
 * Required Plugin: Photo Reviews for WooCommerce by VillaTheme (https://wordpress.org/plugins/woo-photo-reviews/)
 * Source: https://www.nugweb.id/info-plugin/id-photo-reviews-woocommerce-plugin/
 */

.kt-reviews-image-container>.kt-wc-reviews-images-wrap-wrap>.reviews-images-item>.review-images{
  height: 110px;
}
.kt-wc-reviews-images-wrap-wrap {
  justify-content: left;
}
.big-review-images:before {
  content: '';
  background-color: rgba(0,0,0,0.9);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}
.big-review-images {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 99999;
}
.kt-reviews-image-container .big-review-images img{
	max-height: 70%;
}
.kt-reviews-image-container{
	margin-bottom:0;
}
.kt-reviews-image-container .wcpr-rotate .wcpr-rotate-left, .kt-reviews-image-container .wcpr-rotate .wcpr-rotate-right{
	color: #FFF;
  margin-top: 10px;
}
body.logged-in.admin-bar .kt-reviews-image-container .wcpr-rotate .wcpr-rotate-left, body.logged-in.admin-bar .kt-reviews-image-container .wcpr-rotate .wcpr-rotate-right {
  margin-top: 60px;
}
.wcpr-prev, .wcpr-next{
	top: 50%;
  transform: translateY(-50%);
  padding: 65px 30px;
  margin-top: 0;
  color: #fff;
  font-size: 20px;
}
.wcpr-prev:hover, .wcpr-next:hover {
  color: rgba(255, 255, 255, 0.6);
}
.big-review-images>.wcpr-close{
  background-color: rgba(255, 255, 255, 0.08);
  color:#FFF;
  margin: 0;
  font-size: 15px;
  padding: 25px;
}
body.admin-bar .big-review-images>.wcpr-close {
  margin-top: 31px;
}
@media (max-width:782px){
	.big-review-images>.wcpr-close {
    padding: 20px;
  }
}
@media (min-width:601px) and (max-width:782px){
	body.admin-bar .big-review-images>.wcpr-close {
    margin-top: 46px;
	}
  .big-review-images>.wcpr-close {
    padding: 20px;
  }
}
@media (max-width:600px){
	.big-review-images>.wcpr-close, body.admin-bar .big-review-images>.wcpr-close {
    margin: 0;
  }
  body.logged-in.admin-bar .kt-reviews-image-container .wcpr-rotate .wcpr-rotate-left, body.logged-in.admin-bar .kt-reviews-image-container .wcpr-rotate .wcpr-rotate-right {
    margin-top: 20px;
  }
  .wcpr-prev, .wcpr-next{
  	padding: 65px 9px;
  }
}

Sekian artikel ini, semoga dapat membantu anda. Silahkan gunakan secara bijak, mohon tidak mem-publikasi ulang dalam media apapun 🙂

Artikel Terkait

Komentar

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *