Hiển thị thêm nút Demo – Mua hàng Tiki, Shopee…

Cách 1. Cài plugin ACF vào nhé.

Vào ACF tạo 3 field text

  • san_shopee
  • san_lazada
  • san_tiki
function btn_mua_hang(){
    if(get_field('san_lazada')){;?>
        <a href="<?php echo get_field('san_lazada');?>" class="btn-san lazada-san">
            <img decoding="async" width="30" src="/wp-content/uploads/2021/10/lazada.png">
            <span>Mua hàng tại Lazada</span>
        </a>
    <?php }
    if(get_field('san_shopee')){;?>
        <a href="<?php echo get_field('san_shopee');?>" class="btn-san shop-san">
            <img decoding="async" width="30" src="/wp-content/uploads/2021/10/6db931827443a7455a4b805fe5829820.png">
            <span>Mua hàng tại Shopee</span>
        </a>
    <?php }
    if(get_field('san_tiki')){;?>
        <a href="<?php echo get_field('san_tiki');?>" class="btn-san tiki-san">
            <img decoding="async" width="30" src="/wp-content/uploads/2021/10/tiki.png">
            <span>Mua hàng tại Tiki</span>
        </a>
    <?php }
}
add_action('woocommerce_after_add_to_cart_button','btn_mua_hang',0);

CSS button:

.btn-san {
    background: red;
    padding: 10px;
    width: 100%;
    display: block;
    text-align: center;
    color: #fff;
    border-radius: 7px;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}
.btn-san.lazada-san {
    background: #10156e;
}
.btn-san.shop-san {
    background: #fd5e32;
}
.btn-san.tiki-san {
    background: #1a94ff;
}

Hoặc thêm nút demo thì tạo field zz_demo và chèn code này vào function

/****** Thêm nút bổ sung Demo **********/
add_action( 'woocommerce_after_add_to_cart_button', 'demo_button_on_product_page', 30 );

function demo_button_on_product_page() {
  global $product;
    $link = get_field('zz_demo');
    if( $link ): ?>
    <style>
        .demo_button {
            background-color: #e0520a;
            border: none;
            color: white;
            padding: 5px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
        }
         .demo_button:hover {
            background-color: #47b305;
            color: white;
        }

    </style>
    <a class="demo_button" href="<?php echo esc_url( $link ); ?>" target="_blank">Demo</a>
    <?php endif;
}

Cách 2 – Tạo button liên kết ngoài sử dụng custom field của woocommerce

Đầu tiên chúng ta sẽ tạo field trong admin.

function fields_muahang() {
    global $woocommerce, $post;
    echo '<div class="options_group">';
    woocommerce_wp_text_input(
        array(
            'id'          => '_lazada',
            'label'       => __( 'Lazada', 'woocommerce' )
        )
    );
    woocommerce_wp_text_input(
        array(
            'id'          => '_shopee',
            'label'       => __( 'Shopee', 'woocommerce' )
        )
    );
    woocommerce_wp_text_input(
        array(
            'id'          => '_tiki',
            'label'       => __( 'Tiki', 'woocommerce' )
        )
    );
    echo '</div>';
}
add_action( 'woocommerce_product_options_pricing', 'fields_muahang' );

Và function lưu giá trị field

function save_field_muahang( $post_id ){
    update_post_meta( $post_id, '_lazada', esc_attr( $_POST['_lazada'] ) );
    update_post_meta( $post_id, '_shopee', esc_attr( $_POST['_shopee'] ) );
    update_post_meta( $post_id, '_tiki', esc_attr( $_POST['_tiki'] ) );
}
add_action( 'woocommerce_process_product_meta', 'save_field_muahang' );

Nhớ chép CSS trên vào nhé. Các field hiển thị ở phần này.

Cách 3: Thêm một nút đơn giản mà ko cần plugin ACF  (Update)

Thêm mã bên dưới vào tệp function.php của chủ đề của bạn.

dd_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  global $product;
  echo '<a href="URL">Extra Button</a>';
}

Leave a Reply