Script Berguna untuk Kustomisasi WooCommerce

Dalam pengembangan dan pengelolaan toko online berbasis WooCommerce, sering kali penggunaan plugin dianggap sebagai solusi praktis untuk menambah fungsionalitas. Namun, pemakaian plugin yang berat dan memiliki banyak fitur yang tidak diperlukan sering kali menyebabkan konflik dan memperlambat performa situs.

Daripada menghadapi permasalahan tersebut, penggunaan script khusus yang disesuaikan dengan kebutuhan spesifik dapat menjadi alternatif yang lebih efisien. Script ini tidak hanya lebih ringan, tetapi juga fokus pada fungsi-fungsi yang memang dibutuhkan, sehingga meminimalisir potensi konflik dan meningkatkan kinerja situs.

Berikut ini adalah beberapa script yang bisa Anda pakai untuk mengkustomisasi WooCommerce, tanpa perlu menginstal plugin.

 

Menyembunyikan Tab Informasi Tambahan

Pada beberapa toko online, tab informasi tambahan pada halaman produk mungkin tidak selalu diperlukan atau relevan dengan semua jenis produk yang dijual. Untuk meningkatkan pengalaman pengguna dan membuat tampilan halaman produk lebih bersih dan sederhana, kita dapat menyembunyikan tab informasi tambahan tersebut.

Dengan menggunakan script khusus yang kami sediakan ini, tab ini dapat dihapus tanpa mempengaruhi fungsi utama WooCommerce. Penghapusan tab ini tidak hanya membuat tampilan lebih minimalis, tetapi juga dapat meningkatkan kecepatan pemuatan halaman, yang pada akhirnya akan memberikan pengalaman berbelanja yang lebih baik bagi pelanggan.

Script ini memastikan bahwa hanya informasi yang benar-benar penting yang ditampilkan kepada pengguna, sesuai dengan prinsip kustomisasi yang efisien.

Script (CSS)

/* Menyembunyikan tab "Informasi Tambahan" */
#tab-title-additional_information {
    display: none !important;
}

Hasil Tampilan:

 

Script Menambahkan Tab Baru: FAQ dan Diskon

Dalam upaya memberikan informasi yang lebih lengkap dan bermanfaat kepada pelanggan, penambahan tab baru seperti FAQ (Frequently Asked Questions) dan Diskon pada halaman produk dapat menjadi solusi yang efektif. Tab FAQ memungkinkan pelanggan untuk mendapatkan jawaban atas pertanyaan umum secara langsung tanpa harus menghubungi layanan pelanggan, sementara tab Diskon dapat menampilkan promosi dan penawaran khusus yang sedang berlangsung.

Untuk implementasi terbaik, script ini dapat diisi dengan shortcode dari plugin Ocean Extra (plugin OceanWP). Dengan menggunakan shortcode ini, Anda dapat menampilkan halaman custom yang telah dibuat sebelumnya dengan mudah. Tab baru ini tidak hanya memperkaya konten pada halaman produk, tetapi juga membantu meningkatkan keterlibatan pelanggan dan mendorong konversi dengan memberikan informasi penting secara langsung. Dengan kustomisasi ini, toko online Anda dapat menawarkan pengalaman berbelanja yang lebih informatif dan menarik bagi pelanggan.

Script (PHP)

function custom_product_tabs( $tabs ) {
    // Tambahkan tab Diskon
    $tabs['diskon_tab'] = array(
        'title'    => __( 'Diskon', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'diskon_tab_content'
    );
    
    // Tambahkan tab FAQ
    $tabs['faq_tab'] = array(
        'title'    => __( 'FAQ', 'woocommerce' ),
        'priority' => 60,
        'callback' => 'faq_tab_content'
    );

    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );

function diskon_tab_content() {
    // Konten untuk tab Diskon
    echo do_shortcode('');
}

function faq_tab_content() {
    // Konten untuk tab FAQ
    echo do_shortcode('[faq]');
}

Hasil Tampilan:

 

Script Mengubah Ukuran Font Harga Varian

Dalam pengaturan default WooCommerce, ukuran font untuk harga varian produk sering kali lebih kecil dibandingkan dengan harga utama. Hal ini dapat menyulitkan pelanggan untuk melihat perbedaan harga antara varian produk yang berbeda. Untuk meningkatkan keterbacaan dan memastikan pelanggan dapat dengan mudah membandingkan harga varian, kita dapat menggunakan script khusus untuk mengubah ukuran font harga varian tersebut.

Dengan menggunakan script ini, Anda dapat menentukan ukuran font yang sesuai dengan desain keseluruhan toko online Anda, sehingga harga varian menjadi lebih menonjol dan mudah dilihat oleh pelanggan. Perubahan ini akan meningkatkan pengalaman pengguna dengan membuat informasi harga lebih jelas dan langsung terlihat. Penyesuaian ini akan memastikan bahwa pelanggan tidak melewatkan informasi penting mengenai harga, yang pada akhirnya dapat meningkatkan konversi penjualan.

Script (CSS)

/* CSS untuk mengatur ukuran font harga varian WooCommerce menjadi 26px */
.woocommerce-variation.single_variation .woocommerce-variation-price .price .woocommerce-Price-amount {
    font-size: 26px;
}

Hasil Tampilan:

 

Script 3 Kode Acak pada Checkout

Untuk memudahkan pengecekan pembayaran, menambahkan tiga kode acak pada halaman checkout dapat menjadi solusi yang efektif. Kode acak ini dapat digunakan sebagai referensi unik untuk setiap transaksi, mempermudah verifikasi dan pelacakan pembayaran. Dengan memiliki kode acak yang unik, pelanggan dan pihak pengelola toko dapat dengan mudah memastikan bahwa pembayaran telah diproses dengan benar.

Penggunaan script ini memungkinkan Anda untuk menghasilkan dan menampilkan kode acak secara otomatis pada halaman checkout. Setiap kali pelanggan melakukan pembelian, tiga kode acak yang berbeda akan dihasilkan dan disertakan dalam informasi transaksi. Ini tidak hanya meningkatkan keamanan, tetapi juga mempercepat proses verifikasi pembayaran.

Dengan demikian, penerapan script ini akan membantu meningkatkan efisiensi operasional toko online Anda, memastikan bahwa setiap transaksi dapat diidentifikasi dan diverifikasi dengan mudah.

Script (PHP)

// Add a random three-digit code to the cart total during checkout
function add_random_code_to_cart_total($cart) {
    if (is_admin() && !defined('DOING_AJAX')) {
        return;
    }

    if (is_checkout()) {
        // Check if the random code is already set in the session
        if (!isset(WC()->session->random_code)) {
            // Generate a random three-digit code
            WC()->session->random_code = rand(100, 999);
        }

        // Add the random code to the cart total as a fee
        $random_code = WC()->session->random_code;
        $cart->add_fee(__('Kode acak', 'woocommerce'), $random_code);
    }
}
add_action('woocommerce_cart_calculate_fees', 'add_random_code_to_cart_total');

// Save the original total and the random code in the order meta
function save_random_code_to_order_meta($order_id) {
    $order = wc_get_order($order_id);
    
    // Ensure the order is valid
    if (!$order) {
        return;
    }
    
    $cart_total = $order->get_total();
    $random_code = WC()->session->random_code;
    
    if (!$random_code) {
        return;
    }

    $original_total = $cart_total - $random_code;

    $order->update_meta_data('_original_total', $original_total);
    $order->update_meta_data('_random_code', $random_code);
    $order->save();

    // Clear the random code from the session
    WC()->session->__unset('random_code');
}
add_action('woocommerce_checkout_create_order', 'save_random_code_to_order_meta');

// Display the original total and the random code on the order edit page
function display_order_meta($order) {
    $original_total = $order->get_meta('_original_total');
    $random_code = $order->get_meta('_random_code');

    if ($original_total && $random_code) {
        echo '<p><strong>' . __('Original Total', 'woocommerce') . ':</strong> ' . wc_price($original_total) . '</p>';
        echo '<p><strong>' . __('Random Code', 'woocommerce') . ':</strong> ' . $random_code . '</p>';
    }
}
add_action('woocommerce_admin_order_data_after_order_details', 'display_order_meta');

Tampilan

Informasi Tambahan:

Kode acak ini akan muncul di halaman checkout dan halaman terima kasih (thank you page), memberikan referensi yang konsisten dan mudah diakses oleh pelanggan. Penting untuk dicatat bahwa kode ini tidak akan muncul di halaman keranjang (cart), memastikan bahwa kode hanya ditampilkan pada tahap akhir proses pembelian. Selain itu, jika halaman checkout atau halaman terima kasih di-refresh, kode acak yang ditampilkan tidak akan berubah. Hal ini memastikan bahwa kode acak tetap konsisten dan unik untuk setiap transaksi, meningkatkan keakuratan dan efisiensi dalam pengecekan pembayaran.

 

Script Harga Produk Terendah

Dalam pengaturan default WooCommerce, harga yang ditampilkan pada produk varian sering kali adalah harga tertinggi dari varian tersebut. Hal ini dapat menyebabkan calon pembeli merasa ragu untuk melanjutkan proses pembayaran karena mereka melihat harga yang paling mahal. Untuk mengatasi masalah ini, kita dapat menggunakan script khusus yang menampilkan harga produk terendah dari varian yang tersedia.

Dengan menggunakan script ini, hanya harga terendah dari varian produk yang akan ditampilkan pada halaman produk. Ini membantu memberikan gambaran yang lebih menarik bagi pelanggan dan mengurangi kekhawatiran mereka terhadap harga. Script ini secara otomatis mendeteksi harga terendah dari semua varian produk dan menampilkannya sebagai harga utama.

Implementasi script ini memastikan bahwa calon pembeli melihat harga yang paling kompetitif, yang dapat meningkatkan kemungkinan mereka untuk melanjutkan pembelian. Dengan demikian, penggunaan script ini tidak hanya membantu meningkatkan konversi, tetapi juga memberikan pengalaman berbelanja yang lebih positif bagi pelanggan.

Script (PHP)

// Function to modify the variable product price display
function custom_variable_price_format( $price, $product ) {
    if ( !is_admin() && $product->is_type('variable') ) {
        // Get all variation prices
        $prices = $product->get_variation_prices( true );
        // Get the minimum price
        $min_price = current( $prices['price'] );
        // Format the price to "Harga terendah: [harga terendah]"
        $price = sprintf( 'Harga terendah %s', wc_price( $min_price ) );
    }
    return $price;
}
add_filter( 'woocommerce_variable_price_html', 'custom_variable_price_format', 10, 2 );

// Optional: Remove price range for variable products
function custom_remove_variation_price_range( $price, $product ) {
    if ( !is_admin() && $product->is_type( 'variable' ) ) {
        $prices = $product->get_variation_prices( true );
        $min_price = current( $prices['price'] );
        $price = sprintf( 'Harga terendah %s', wc_price( $min_price ) );
    }
    return $price;
}
add_filter( 'woocommerce_variable_sale_price_html', 'custom_remove_variation_price_range', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'custom_remove_variation_price_range', 10, 2 );

Tampilan

 

Script Menyembunyikan Kolom Halaman Checkout

Saat menjual jasa atau produk virtual, beberapa kolom pada halaman checkout mungkin tidak relevan dan hanya menambah kebingungan bagi pelanggan. Untuk memberikan pengalaman checkout yang lebih sederhana dan efisien, kita dapat menggunakan script untuk menyembunyikan kolom-kolom yang tidak berguna seperti alamat pengiriman, kota, kode pos, dan lainnya.

Dengan menggunakan script ini, Anda dapat memastikan bahwa hanya informasi yang diperlukan untuk transaksi jasa atau produk virtual yang ditampilkan pada halaman checkout. Ini tidak hanya mempercepat proses checkout, tetapi juga meningkatkan kepuasan pelanggan dengan mengurangi langkah-langkah yang tidak diperlukan.

Script ini memungkinkan Anda untuk menyesuaikan halaman checkout dengan kebutuhan spesifik bisnis Anda, menyederhanakan proses bagi pelanggan yang membeli jasa atau produk digital. Dengan menghilangkan kolom-kolom yang tidak relevan, Anda dapat menciptakan pengalaman yang lebih fokus dan langsung, yang pada akhirnya dapat meningkatkan konversi dan kepuasan pelanggan.

Script (PHP)

// Tambahkan kode berikut ke file functions.php pada tema WordPress Anda atau menggunakan plugin Code Snippets.

// Membuat kolom menjadi tidak wajib diisi
add_filter( 'woocommerce_billing_fields', 'custom_override_billing_fields' );
function custom_override_billing_fields( $fields ) {
    $fields['billing_last_name']['required'] = false;
    $fields['billing_country']['required'] = false;
    $fields['billing_address_1']['required'] = false;
    $fields['billing_address_2']['required'] = false;
    $fields['billing_city']['required'] = false;
    $fields['billing_state']['required'] = false;
    $fields['billing_postcode']['required'] = false;
    return $fields;
}

// Membuat kolom pengiriman tidak wajib diisi
add_filter( 'woocommerce_shipping_fields', 'custom_override_shipping_fields' );
function custom_override_shipping_fields( $fields ) {
    $fields['shipping_country']['required'] = false;
    $fields['shipping_address_1']['required'] = false;
    $fields['shipping_address_2']['required'] = false;
    $fields['shipping_city']['required'] = false;
    $fields['shipping_state']['required'] = false;
    $fields['shipping_postcode']['required'] = false;
    return $fields;
}

// Menyembunyikan kolom dengan CSS
add_action( 'wp_enqueue_scripts', 'custom_hide_checkout_fields' );
function custom_hide_checkout_fields() {
    if( is_checkout() ) {
        ?>
        <style>
            #billing_last_name_field,
            #billing_country_field,
            #billing_address_1_field,
            #billing_address_2_field,
            #billing_city_field,
            #billing_state_field,
            #billing_postcode_field,
            #shipping_country_field,
            #shipping_address_1_field,
            #shipping_address_2_field,
            #shipping_city_field,
            #shipping_state_field,
            #shipping_postcode_field {
                display: none !important;
            }
        </style>
        <?php
    }
}

Tampilan

Informasi Tambahan:

Untuk mengimplementasikan script ini, kami sarankan untuk mengubah pengaturan di WooCommerce. Pada bagian pengaturan WooCommerce mengenai tujuan pengiriman, pilih opsi “Paksa pengiriman ke alamat penagihan pelanggan”. Dengan memilih opsi ini, WooCommerce akan menggunakan alamat penagihan pelanggan untuk pengiriman, meskipun tidak diperlukan untuk produk virtual. Opsi ini membantu menyederhanakan halaman checkout dengan mengurangi jumlah kolom yang harus diisi oleh pelanggan.

Berikut adalah langkah-langkah untuk menemukan dan mengatur opsi ini:

1. Masuk ke dasbor WordPress Anda.
2. Navigasikan ke WooCommerce > Pengaturan.
3. Klik pada tab Pengiriman.
4. Di bagian Tujuan pengiriman, pilih opsi Paksa pengiriman ke alamat penagihan pelanggan.

Dengan mengikuti langkah-langkah ini, Anda dapat memastikan bahwa halaman checkout lebih relevan untuk transaksi jasa atau produk virtual, meningkatkan efisiensi dan pengalaman pengguna. Meskipun opsi lain mungkin juga berfungsi, kami belum pernah mencobanya sehingga tidak dapat memberikan jaminan yang sama untuk hasilnya.

Script Direct Checkout

Untuk meningkatkan pengalaman belanja pelanggan dan mempercepat proses pembelian, Anda dapat mengatur agar ketika pelanggan mengeklik tombol beli atau semacamnya, mereka akan langsung diarahkan ke halaman keranjang. Fitur direct checkout ini membantu mengurangi langkah-langkah yang tidak perlu dalam proses belanja, membuat pengalaman belanja lebih lancar dan efisien.

Dengan menggunakan script ini, setiap kali pelanggan menambahkan produk ke keranjang, mereka akan langsung dibawa ke halaman keranjang untuk meninjau pembelian mereka sebelum melanjutkan ke proses pembayaran. Hal ini sangat berguna untuk toko online yang ingin meningkatkan konversi dengan menyederhanakan proses belanja.

Script (PHP):

function redirect_to_cart_after_add_to_cart( $url ) {
    $url = wc_get_cart_url();
    return $url;
}

add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_cart_after_add_to_cart' );

Catatan:

Alternatif lain untuk bisa membuat tombol beli di WooCommerce bisa langsung mengarah ke halaman keranjang, adalah dengan melakukan konfigurasi setting di WooCommerce itu sendiri. Berikut adalah caranya:

• Masuk ke dasbor WordPress Anda.
• Navigasikan ke WooCommerce > Pengaturan.
• Klik pada tab Produk.
• Di bagian Tindakan Tambahkan ke Keranjang, centang opsi Alihkan ke halaman keranjang setelah berhasil menambahkan.

Dengan mengimplementasikan script direct checkout, Anda dapat memastikan bahwa pelanggan segera melihat isi keranjang mereka setelah menambahkan produk, mengurangi kebingungan dan potensi gangguan selama proses belanja. Hal ini dapat meningkatkan konversi dan memberikan pengalaman belanja yang lebih mulus dan efisien.

 

Tips Khusus Mengubah Bahasa di WooCommerce

Mengubah bahasa di WooCommerce, termasuk mengganti teks pada tombol beli, field di halaman checkout, dan elemen lainnya, dapat dilakukan dengan mudah menggunakan plugin Loco Translate. Plugin ini memungkinkan Anda untuk mengedit file terjemahan langsung dari dasbor WordPress, memberikan fleksibilitas untuk menyesuaikan teks sesuai kebutuhan Anda.

Berikut adalah langkah-langkah dan tips untuk menggunakan Loco Translate:

1. Instalasi Loco Translate:
   • Masuk ke dasbor WordPress Anda.
   • Navigasikan ke Plugin > Tambah Baru.
   • Cari Loco Translate, kemudian instal dan aktifkan plugin tersebut.
2. Mengubah Teks WooCommerce:
   • Setelah plugin diaktifkan, navigasikan ke Loco Translate > Plugins.
   • Cari dan pilih WooCommerce dari daftar plugin yang tersedia.
   • Pilih bahasa yang ingin Anda ubah atau tambahkan jika belum ada.
   • Klik pada Edit untuk mulai mengubah teks.
3. Menyesuaikan Teks:
   • Di dalam editor terjemahan, Anda akan melihat daftar semua string teks yang digunakan oleh WooCommerce.
   • Gunakan kotak pencarian untuk menemukan teks tertentu yang ingin Anda ubah, seperti tombol “Beli” atau field di halaman checkout.
   • Klik pada string yang ingin diubah, kemudian masukkan teks yang diinginkan di kotak terjemahan.
4. Menyimpan Perubahan:
   • Setelah melakukan perubahan, pastikan untuk menyimpan terjemahan Anda dengan mengklik tombol Simpan.

Contoh Perubahan Teks:

• Tombol “Beli”:
  • Cari string “Add to cart” dan ubah terjemahannya sesuai dengan preferensi Anda, misalnya menjadi “Beli Sekarang”.
• Field di Halaman Checkout:
  • Ubah label field seperti “Billing Address” menjadi “Alamat Penagihan”, atau sesuaikan dengan istilah yang lebih relevan untuk bisnis Anda.

Keuntungan Menggunakan Loco Translate:

• User-Friendly: Antarmuka yang mudah digunakan membuat proses terjemahan cepat dan intuitif.
• Fleksibilitas: Anda dapat mengubah hampir semua teks yang digunakan oleh WooCommerce dan plugin lainnya.
• Keberlanjutan: Perubahan yang Anda buat akan tetap ada meskipun ada pembaruan pada WooCommerce atau tema Anda, karena terjemahan disimpan dalam file terpisah.

Dengan menggunakan Loco Translate, Anda dapat dengan mudah menyesuaikan teks di toko online Anda, memberikan pengalaman berbelanja yang lebih baik dan lebih sesuai dengan kebutuhan pelanggan Anda.