Mengganti Tombol Add To Cart WooCommerce

TokoDaring.Com – Mengganti Tombol Add To Cart WooCommerce. Artikel tutorial bagaimana cara mengganti tombol atau text Add To Cart di halaman produk dan katalog WooCommerce.

Kustom tombol add to cart WooCommerce

Tombol ‘Add To Cart’ mungkin adalah sebuah tombol keramat, tombol yang selalu ada di setiap website eCommerce atau marketplace manapun.

Dan ketika kita membangun toko online menggunakan WordPress dan WooCommerce.

Maka secara default teks pada tombol untuk orang melakukan pembelian adalah ‘Add To Cart’. Atau dalam setting bahasa indonesia berbunyi ‘Tambahkan ke Keranjang’.

Lalu, anda mungkin mengkategorikan bisnis anda dalam kategori bisnis lokal, dimana anda tidak ingin menggunakan teks bahasa inggris untuk tombol tersebut.

Dan tidak ingin juga kata tambahkan ke keranjang karena terlalu panjang.

Atau anda memiliki beberapa produk yang anda jual, beberapa di antaranya adalah produk yang selalu ready stock dan ingin agar tombol tersebut berbunyi ‘Beli’.

Sebagian produk anda lainnya adalah produk yang perlu untuk di order terlebih dahulu dan ingin teks pada tombol itu berbunyi ‘Pesan’ atau ‘Buat PO’.

Merubah teks semacam itu, tentu sangat mudah sekali untuk di lakukan. Untuk sekedar mengganti tombol add to cart WooCommerce ke satu kata lainnya.

Ada plugin yang bisa anda gunakan, atau dengan memberikan fungsi tambahan ke dalam file fungsi anda.

Mengganti tombol Add To Cart WooCommerce menggunakan plugin

Cara pertama untuk mengganti tombol Add To Cart WooCommerce adalah dengan menggunakan plugin.

Plugin-plugin berikut mungkin bisa membantu anda secara instan merubah teks tombol tersebut.

• Add to Cart Button Custom Text.
• Custom Add to Cart Button Label and Link.

Setelah plugin tersebut di install di WordPress anda, maka akan terdapat setting tambahan add-to-cart button label di halaman dashboard. Anda bisa mengganti text tersebut ke text apapun yang di inginkan.

Mengganti tombol Add To Cart WooCommerce tanpa plugin

Anda mungkin tidak ingin menggunakan plugin hanya untuk sekedar menyelesaikan tugas ringan tersebut.

Atau anda memiliki banyak jenis produk dan beberapa ingin menggunakan teks yang berbeda-beda.

Cara berikut akan membantu anda untuk mengkustom teks pada tombol tersebut. Yakni dengan memasukan script fungsi tambahan ke dalam file function.php atau ke dalam file plugin editor.

Pada contoh kode berikut kami menggunakan kata “Buat Order” untuk menggantikan kata “Add To Cart”.

 /* Mengganti tombol add to cart woocommerce
  * ke kata lainnya yang dikehendaki
  */

// text 'order' single
add_filter('woocommerce_product_single_add_to_cart_text', 'tdr_single_order_text'); 
function fp62_single_order_text() {
    return __('Buat Order', 'woocommerce'); 
}
// text 'order' archive
add_filter('woocommerce_product_add_to_cart_text', 'tdr_archive_order_text');  
function fp62_archive_order_text() {
    return __('Buat Order', 'woocommerce');
}

Menuliskan skrip / kode fungsi tambahan

Menuliskan kode tambahan tersebut ke dalam file function.php akan beresiko bahwa kode tambahan tersebut akan hilang jika terdapat update tema website.

Kami menyarankan cara lainnya yang lebih aman untuk menjaga setiap kode kustom yang sudah ditambahkan ke dalam plugin editor.

Tentang plugin editor, kami pernah membahasnya pada artikel ini, cara edit website WordPress menggunakan plugin editor.

Selanjutnya terserah mau pilih yang mana. Untuk sekedar mengkustomisasi hal yang ringan tersebut, apakah mau menggunakan plugin atau dengan menambahkan beberapa baris kode yang juga “ringan” ?

Mengganti tombol Add To Cart WooCommerce secara kustom

Skenario lainnya adalah ada beberapa produk yang berbeda pada website toko daring anda. Aan anda ingin menggunakan beberapa teks yang juga berbeda di masing-masing produknya.

Misalnya ada produk yang ingin di label ‘Beli’, ‘Buat PO’, ‘Hubungi kami’ dan ‘Beli di Marketplace’.

Setiap produk WooCommerce anda tentu memiliki SKU, TAG, kategori, ID dan $product variable lainnya. Dan kita bisa memanfaatkan variable tersebut lalu memasangkannya dengan teks yang di inginkan.

Mengganti tombol Add To Cart WooCommerce berdasarkan produk ID

Berikut adalah contoh kode snippet jika anda ingin menggunakan ID produk.

/* Ganti kata "add-to-cart
 * by ID produk 
 */

add_filter('woocommerce_product_add_to_cart_text','tdr_archive_order_text', 20, 2); 
function tdr_archive_order_text($button_text, $product) {
    $prod_po_ids = array(5975, 5971);
    $prod_beli_ids = array(5972, 5969);

    if(in_array($product->get_id(), $prod_po_ids)) {
        $button_text = __('Buat PO', 'woocommerce');
        
    } elseif(in_array($product->get_id(), $prod_beli_ids)) {
        $button_text = __('Beli', 'woocommerce');
        
    } else {
        $button_text = __('Pesan', 'woocommerce');
    }
    return $button_text;
}

Mengganti tombol Add To Cart WooCommerce berdasarkan produk SKU atau taksonomi produk

Jika mengganti tombol Add To Cart WooCommerce bisa di kustom berdasarkan produk ID.

Maka sudah pasti hal itu juga bisa di lakukan berdasarkan SKU, taksonomi, variasi produk dan atribut bahkan general info produk.

Pastikan anda memfilternya di dua hook yang tepat, yaitu.

• woocommerce_product_single_add_to_cart_text.
• woocommerce_product_add_to_cart_text.

// Get Product ID
$product->get_id();

// Get Product SKU
$product->get_sku();

  // Get Product General Info
$product->get_type();
$product->get_name();
$product->get_slug();
$product->get_date_created();
$product->get_date_modified();
$product->get_status();
$product->get_featured();
$product->get_catalog_visibility();
$product->get_description();
$product->get_short_description();
$product->get_menu_order();
$product->get_virtual();
get_permalink( $product->get_id() );
  
// Get Product Variations and Attributes
$product->get_children(); // get variations
$product->get_attributes();
$product->get_default_attributes();
$product->get_attribute( 'attributeid' ); //get specific attribute value
  
// Get Product Taxonomies
$product->get_categories();
$product->get_category_ids();
$product->get_tag_ids();

Kesimpulan, Mengganti Tombol Add To Cart WooCommerce

Nah, cukup mudah bukan, bagaimana mengkustom website eCommerce WordPress anda untuk hanya sekedar mengganti tombol add to cart WooCommerce menjadi teks apapun yang di inginkan.

Lihat tutorial lainnya tentang bagaimana mengkustom website toko online WooCommerce tanpa menggunakan plugin.

Banyak pekerjaan kustom yang kami lakukan dengan menambahkan fungsi ke dalam WooCommerce. Kami mendokumentasikannya di kategori artikel coding for fun.

Artikel terkait :