Posted on

Tips-Trik Mendesain Halaman Produk Responsif (WooCommerce, WordPress)

wpJakarta – Tips-Trik Mendesain Halaman Produk Responsif (WooCommerce, WordPress). Jika anda sedang mendesain halaman produk WooCommerce dengan layout kolom grid. Lalu anda menginginkan halaman tersebut akan menampilkan dua kolom grid saat di buka menggunakan screen atau layar Handphone. Memang banyak tema website WordPress dan WooCommerce (biasanya tema kategori “marketplace” yang sudah dari sononya atau secara bawaan di setting untuk menampilkan dua kolom pada layar handphone.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress
Tips-Trik Mendesain Halaman Produk Responsif WooCommerce

Lalu bagaimana jika tema yang anda gunakan tidak dapat “mewujudkan” keinginan anda ? Tema website WordPress meskipun sudah mendukung penuh plugin WooCommerce nyatanya adalah website jenis kategori bisnis yang “full compatible” atau sudah terintegrasi dengan plugin WooCommerce. Sehingga pada website tersebut juga akan terdapat halaman shop, cart, checkout dan fitur-fitur layaknya toko online lainnya.

Tips-trik mendesain halaman produk responsif WooCommerce tanpa coding

Kembali ke masalah diatas, masalah tersebut bukanlah suatu hal yang sulit atau jangan sampai mengurungkan niat anda untuk mendesain layout website toko online yang sesuai dengan yang anda inginkan. Pada artikel ini kami coba membantu anda untuk melakukan hal tersebut. Asyiknya tidak ada kode php atau HTML yang harus ditulis, hanya beberapa baris kode CSS untuk disesuaikan dengan selector yang anda buat agar benar-benar fit saat di view menggunakan perangkat mobile.

Selebihnya hanya “drag and drop” dan sedikit setting menggunakan plugin elementor. Yup… dua plugin utama yang digunakan adalah elementor dan WooCommerce. Pastikan anda sudah menginstall dua plugin tersebut, dan tidak perlu versi PRO atau berbayar baik elementor atau WooCommercenya.

Berikut beberapa langkah tips-trik mendesain halaman produk responsif WooCommerce menggunakan plugin page builder Elementor :

  • Edit halaman produk atau buat halaman baru menggunakan Elementor.
  • Pada halaman produk yang ingin dikerjakan klik tanda (+) bulat merah atau “add new section”.
  • Pilih struktur dua kolom.
  • Pada masing-masing layout “isikan” dengan “Product” widget :
  • Setting masing-masing produk widget melalui panel elementor disebelah kiri :
    • Content >> Product >> Product Per Page : 2.
    • Style >> Menu Style >> Two Columns.
  • Edit masing-masing kolom dengan mengklik icon kolom disebelah kiri product widget dan berikan setting :
    • Layout >> Column Width (%) : 50.
  • Pada bagian paling bawah panel elementor, klik responsive mode dan pilih “mobile” untuk mempreview tampilannya.

Dengan pengaturan diatas sementara tampilan produk anda akan terlihat seperti gambar disamping. Meskipun sudah mendisplay dua produk untuk satu kolom, tapi masih ada yang “janggal” dimana deskripsi produk, dan harga serta tombol add to cart masih mepet ke sebelah kiri kolom.

Tambahkan kode CSS berikut untuk mengatasi hal tersebut :

@media only screen and (max-width: 600px)  {
  ul.products li.product .wc-product-details-left, ul.products li.product .wc-product-details-right {
    width:100%;
    display: inline-block;
  }
}

Pada tema yang kami gunakan, “selector” deskripsi produk dan kategori adalah : ul.products li.product .wc-product-details-left. Sedangkan Harga dan tombol add to cart adalah : ul.products li.product .wc-product-details-right. Anda dapat menyesuaikan selector yang digunakan pada tema website. Karena masing-masing selector bisa saja berbeda antara satu tema dengan yang lainnya.

Cek setiap hasil kustomisasi website WordPress dengan “mobile friendly test”

Setiap kali anda melakukan kustomisasi apalagi yang berkaitan dengan kolom, widget, tampilan web atau yang berhubungan dengan tata letak suatu element. Pastikan untuk selalu melakukan test mobile friendly. Untuk memastikan bahwa kustomisasi yang digunakan sudah benar dan memang benar-benar bisa di tampilkan secara sempurna pada screen atau handphone.

Sedangkan hasil secara live tips trik pada artikel yang kami buat ini bisa anda lihat pada salah satu halaman produk website toko online klien kami. Dimana pada tampilan layar HP kami membuatnya menjadi tiga baris kolom https://freshplus62.com/produk/buah/. Sedangkan pada salah satu halaman kategori produknya kami buat menjadi dua kolom https://freshplus62.com/produk/fresh/.

Kesimpulan tips-trik mendesain halaman produk responsif WooCommerce

Tips-trik mendesain halaman produk responsif WooCommerce diatas sebenarnya bukan hanya untuk mendesain halaman produk WooCommerce saja. Pada halaman lainnya, misalnya jika anda ingin mengkustom halaman galeri foto. Langkah diatas tentu juga bisa digunakan untuk menampilkan dua kolom grid. Lalu jika anda menggunakan page builder selain elementor, misalnya Divi Beaver builder dan sebagainya, settingnya mungkin berbeda, ada hanya perlu melakukan penyesuaian saja.

Artikel : Tips-trik mendesain halaman produk responsif WooCommerce