Nội dung
- 1 Chuyển hướng khi thêm sản phẩm vào giỏ hàng
- 2 Xóa trường địa chỉ tại trang thanh toán
- 3 Thay đổi số lượng sản phẩm hiển thị trên trang
- 4 Hiển thị thông điệp phía trên form đăng ký/đăng nhập
- 5 Xóa bỏ breadcrumbs
- 6 Chuyển đến trang thanh toán khi thêm sản phẩm vào giỏ hàng
- 7 Thay thế “out of stock”
- 8 Giới hạn giao hàng đến các quốc gia được chọn
- 9 Hiển thị “sản phẩm đã có trong giỏ hàng” thay vì nút “thêm vào giỏ hàng”
- 10 Thay thế phân trang mặc định cho WooCommerce
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
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:
- sửa số lượng sản phẩm trên một hàng với woocommerce.
- Thay đổi số lượng hiển thị sản phẩm liên quan trong woocommerce
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é.
Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Phương says
Hi!
Bạn có thể giúp mình cách làm email subject thành: Mã đơn hàng – Title product URL không?
Theo mẫu thid get được mã đơn hàng nhưng mình ko lấy dc title vào
Thanks
Hoàng Quách says
bạn xem ví dụ này nhé:
Phương says
Hi!
Cảm ơn Hoàng đã quan tâm đến câu hỏi của mình nhé.
Mình vừa add vào function đoạn code của bạn nhưng kết quả như này:
New Customer Order (# 6769) from Name Nguyen
Ý mình muốn ví dụ sản phẩm tên là A
Thì khi khách đặt hàng trong email sẽ báo l�
#order number – A
Hoàng Quách says
Mã lấy #order number là
$order->get_id()
.Đơn hàng có thể có nhiều items (sản phẩm), để lấy danh sách các sản phẩm có trong đơn hàng bạn sử dụng API sau:
CHúc bạn thành công!
Cao Trung Kiên says
Sửa các chữ này ở trang giỏ hàng bằng cách nào vậy bạn
SHOPPING CART CHECKOUT DETAILS ORDER COMPLETE
Xin cám ơn
Hoàng Quách says
Xem cách việt hóa woocommerce, chi tiết: https://docs.woocommerce.com/document/woocommerce-localization/