Danh sách Hooks tùy chỉnh WooCommerce

Từ hơn 5 năm qua, WooCommerce được công nhận là plugin thương mại điện tử mạnh mẽ và dễ sử dụng nhất cho WordPress. Trong bài viết này, mình có biên soạn tất cả các đoạn mã để có thể tùy chỉnh WooCommerce với tính năng được mở rộng.

Updated: Xem đầy đủ hướng dẫn tùy biến WooCommerce để xây dựng web bán hàng hiệu quả.

Chuyển hướng khi thêm sản phẩm vào giỏ hàng

Đôi khi bạn cho phép người dùng thêm sản phẩm vào giỏ hàng chỉ bằng cách nhấp vào một liên kết nào đó. Thật dễ dàng để thực hiện, chỉ cần thêm tham số ?add-to-cart=974 ở cuối bất kỳ liên kết nào.

Trong ví dụ này, 974 là id sản phẩm và phải được thay thế bằng id của sản phẩm bạn muốn thêm vào giỏ hàng.

http://yoursite.com/checkout/?add-to-cart=974

Xóa trường địa chỉ tại trang thanh toán

Nếu bạn đang bán sản phẩm kỹ thuật số, bạn không nhất thiết phải hỏi địa chỉ của người mua. Để loại bỏ các trường địa chỉ khỏi thanh toán, hãy chèn đoạn mã sau vào tệp functions.php trong giao diện WordPress của bạn:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
 
function custom_override_checkout_fields( $fields ) {
    unset($fields['billing']['billing_first_name']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_city']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_country']);
    unset($fields['billing']['billing_state']);
    unset($fields['billing']['billing_phone']);
    unset($fields['order']['order_comments']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_postcode']);
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_last_name']);
    unset($fields['billing']['billing_city']);
    return $fields;
}

Thay đổi số lượng sản phẩm hiển thị trên trang

Một cách đơn giản nhưng hiệu quả để xác định số lượng sản phẩm sẽ được hiển thị trên mỗi trang. Trong ví dụ này, 25 sản phẩm sẽ được hiển thị, cập nhật giá trị này với số lượng sản phẩm mong muốn và thêm dòng này vào tệp functions.php.

add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 25;' ), 20 );

Hiển thị thông điệp phía trên form đăng ký/đăng nhập

Dưới đây là một cách đơn giản để tự động thêm thông báo tùy chỉnh phía trên biểu mẫu đăng nhập / đăng ký. Mã này sẽ được chèn vào tệp functions.php của bạn.

add_action( 'woocommerce_before_customer_login_form', 'jk_login_message' );
function jk_login_message() {
    if ( get_option( 'woocommerce_enable_myaccount_registration' ) == 'yes' ) {
	?>
		<div class="woocommerce-info">
			<p><?php _e( 'Returning customers login. New users register for next time so you can:' ); ?></p>
			<ul>
				<li><?php _e( 'View your order history' ); ?></li>
				<li><?php _e( 'Check on your orders' ); ?></li>
				<li><?php _e( 'Edit your addresses' ); ?></li>
				<li><?php _e( 'Change your password' ); ?></li>
			</ul>
		</div>
	<?php
	}
}

Xem thêm hướng dẫn:

Xóa bỏ breadcrumbs

Nếu bạn nghĩ breadcrumbs là không cần thiết với trang web WordPress của bạn, bạn có thể loại bỏ nó một cách dễ dàng với đoạn mã sau.

add_action( 'init', 'jk_remove_wc_breadcrumbs' );

function jk_remove_wc_breadcrumbs() {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
}

Xem thêm:

Chuyển đến trang thanh toán khi thêm sản phẩm vào giỏ hàng

Một điều thú vị cho phép bạn tự động chuyển hướng đến trang thanh toán khi sản phẩm đã được thêm vào giỏ hàng. Như nhiều tùy biến khác từ bài viết này, mã này sẽ được thêm vào tệp functions.php

function add_to_cart_checkout_redirect() {
    wp_safe_redirect( get_permalink( get_option( 'woocommerce_checkout_page_id' ) ) );
    die();
}

add_action( 'woocommerce_add_to_cart', 'add_to_cart_checkout_redirect', 16 );

Thay thế “out of stock”

Nếu bạn đang bán mặt hàng độc đáo, sẽ có ý nghĩa hơn khi hiển thị “đã bán” thay vì nhãn “hết hàng” bởi mặc định. Để làm như vậy, bạn chỉ cần dán mã này vào tệp functions.php là xong.

add_filter('woocommerce_get_availability', 'availability_filter_func');

function availability_filter_func($availability) {
	$availability['availability'] = str_ireplace('Out of stock', 'Sold', $availability['availability']);
	return $availability;
}

Giới hạn giao hàng đến các quốc gia được chọn

Nếu bạn chỉ sẵn sàng giao hàng cho các quốc gia cụ thể, bạn có thể sử dụng mã bên dưới để thực hiện việc đó. Các quốc gia có thể được thêm vào mảng PHP.

function woo_override_checkout_fields( $fields ) { 

	$fields['shipping']['shipping_country'] = array(
		'type'      => 'select',
		'label'     => __('My New Country List', 'woocommerce'),
		'options' 	=> array('AU' => 'Australia')
	);

	return $fields; 
} 
add_filter( 'woocommerce_checkout_fields' , 'woo_override_checkout_fields' );

Hiển thị “sản phẩm đã có trong giỏ hàng” thay vì nút “thêm vào giỏ hàng”

Nếu khách truy cập đã thêm sản phẩm nào đó vào giỏ hàng của mình, có thể là một thông báo tuyệt vời để cho họ biết sản phẩm này đã có trong giỏ hàng. Ý tưởng bạn sẽ đổi nhãn nút Add to cart. Đây là một đoạn mã đơn giản để làm điều đó. Chỉ cần thêm nó vào tệp functions.php của bạn.

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' );
function woo_custom_cart_button_text() {
	global $woocommerce;
	foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];
 
		if( get_the_ID() == $_product->id ) {
			return __('Already in cart - Add Again?', 'woocommerce');
		}
	}
	return __('Add to cart', 'woocommerce');
}
 
add_filter( 'add_to_cart_text', 'woo_archive_custom_cart_button_text' );
function woo_archive_custom_cart_button_text() {
	global $woocommerce;
	foreach($woocommerce->cart->get_cart() as $cart_item_key => $values ) {
		$_product = $values['data'];
		if( get_the_ID() == $_product->id ) {
			return __('Already in cart', 'woocommerce');
		}
	}
	return __('Add to cart', 'woocommerce');
}

Thay thế phân trang mặc định cho WooCommerce

Cũng như WordPress, WooCommerce không sử dụng phân trang theo mặc định. Điều này có thể được thay đổi dễ dàng trên WordPress với plugin WP PageNavi. Khi sử dụng WooCommerce, nó đòi hỏi một chút kỹ năng sử dụng hooks để bạn thực hiện điều này.

Điều đầu tiên cần làm là cài đặt plugin WP PageNavi. Sau khi hoàn tất, chỉ cần mở tệp functions.php của bạn và dán mã sau.

remove_action('woocommerce_pagination', 'woocommerce_pagination', 10);
function woocommerce_pagination() {
		wp_pagenavi(); 		
	}
add_action( 'woocommerce_pagination', 'woocommerce_pagination', 10);

Trên đây là các mã tùy chỉnh WooCommerce hay sử dụng, nếu bạn có thêm những tính năng tùy biến nào hay xin chia sẻ bình luận dưới bài viết này nhé.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook