Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Wordpress » Wordpress plugins » Tùy biến nút add to cart với woocommerce – phần 2

Tùy biến nút add to cart với woocommerce – phần 2

Thứ Hai, 15/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Như chúng ta biết có 2 cách overridde woocommerce thông qua hooks và template. Trong bài trước mình hướng dẫn sử dụng ajax cho nút add to cart, trong bài hôm nay bạn sẽ học cách tùy biến giao diện cũng như thêm tính năng của nút thêm vào giỏ hàng.
tùy biến nút add to cart - woocommerce

Để tùy chính nút add to cart, bạn override template /woocommerce/loop/add-to-cart.php. Copy file này vào trong thư mục theme của bạn và giữ nguyên cấu trúc folder.
Nội dung code của file add-to-cart.php đã được rút ngắn trong bản 2.1.0, tuy nhiên có thể sử dụng lại file add-to-cart.php ở phiên bản cũ hơn như 1.6.4 cũng không có gì thay đổi nhiều, code vẫn hoạt động.

Trong bản 1.6.4, add-to-cart.php cho phép sửa lại nhãn nút add to cart với nhiều loại sản phẩm khác nhau. VD: variable, grouped, external…
Ngoài ra, bạn có thể thay đổi giao diện tùy ý và thậm trí sử lý form field tại đây.

Trong bản mới của woocommerce đã chuyển tính năng này cho hook woocommerce_product_add_to_cart_text.
Bạn có thể tùy chọn thêm trường vào đây, add-to-cart.php sử lý trong form và bắt lấy giá trị của field sau khi nhấn nút add to cart bởi hook woocommerce_ajax_added_to_cart.

Trước tiên, mình sẽ thêm input text vào trước woocommerce_loop_add_to_cart_link trong nội dung của add-to-cart.php version 1.6.4

<?php
/**
 * Loop Add to Cart
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     1.6.4
 */
 
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
 
global $product;
?>
 
<?php if ( ! $product->is_in_stock() ) : ?>
 
	<a href="<?php echo apply_filters( 'out_of_stock_add_to_cart_url', get_permalink( $product->id ) ); ?>" class="button"><?php echo apply_filters( 'out_of_stock_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); ?></a>
 
<?php else : ?>
 
	<?php
		$link = array(
			'url'   => '',
			'label' => '',
			'class' => ''
		);
 
		$handler = apply_filters( 'woocommerce_add_to_cart_handler', $product->product_type, $product );
 
		switch ( $handler ) {
			case "variable" :
				$link['url'] 	= apply_filters( 'variable_add_to_cart_url', get_permalink( $product->id ) );
				$link['label'] 	= apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) );
			break;
			case "grouped" :
				$link['url'] 	= apply_filters( 'grouped_add_to_cart_url', get_permalink( $product->id ) );
				$link['label'] 	= apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) );
			break;
			case "external" :
				$link['url'] 	= apply_filters( 'external_add_to_cart_url', get_permalink( $product->id ) );
				$link['label'] 	= apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) );
			break;
			default :
				if ( $product->is_purchasable() ) {
					$link['url'] 	= apply_filters( 'add_to_cart_url', esc_url( $product->add_to_cart_url() ) );
					$link['label'] 	= apply_filters( 'add_to_cart_text', __( 'my Add to cart', 'woocommerce' ) );
					$link['class']  = apply_filters( 'add_to_cart_class', 'add_to_cart_button' );
				} else {
					$link['url'] 	= apply_filters( 'not_purchasable_url', get_permalink( $product->id ) );
					$link['label'] 	= apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) );
				}
			break;
		}
		
		echo '<input type="text" id="logo_text" placeholder="Specify your logo text." />';
		echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s"><div class="btn-basket">%s</div></a>', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
 
	?>
 
<?php endif; ?>

Thêm hook sử lý ajax mỗi khi người dùng click vào add to cart.

add_action( 'woocommerce_ajax_added_to_cart', 'ac_add_product_custom_field' );
function ac_add_product_custom_field($product_id) {
  //disabled default ajax added_to_cart
  // check if logo_text has been defined by the client
	if ( isset( $_POST['logo_text'] ) ) {
		 // do something
	}
}

Sẽ gọi action woocommerce_ajax_added_to_cart trong form yêu cầu thêm sản phẩm mới vào giỏ hàng, một phần nội dung của form include từ file add-to-cart.php, do vậy đoạn code trên có kiểm tra nếu tồn tại giá trị field ‘logo_text’ thì có thể sử lý công việc nào đó trước khi sản phẩm được thêm vào cart.

Để kiểm tra hook woocommerce_ajax_added_to_cart có hoạt động với woocommerce hiện tại bạn đang dùng không, thử thêm hàm exit() ở đầu callback của hook , ví dụ ở trên là hàm “ac_add_product_custom_field”. Bạn sẽ thấy ảnh loading..đứng y nguyên sau khi ấn vô nút add to cart. Có nghĩa hook này có hoạt động.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Bài liên quan:

  • WooCommerce: Tắt Ajax Cart Fragments & tại sao không nên dùng
    WooCommerce: Tắt Ajax Cart Fragments & tại sao không nên…
  • Hướng dẫn tạo giỏ hàng trong wordpress
    Hướng dẫn tạo giỏ hàng trong wordpress
  • Phần mềm RIP giao diện website, Nhận RIP Theme Wordpress
    Phần mềm RIP giao diện website, Nhận RIP Theme Wordpress
  • Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
    Click ảo là gì? Cách Chặn click ảo và Hạn chế click tặc 80%
  • Sử lý dữ liệu trong contact form 7
    Sử lý dữ liệu trong contact form 7
  • 20 plugins vận chuyển và tính phí cho WooCommerce
    20 plugins vận chuyển và tính phí cho WooCommerce

Chuyên mục: Wordpress, Wordpress plugins Tìm kiếm: web bán hàng, Woocommerce, wordpress plugins

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

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Bạn đã đăng ký thành công!

Lỗi! hãy làm lại.

thông tin của bạn được 100% bảo mật...

Comments

  1. Lê Thanh Phong says

    Thứ Năm, 04/10/2018 at 9:10 chiều

    Chào anh,

    Mình đang muốn bỏ nút một trong hai nút “Mua Hàng” hoặc nút ” Thêm Vào giỏ hàng” trong woocommerce mà chưa biết làm như thế nào, nhơ anh tư vấn giúp

Tôi giúp gì cho bạn?

Nhận bài viết mới

Vui lòng điền chính xác email ở bên dưới để nhận thông báo bài viết mới.

Cám ơn bạn đã đăng ký.

Lỗi, hãy làm lại

thông tin của bạn được 100% bảo mật...

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 (8h:00 – 21h:00)

Email: hoangweb24@gmail.com

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • Hosting Miễn Phí Trọn Đời

LIÊN KẾT

  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2022 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.

plugin thanh toan
Link tải : https://wordpress.org/plugins/bck-tu-dong-xac-nhan-thanh-toan-chuyen-khoan-ngan-hang/