Halo juragan koding, salam super...
pada kesempatan kali ini kami akan menjelaskan cara untuk
menambahkan button detail di woocommerce shop list dengan sederhana tanpa ribet
ketika kita ingin menambahkan button / tombol detail product di shop list nya woocommerce.
secara default maka tombol di bawah loop product woocommerce shop adalah hanya add to cart
untuk menambahkan button detail adalah dengan menambahkan kode untuk tombol nya yang terletak di file theme-name/woocommerce/loop/add-to-cart.php
jika file itu belum ada silakan di tambahkan / copy file nya dari wp-content/plugins/woocommerce/templates/loop/add-to-cart.php
secara default maka kode yang ada di dalam file add-to-cart.php adalah seperti di bawah ini
<?php
/**
* Loop Add to Cart
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/add-to-cart.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s"><i class="fa fa-shopping-cart" aria-hidden="true"></i>%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
sekarang mari kita rubah file add-to-cart.php yang ada di theme-name/woocommerce/loop/add-to-cart.php
menjadi seperti kode di bawah ini
<?php
/**
* Loop Add to Cart
*
* This template can be overridden by copying it to yourtheme/woocommerce/loop/add-to-cart.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s"><i class="fa fa-shopping-cart" aria-hidden="true"></i>%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button' ),
esc_html( $product->add_to_cart_text() )
),
$product );
echo '<a class="poc-btn" href="' . get_permalink($product->id) . '">Detail</a>';
perhatikan kode yang berwarna merah
kode tersebut kita tambahkan untuk menampilkan tombol bottom di loop product wocommerce
get_permalink($product->id)
kode di atas berfungsi untuk mendapatkan link ke detail
hasil nya seperti di bawah ini :
barangkali cukup sekian penjelasan mengenai bagaimana cara menambahkan button detail di woocommerce shop list dengan sederhana, apabila
ada yang perlu didiskusikan tinggalkan koment anda pada kolom komentar
atau hubungi saya langsung lewat
Contact Us
selamat mencoba semoga sukses