Menambahkan Button Detail di Woocommerce Whop List

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

Share this post