Cara Menambahkan Tombol Tambahkan ke Keranjang Khusus Di WooCommerce
Diterbitkan: 2021-04-22
Apakah Anda mencari cara untuk menambahkan tombol tambahkan ke troli khusus di halaman mana pun? Tombol Tambahkan ke Keranjang sangat penting di toko online mana pun. Ketika pelanggan mengklik tombol ini, produk ditambahkan ke keranjang.
Ini secara langsung mengarah pada penjualan dan pendapatan.
Oleh karena itu, jika Anda ingin membuat halaman yang akan menyertakan produk untuk dijual, penting untuk menambahkan tombol Tambahkan ke Keranjang khusus.
Penting untuk dicatat bahwa WooCommerce memberi Anda banyak opsi penyesuaian yang tersedia di berbagai level, seperti WordPress.
Cara Menambahkan Tombol Tambahkan ke Keranjang Khusus Di WooCommerce
Dalam posting ini, kami akan menyesuaikan tombol Tambahkan ke Keranjang dan menambahkannya ke halaman template mana pun. Perlu disebutkan bahwa Anda memerlukan beberapa keterampilan pengkodean sebelum melanjutkan.
Namun, jika Anda tidak nyaman dengan penanganan kode, baca terus karena kami telah mencoba yang terbaik untuk menjelaskan setiap langkah.
Mari kita lihat bagaimana Anda dapat mencapai ini:
Langkah-langkah untuk Menambahkan Tombol Tambahkan ke Keranjang Khusus di WooCommerce
Sebelum kita mulai, berikut adalah cuplikan kode yang akan menambahkan tombol ke halaman template mana pun.
<?php
/* Template Name: Customize Add To Cart*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<ul class="products">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 12,
);
$loop = new WP_Query( $args );
if ($loop->have_posts()) {
while ($loop->have_posts()) : $loop->the_post();
?>
<div id="product-image1">
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<?php echo $product->get_image(); ?>
</a>
</div>
<div id="product-description-container">
<ul>
<a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>"
title="<?php echo esc_attr( $product->get_title() ); ?>">
<li><h4><?php echo $product->get_title(); ?></h4></li>
</a>
<li><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt )?></li>
<li><h2><?php echo $product->get_price_html(); ?> </h2></li>
<?php
echo apply_filters(
'woocommerce_loop_add_to_cart_link',
sprintf(
'<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="button %s product_type_%s">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->product_type ),
esc_html( $product->add_to_cart_text() )
),
$product
);?>
</ul>
</div> <?php endwhile;
} else {
echo __( ' o products found' );
}
wp_reset_postdata();
?>
</ul>
<!--/.products--> </main>
<!-- #main -->
</div><!-- #primary --> <?php
do_action( 'storefront_sidebar' );
get_footer();
Bagaimana itu bekerja
Kode ini sangat mudah dipahami.
'post_type' => 'product' adalah jenis posting kustom WooCommerce default.
- 'posts_per_page' => 12 mengatur jumlah maksimum posting yang dapat ditampilkan pada sebuah halaman.
- apply_filters( 'woocommerce_short_description', $post->post_excerpt ) menampilkan URL halaman keranjang dan item dalam keranjang
- esc_attr( $product->get_id() ) mendapatkan ID produk
- esc_attr( $product->get_sku() ) mendapatkan SKU untuk produk
Berikut adalah langkah-langkah yang perlu Anda ikuti:
- Masuk ke situs WordPress Anda dan akses Dasbor sebagai pengguna admin.
- Dari menu Dashboard, klik pada Appearance Menu > Theme Editor Menu . Saat halaman Theme Editor terbuka, cari file theme functions dimana kita akan menambahkan fungsi yang akan menambahkan tombol custom add to cart.
- Tambahkan kode berikut ke file php :
add_filter('woocommerce_product_single_add_to_cart_text','njengah_add_to_cart_button_woocommerce');
function njengah_add_to_cart_button_woocommerce() {
return __('Custom add to cart button code', 'woocommerce');
}
- Ini adalah hasilnya:
Kesimpulan
Sekarang, Anda seharusnya sudah bisa menambahkan tombol custom add to cart. Tombol kustom penting karena menambah nilai pada pengalaman pengguna.
Karena kami mengedit halaman menggunakan kode khusus, kami sarankan untuk membuat tema anak. Ini akan memastikan bahwa perubahan Anda tidak hilang selama pembaruan.
Artikel Serupa
- 100+ Tips, Trik & Cuplikan Panduan Sembunyikan WooCommerce Ultimate
- Pengalihan WooCommerce Setelah Keluar [Panduan Utama]
- Pengalihan WooCommerce Setelah Checkout : Pengalihan ke Halaman Terima Kasih Kustom
- Cara Menambahkan Pencarian ke Halaman Toko Di WooCommerce
- Cara Menyembunyikan Gambar Produk di Halaman Keranjang WooCommerce
- Cara Mengirim Email tentang Perubahan Status Di WooCommerce
- Cara Menambahkan Kolom di Formulir Pendaftaran WooCommerce
- Cara Menyembunyikan Toko Di WooCommerce
- Cara Mendapatkan Nama Kategori Produk Saat Ini di WooCommerce
- Top 30+ Plugin Formulir WordPress Terbaik » Plugin Formulir WordPress Terbaik
- Cara Mengubah Titik Akhir Checkout WooCommerce
- Bagaimana Menjaga Tab Deskripsi WooCommerce Terbuka Secara Default
- Cara Membuat Halaman Kategori Kustom Di WooCommerce
- Cara Menghapus Keranjang saat Logout Di WooCommerce
- Cara Menyesuaikan Halaman Produk WooCommerce
- Cara Menambahkan Mata Uang ke WooCommerce [Mata Uang Kustom]
- Cara Memeriksa apakah Pengguna Sudah Masuk di WordPress
- Cara Membuat Halaman Penerimaan Pesanan Khusus WooCommerce
- Cara Menambahkan Produk ke Keranjang Secara Terprogram di WooCommerce
- 5+ Cara Berguna untuk Membatasi Panjang Kutipan WordPress Seperti Pro