Cara Membuat Katalog Produk di Website + Desain Web E-commerce, Friendly SEO

cm – Selain membuat katalog produk, penting juga untuk mendesain keseluruhan tampilan website e-commerce agar menarik dan fungsional.

Dalam tutorial ini, kamu akan mempelajari cara membuat katalog produk sekaligus mengintegrasikan desain website e-commerce menggunakan WordPress dan sedikit pemrograman berbasis HTML/CSS.

Kami juga akan membahas cara menambahkan fitur produk ke situs menggunakan WooCommerce, lengkap dengan langkah-langkah detail dan kode.

Langkah Awal: Memilih Platform Website E-commerce

Untuk memulai pembuatan katalog produk di website, kamu harus menentukan platform terlebih dahulu. Di tutorial ini, kita akan fokus menggunakan WordPress dan plugin WooCommerce yang sangat populer di kalangan bisnis kecil hingga besar karena fleksibilitas dan kemudahannya.

Menginstal WordPress dan WooCommerce

A. Instal WordPress

1. Download WordPress dari WordPress.org.
2. Setelah itu, instal WordPress di server hosting yang kamu gunakan (biasanya disediakan oleh hosting seperti Hostinger, Niagahoster, atau SiteGround).
3. Ikuti panduan instalasi cepat di cPanel atau gunakan instalasi otomatis WordPress yang biasanya ada di hosting tersebut.

B. Instal WooCommerce

1. Masuk ke dashboard WordPress kamu.
2. Klik Plugins > Add New, kemudian cari WooCommerce.
3. Instal dan aktifkan WooCommerce, lalu ikuti wizard setup untuk mengatur toko online kamu.

Membuat Katalog Produk di WordPress dengan WooCommerce

Setelah WooCommerce terinstal, kita bisa langsung mulai menambahkan produk ke katalog. Ikuti langkah berikut:

A. Tambahkan Produk Baru

1. Masuk ke dashboard WordPress, kemudian klik Products > Add New.
2. Isi Nama Produk, Deskripsi Produk, Harga, dan Upload Gambar Produk.
3. Gunakan fitur kategori untuk mengelompokkan produk yang sejenis (misalnya, “Fashion”, “Elektronik”, dll).

B. Membuat Halaman Katalog Produk

1. Buat halaman baru dengan cara klik Pages > Add New.
2. Beri nama halaman, misalnya “Katalog Produk”.
3. Di area konten, tambahkan shortcode berikut untuk menampilkan produk dalam bentuk grid:

[products limit="12" columns="4"]

Shortcode ini menampilkan 12 produk dalam 4 kolom. Kamu bisa sesuaikan sesuai kebutuhanmu.

C. Menambahkan Fitur Filter Produk

Untuk mempermudah pengguna mencari produk, kamu bisa menambahkan filter berdasarkan kategori, harga, atau popularitas.

1. Di sidebar, klik Appearance > Widgets.
2. Tambahkan widget Filter Products by Attribute ke sidebar atau area widget mana pun yang kamu inginkan.
3. Sesuaikan atribut yang ingin ditampilkan, misalnya filter harga atau filter kategori.

Desain Website E-commerce: Menggunakan HTML, CSS, dan Sedikit PHP

Untuk membuat desain web e-commerce yang menarik, kita bisa meng-customize tampilan website menggunakan HTML, CSS, dan sedikit PHP di dalam WordPress. Berikut adalah contoh bagaimana meng-custom tampilan produk di halaman utama.

A. Membuat File CSS Kustom

1. Buat file custom.css di dalam folder tema WordPress kamu (wp-content/themes/nama-tema-kamu).
2. Tambahkan kode berikut untuk mempercantik tampilan produk:

/* Kustomisasi layout produk */
.product {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease-in-out;
}

.product:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.product-price {
  color: #2ecc71;
  font-size: 20px;
  text-align: center;
}

.add-to-cart-btn {
  display: block;
  width: 100%;
  background-color: #3498db;
  color: white;
  text-align: center;
  padding: 10px 0;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
}

.add-to-cart-btn:hover {
  background-color: #2980b9;
}

3. Pastikan file ini terhubung dengan file functions.php dari tema yang kamu gunakan. Tambahkan kode berikut ke dalam file functions.php:

function load_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'load_custom_css');

B. Menambahkan PHP untuk Menampilkan Produk di Template Halaman

Jika kamu ingin menampilkan produk langsung dari template WordPress, kamu bisa menggunakan kode PHP di dalam template halaman (page.php atau single-product.php).

<?php
// Mendapatkan produk WooCommerce
$args = array(
    'post_type' => 'product',
    'posts_per_page' => 10,
);

$loop = new WP_Query($args);

if ($loop->have_posts()) {
    while ($loop->have_posts()) : $loop->the_post();
        wc_get_template_part('content', 'product');
    endwhile;
} else {
    echo __('Tidak ada produk yang ditemukan');
}
wp_reset_postdata();
?>

Kode di atas akan menampilkan daftar produk dari WooCommerce pada halaman yang menggunakan template ini. Pastikan kamu telah memasukkan produk melalui dashboard WooCommerce sebelumnya.

Tips Desain E-commerce yang Efektif

1. Tata Letak Responsif: Pastikan desain website e-commerce kamu responsif sehingga dapat tampil baik di perangkat desktop, tablet, dan ponsel.
2. Navigasi yang Mudah: Buat navigasi sederhana dengan kategori produk yang jelas. Ini membantu pelanggan menemukan produk dengan cepat.
3. CTA yang Jelas: Gunakan tombol Add to Cart atau Beli Sekarang yang menonjol dengan warna kontras untuk meningkatkan konversi.

Tutorial Mengoptimasi SEO untuk Katalog Produk

Setelah desain dan katalog produk sudah siap, langkah selanjutnya adalah memastikan semuanya teroptimasi untuk mesin pencari:

1. Gunakan SEO Plugin: Instal plugin seperti Yoast SEO atau Rank Math untuk membantu optimasi on-page. Pastikan setiap halaman produk memiliki meta title, meta description, dan alt text gambar yang relevan.
2. Optimasi Kecepatan Website: Pastikan loading time website cepat. Kamu bisa menggunakan plugin caching seperti W3 Total Cache atau WP Super Cache untuk mempercepat performa situs.
3. Backlink dan Internal Link: Buat artikel di blog yang terhubung ke halaman produk untuk meningkatkan visibilitas produk di mesin pencari. Link internal antarproduk juga bisa membantu SEO.

Kesimpulan

Membuat katalog produk dan mendesain website e-commerce tidak hanya membutuhkan tampilan yang menarik, tapi juga optimasi yang baik.

Dengan mengikuti langkah-langkah di atas, kamu bisa membuat katalog produk yang terstruktur dan mudah diakses oleh pelanggan.

Jangan lupa untuk selalu mengoptimalkan SEO agar produkmu dapat lebih mudah ditemukan di mesin pencari. Selamat mencoba!