Persiapkan Hosting & Domain

Hosting adalah "rumah" tempat file website Anda tersimpan. Domain adalah alamat website Anda (misalnya tokoku.com). Pilih hosting yang sudah mendukung WordPress.

Rekomendasi hosting lokal yang terpercaya:

• Niagahoster — Murah, support 24/7, one-click WordPress install
• Domainesia — Harga kompetitif, server Indonesia
• Dewaweb — Performa tinggi, cocok untuk toko skala menengah
• Hostinger — Terjangkau untuk pemula, server global

Install WordPress

Setelah hosting aktif, install WordPress melalui cPanel → Softaculous Apps Installer. Cukup klik beberapa kali, WordPress langsung terpasang otomatis.

Atau bisa juga via SSH dengan WP-CLI:

# Download WordPress via WP-CLI
wp core download --locale=id_ID

# Buat file wp-config.php
wp config create \
  --dbname=nama_database \
  --dbuser=user_database \
  --dbpass=password_database \
  --dbhost=localhost

# Install WordPress
wp core install \
  --url="https://tokoku.com" \
  --title="Toko Ku" \
  --admin_user="admin" \
  --admin_password="password_kuat_anda" \
  --admin_email="email@tokoku.com"

Install & Konfigurasi WooCommerce

Login ke dashboard WordPress Anda (tokoku.com/wp-admin), lalu pergi ke Plugin → Tambah Baru, cari "WooCommerce", dan klik Install → Aktifkan.

Wizard setup WooCommerce akan muncul secara otomatis. Isi:

1. Informasi toko (nama, negara, mata uang Rupiah/IDR)
2. Jenis industri (Fashion, Elektronik, dll.)
3. Jenis produk (Fisik, Digital, atau Keduanya)
4. Detail bisnis (perkiraan produk, apakah sudah berjualan)

# Install dan aktifkan WooCommerce
wp plugin install woocommerce --activate

# Install plugin SEO (opsional tapi sangat disarankan)
wp plugin install wordpress-seo --activate

# Install plugin keamanan
wp plugin install wordfence --activate

# Cek status plugin
wp plugin list

Pilih & Kustomisasi Tema

Tema menentukan tampilan toko Anda. Pilih tema yang responsif (tampil bagus di HP), cepat, dan kompatibel dengan WooCommerce.

Tema WooCommerce terbaik (gratis):

• Storefront — Tema resmi dari WooCommerce, ringan dan stabil
• Astra — Super cepat, banyak template siap pakai
• Kadence — Modern, builder-friendly
• OceanWP — Fleksibel untuk berbagai niche

Kustomisasi tambahan bisa dilakukan lewat CSS. Contoh styling sederhana:

/* Warna tombol beli utama */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: #c8622e;
  color: #ffffff;
  border-radius: 6px;
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: #a84f24;
}

/* Card produk dengan shadow */
.woocommerce ul.products li.product {
  border: 1px solid #e8e0d0;
  border-radius: 10px;
  padding: 16px;
  transition: box-shadow 0.2s;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

/* Harga produk */
.woocommerce span.price {
  color: #c8622e;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Badge "Sale" */
.woocommerce span.onsale {
  background: #e8963a;
  border-radius: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

Tambahkan Produk ke Toko

Buka Produk → Tambah Baru di dashboard WordPress. Isi semua informasi produk dengan lengkap untuk performa SEO yang optimal:

• Judul Produk — Deskriptif, sertakan kata kunci utama
• Deskripsi Pendek — Muncul di bawah judul, 2–3 kalimat menarik
• Deskripsi Panjang — Detail produk, manfaat, cara penggunaan
• Harga — Harga reguler dan harga diskon (opsional)
• Gambar Produk — Minimal 800×800px, format JPG/WebP, alt text deskriptif
• Kategori & Tag — Bantu navigasi dan SEO
• SKU — Kode unik untuk manajemen stok

Untuk menambah produk massal via CSV:

# Import produk dari file CSV
wp wc product import /path/to/products.csv \
  --user=1 \
  --allow-root

# Ekspor produk ke CSV
wp wc product export \
  --user=1 \
  --format=csv > produk-backup.csv

Konfigurasi Pembayaran & Pengiriman

Ini adalah bagian paling krusial — pastikan pelanggan bisa membayar dengan mudah dan pengiriman terkonfigurasi dengan benar.

💳 Metode Pembayaran

Pergi ke WooCommerce → Pengaturan → Pembayaran. Plugin payment gateway populer untuk Indonesia:

# Midtrans — Gateway terlengkap untuk Indonesia
wp plugin install midtrans-woocommerce --activate

# Xendit — Alternatif populer
wp plugin install xendit-woocommerce --activate

# DOKU — Bank lokal
wp plugin install doku-woocommerce --activate

# Transfer Bank Manual (bawaan WooCommerce, tidak perlu install)
# Aktifkan di WooCommerce → Settings → Payments → Direct Bank Transfer

🚚 Zona Pengiriman

Pergi ke WooCommerce → Pengaturan → Pengiriman, lalu tambahkan zona pengiriman:

<?php
// Tambahkan ke functions.php tema aktif
// Membuat metode pengiriman flat rate kustom

add_filter( 'woocommerce_package_rates', 'custom_shipping_rates', 10, 2 );

function custom_shipping_rates( $rates, $package ) {
    // Gratis ongkir untuk order di atas Rp 500.000
    $cart_total = WC()->cart->get_cart_contents_total();
    
    if ( $cart_total >= 500000 ) {
        foreach ( $rates as $rate_id => $rate ) {
            if ( 'flat_rate' === $rate->method_id ) {
                $rates[ $rate_id ]->cost = 0;
                $rates[ $rate_id ]->label = 'Gratis Ongkir 🎉';
            }
        }
    }
    return $rates;
}

// Tambahkan biaya COD
add_action( 'woocommerce_cart_calculate_fees', 'add_cod_fee' );

function add_cod_fee() {
    if ( WC()->session->get('chosen_payment_method') === 'cod' ) {
        WC()->cart->add_fee( 'Biaya COD', 5000 );
    }
}

Optimasi SEO & Luncurkan Toko

Sebelum meluncurkan, pastikan toko Anda teroptimasi untuk mesin pencari agar mudah ditemukan calon pembeli.

🔍 Checklist SEO WooCommerce

• Install plugin Yoast SEO atau RankMath
• Isi meta title dan meta description setiap produk
• Gunakan URL yang bersih: tokoku.com/produk/nama-produk
• Aktifkan sitemap XML otomatis dari plugin SEO
• Daftarkan ke Google Search Console
• Aktifkan Google Analytics atau GA4
• Kompres gambar dengan Smush atau ShortPixel
• Aktifkan caching dengan W3 Total Cache atau WP Rocket

<?php
// Tambahkan Open Graph tags untuk sharing di media sosial
add_action( 'wp_head', 'add_woo_open_graph' );

function add_woo_open_graph() {
    if ( is_product() ) {
        global $post;
        $product = wc_get_product( $post->ID );
        $image   = wp_get_attachment_image_src( 
            get_post_thumbnail_id( $post->ID ), 'large' 
        );
        ?>
        <meta property="og:type" content="product" />
        <meta property="og:title" content="<?php echo esc_attr( $product->get_name() ); ?>" />
        <meta property="og:description" content="<?php echo esc_attr( $product->get_short_description() ); ?>" />
        <meta property="og:image" content="<?php echo esc_url( $image[0] ); ?>" />
        <meta property="og:url" content="<?php echo esc_url( get_permalink() ); ?>" />
        <meta property="product:price:amount" content="<?php echo $product->get_price(); ?>" />
        <meta property="product:price:currency" content="IDR" />
        <?php
    }
}

// Tambahkan breadcrumb schema
add_action( 'woocommerce_before_main_content', 'add_breadcrumb_schema' );

function add_breadcrumb_schema() {
    if ( is_product() ) {
        $product = wc_get_product( get_the_ID() );
        $cats    = wc_get_product_category_list( $product->get_id() );
        // Output schema breadcrumb JSON-LD di sini
    }
}