Cách tùy biến nút add to cart trong woocommerce

02/01/2016 06:04 8227

Trong quá trình custom woocommerce bạn muốn custom cách hiển thị các thông tin của sản phẩm mặc định, trong đó có nút add to cart
Hôm nay tôi sẽ chia sẽ với anh chị như thế nào để chúng ta có thể làm điều này

add class woocommerce vào body: điều này để khi người dùng click vào add to cart sẽ hiện lên icon quay tròn để chỉ lên việc sản phẩn đang được add vào

<?php
add_filter( 'body_class', 'tung_class_names' );
function tung_class_names( $classes ) {
	// add 'class-name' to the $classes array
	$classes[] = 'woocommerce';
	// return the $classes array
	return $classes;
}
?>

<?php

add_filter( 'body_class', 'tung_class_names' );

function tung_class_names( $classes ) {

// add 'class-name' to the $classes array

$classes[] = 'woocommerce';

// return the $classes array

return $classes;

}

Code show nút add to cart: code này được dùng trong vòng lặp

  <?php
$product = wc_get_product( get_the_ID() );
$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',
      esc_url( $product->add_to_cart_url() ),
      $product->id,
      esc_attr( $product->product_type ),
      $product->single_add_to_cart_text()
     );
echo $add_to_cart_link;
    ?>

<?php

$product = wc_get_product( get_the_ID() );

$add_to_cart_link = sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" class=" add_to_cart_button single_add_to_cart_button button product_type_%s">%s</a>',

esc_url( $product->add_to_cart_url() ),

$product->id,

esc_attr( $product->product_type ),

$product->single_add_to_cart_text()

);

echo $add_to_cart_link;

Thay đổi text add to cart

Trên trang detail:

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );    // 2.1 +
function woo_custom_cart_button_text() {
        return __( 'My Button Text', 'woocommerce' );
}

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' ); // 2.1 +

function woo_custom_cart_button_text() {

return __( 'My Button Text', 'woocommerce' );

}

Trên template archive

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );   
function woo_archive_custom_cart_button_text() {
        return __( 'My Button Text', 'woocommerce' );
}

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' );

function woo_archive_custom_cart_button_text() {

return __( 'My Button Text', 'woocommerce' );

}

Các bài viết khác có thể hữu ích với bạn

4.9/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Function xử lý upload to media wordpress [ 18/07/2022 11:11 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Thêm phone cho user và lấy nó ra trong network multisite wordpress [ 19/11/2021 07:14 ]
Bắt sự kiện add to cart để update giỏ hàng minicart [ 18/10/2021 13:49 ]
Css counter code mẫu [ 14/10/2021 07:50 ]
Cài đặt ssl cho vBulletin 4.x [ 13/10/2021 01:03 ]
Khắc phục lỗi “Briefly unavailable for scheduled maintenance. Check back in a minute” [ 12/05/2021 02:34 ]
Ứng dụng đệ quy để tạo danh mục nhiều cấp không giới hạn [ 14/10/2020 07:32 ]
Giới thiệu theme đăng tin bất động sản đẳng cấp đầy đủ tính năng [ 25/10/2017 07:57 ]
Thuật toán bài viết liên quan trong wordpress [ 14/06/2015 15:11 ]

Cách tùy biến nút add to cart trong woocommerce

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)