Những đoạn code tùy biến Woocommerce hay dùng nhất hiện nay.

Woocommerce là một trong những Plugin phổ biến nhất WordPress, cho các web shop bán hàng online. Woo luôn đơn giản và đầy đủ tính năng, quan trọng nhất là Woo Miễn Phí. Muốn tùy biến nó thì ta phải làm thế nào?



Woocommerce Plugin ra đời ngay sau khi WordPress bắt đầu càn quét thế giới Thiết kế web.

Woocommerce là plugin hỗ trợ web bán hàng online hiệu quả nhất hiện nay. Woocommerce miễn phí và đơn giản nhất cho ai cũng có thể sử dụng, do vậy nó sẽ có rất nhiều tính năng thừa cũng như những thiết kế không vừa ý nhiều người. Để tùy biến Woo theo mong muốn bạn cần biết code! nhưng đôi khi, bạn chỉ cần copy và paste cũng có thể tùy biến được một số tùy chỉnh sau



Cách tùy chỉnh function.php WordPress

Tùy chỉnh function.php trong WordPress khá đơn giản, bạn chỉ việc tìm file function.php của theme đang sử dụng và thêm code vào đó. Khuyến cáo: Nên sử dụng Child theme để tinh chỉnh nhé.

Bạn vào WP Admin -> Giao diện -> Sửa (giao diện) và tìm file function.php. Tùy WP theme sẽ có các vị trí file function khác nhau. Thêm code tùy chỉnh vào sau thẻ <?php, nên để dưới cuối cùng của file.

Function Php WordPress 1024x502

Những đoạn code tùy biến cho Woo

Để tùy biến Woocommerce cần thêm code vào file function.php như hướng dẫn trên. Những đoạn code dưới mình đã và đang dùng 100% hoạt động ổn định, đa số lượm nhặt từ nhiều nguồn chất lượng.

Trước khi tùy biến, xin lưu ý: “backup web hoặc làm demo trên local host, ít nhất cũng lưu lại file function.php nguyên bản đã nhé. Đừng dại mà ném toẹt code ngay vào web chính!”

Woocommerce Nhung Doan Code Hay

 

Azdigi

Thay đổi “Miễn phí” 0đ thành “Giá liên hệ”

Mặc định Woo khi sản phẩm  không điền giá (0đ) sẽ hiển thị: Miễn Phí, để thay chữ Miễn Phí thành Giá liên hệ thì theme code sau vào function.php

“Quick View” thành “Xem nhanh”

Tính năng Quick View của Woo rất hữu ích nhưng đa số theme lại bỏ qua việc dịch chữ này thành các ngôn ngữ, trong đó có tiếng Việt. Dịch chữ Quick view thành Xem nhanh hay gì gì tùy bạn.

SKU thành Mã sản phẩm

Mã sản phẩm là tính năng không thể thiếu với web bán hàng, nhất là các web có tính năng Live Search thì Mã sản phẩm tối quan trọng, giúp khách hàng và người bán tìm kiếm dễ hơn. Ngặt nỗi, ít theme quan tâm dịch từ này, mặc định Woo để là SKU dịch thành Mã sản phẩm:

Hoặc (dùng 1 trong 2 đoạn code này đều dịch được chữ SKU)

Ẩn mã SKU đi cũng đơn giản, bạn thêm code sau

Hiển thị SKU ra ngoài trang Danh mục

Hiển thị Mã sản phẩm SKU ra ngoài page Danh mục sản phẩm, ngay bên dưới ảnh thumb sản phẩm giúp khách hàng thấy mã ngay khi view.

Có thể thay chữ Mã SP trên bằng bất kỳ từ gì bạn muốn.

Dịch Breadcrumb trong Giỏ hàng

Đây là phần thủ tục thôi, nó là đường dẫn Breadcrumb của trang Giỏ hàng:

SHOPPING CART -> CHECKOUT DETAILS -> ORDER COMPLETE

Đến như theme Flatsome phổ biến đến vậy mà cũng không thèm dịch phần này – thua! Code tùy biến dịch text đây:

Bỏ chữ SALE – Giảm giá

Với sản phẩm giảm giá, Woo treo trên đầu chữ SALE khá to. Tùy CSS mỗi theme nhưng đa phần khi dịch ra tiếng Việt thì chữ Giảm giá này khiến web xấu tệ! Trong trường hợp bạn muốn xóa chữ SALE này đi:

Hiện giá nhỏ nhất nhiều biến thể

Với sản phẩm có nhiều biến thể thì Woo để Giá nhìn rất khó chịu. VD như giá từ: 2.500.00đ – 3.990.000đ ?? Nếu bạn chỉ muốn hiển thị giá của biến thể có giá nhỏ nhất là 2.500.000đ thì code đây

Đổi chữ đ sang VND trong Woo

Mặc định của Woo với tiền tệ Việt Nam để là chữ đ, nếu bạn không muốn, có thể thay đổi sang bất kỳ ký tự nào nếu muốn, từ đ sang VND, từ đ sang K

Nếu không biết code, có thể dùng Plugin Woo Viet này, cài ra và chỉnh rất tiện. Hoặc nếu pro hơn, hãy thêm vào functions.php đoạn code sau là ngon ngay:

Thay “Add to cart” thành “Thêm vào giỏ”

Add to cart là nút không thể thiếu trong Woo nhưng có những theme họ không hỗ trợ tiếng Việt, hoặc đơn giản, bạn muốn đổi chữ Thêm vào giỏ thành Mua ngay hay gì gì đó. Hãy thêm đoạn code này vào

Đổi chữ Đặt hàng thành Đặt Tour

Trong trang Thanh toán (Check Out) có từ Đặt hàng (Place Order) mặc định của Woo mà các bạn làm web dịch vụ không thích, nhất là web du lịch. Cách đổi chữ Place Order (Đặt hàng) thành Đặt Tour như sau:

Xóa bỏ nút Add to cart “Thêm vào giỏ”

Với một số web giới thiệu sản phẩm, bạn không muốn hiển thị nút Add to cart (Thêm vào giỏ)? bạn có thể loại bỏ nút này mà không ảnh hưởng tới gian hàng và các thao tác khác

Thay đổi số Sản phẩm trong Danh mục

Với những theme cũ hoặc các theme do Việt Nam làm với Visual Composer, việc thay đổi Số lượng sản phẩm trong trang Danh mục sản phẩm là rất phức tạp, họ không cho tùy chỉnh nhiều phần này.

Muốn hiển thị bao nhiêu sản phẩm trong 1 trang Danh mục, thay số 24 trên bằng số bất kỳ bạn muốn. Nếu muốn hiển thị toàn bộ sản phẩm trên 1 page thì ta thay 24 thành -1

Thêm text dưới Tiêu đề sản phẩm

Nếu bạn muốn thêm một đoạn text tùy chỉnh luôn xuất hiện bên dưới tiêu đề mọi sản phẩm, một câu Slogan hoặc Khuyến mại, tốt nhất,.. gì gì đó thì làm thế nào? code đây

Xóa chữ “Mô tả sản phẩm” trong mô tả

Trong phần Mô tả chi tiết của mỗi Sản phẩm, có dòng đầu tiên to đùng: Mô tả sản phẩm nhìn rất ngứa mắt. Bạn muốn xóa dòng này?

Xóa tab Đánh giá trong chi tiết sản phẩm

Tab đánh giá trong Chi tiết sản phẩm khá thú vị, nó hơi dài dòng nhưng thêm Dữ liệu có cấu trúc Schema cho mỗi Sản phẩm. Khi có đánh giá, bạn sẽ có sao và vote được Google hiển thị. Nếu thấy phần đánh giá này dài dòng, xóa nó đi cũng được:

Xóa /product/ và /product-category/

Việc rút ngắn URL đường dẫn tĩnh giúp web bạn chuẩn SEO hơn và URL nhìn ngắn gọn dễ nhìn, dễ nhớ.

Xóa bỏ product-category và bỏ toàn bộ slug của danh mục cha ra khỏi đường dẫn tĩnh

/*
 * Author: https://levantoan.com
 * Link https://levantoan.com/xoa-bo-product-category-va-toan-bo-slug-cua-danh-muc-cha-khoi-duong-dan-cua-woocommerce/
 * */// Remove product cat base
add_filter('term_link', 'devvn_no_term_parents', 1000, 3);
function devvn_no_term_parents($url, $term, $taxonomy) {
    if($taxonomy == 'product_cat'){
        $term_nicename = $term->slug;
        $url = trailingslashit(get_option( 'home' )) . user_trailingslashit( $term_nicename, 'category' );
    }
    return $url;
}
 
// Add our custom product cat rewrite rules
function devvn_no_product_cat_parents_rewrite_rules($flash = false) {
    $terms = get_terms( array(
        'taxonomy' => 'product_cat',
        'post_type' => 'product',
        'hide_empty' => false,
    ));
    if($terms && !is_wp_error($terms)){
        foreach ($terms as $term){
            $term_slug = $term->slug;
            add_rewrite_rule($term_slug.'/?$', 'index.php?product_cat='.$term_slug,'top');
            add_rewrite_rule($term_slug.'/page/([0-9]{1,})/?$', 'index.php?product_cat='.$term_slug.'&paged=$matches[1]','top');
            add_rewrite_rule($term_slug.'/(?:feed/)?(feed|rdf|rss|rss2|atom)/?$', 'index.php?product_cat='.$term_slug.'&feed=$matches[1]','top');
        }
    }
    if ($flash == true)
        flush_rewrite_rules(false);
}
add_action('init', 'devvn_no_product_cat_parents_rewrite_rules');
 
/*Sửa lỗi khi tạo mới taxomony bị 404*/add_action( 'create_term', 'devvn_new_product_cat_edit_success', 10);
add_action( 'edit_terms', 'devvn_new_product_cat_edit_success', 10);
add_action( 'delete_term', 'devvn_new_product_cat_edit_success', 10);
function devvn_new_product_cat_edit_success( ) {
    devvn_no_product_cat_parents_rewrite_rules(true);
}

Thiết lập xong Plugin, nhớ Update Đường dẫn tĩnh: WP Admin -> Cài đặt -> Đường dẫn tĩnh -> Lưu thay đổi

Xóa bỏ đường dẫn breadcrumb

Breadcrumb là đường dẫn tạo sitemap nội cho người dùng thấy, giúp điều hướng xem từ Danh mục đến Sản phẩm chi tiết và ngược lại. Đôi khi vì lý do nào đó mà bạn không thích nó, cần bỏ breadcrumb đi? Cá nhân mình khuyên không nên xóa ?

Sửa ký hiệu tiền tệ Đ sang VND

Woo hỗ trợ tiếng Việt khá tốt nhưng đơn vị tiền tệ thì không hiểu ông dịch thế nào hay để là đ, kiểu 200.000đ giờ muốn đổi thành 200.000VND thì làm thế nào?

Bạn có thể thay chữ VND trên bằng bất kỳ ký hiệu tiền tệ nào bạn muốn.

Thêm bớt số lượng sản phẩm liên quan

Trong mỗi page Chi tiết sản phẩm đều hiểu thị Sản phẩm liên quan. Bạn muốn nó tăng lên hay giảm đi theo ý mình? thay số 6 bằng số sản phẩm bạn muốn nó hiển thị nhé:

Đưa Mô tả chi tiết sản phẩm lên trên

Mô tả sản phẩm thường được đặt dưới Mô tả ngắn, một số web bán hàng không cần Mô tả ngắn thì sao? đưa Mô tả chi tiết lên trên dùng đoạn code sau nhé

Shortcode cho Woocommerce

Woocommerce hỗ trợ Shortcode rất tốt, thay vì code những đoạn loằng ngoằng phức tạp thì bạn có thể sử dụng các shortcode này để tạo các Page mới, hiển thị nội dung về các sản phẩm như mong muốn

Show sản phẩm mới nhất

[recent_products per_page="12" columns="4"]

Show sản phẩm nổi bật

[featured_products per_page="12" columns="4"]

Show sản phẩm theo ID

[product id="88"]

Show sản phẩm theo nhiều ID

Show full sản phẩm chi tiết ra page

Show sản phẩm đang giảm giá

Show sản phẩm bán chạy

Show sản phẩm theo danh mục

[product_category category="Ten danh muc"]

Kết luận

Các đoạn code tùy biến cho Woocommerce giúp website bạn linh động hơn, tạo các tùy chọn nâng cao cho người dùng giúp shop bán hàng tốt hơn. Nếu áp dụng đúng sẽ tăng hiệu suất hoạt động người dùng trên web rất nhiều, đôi khi đơn giản nhất là hiệu quả nhất đấy.

5/5 - (94 bình chọn)



Nhận thông báo qua email
Nhân thông báo cho
guest
1 Bình luận
Bình chọn nhiều nhất
Mới nhất Cũ nhất
Inline Feedbacks
View all comments
Khang
Khang
3 năm cách đây

Cho mình xin đoạn code dịch: “Billing details”, “YOUR ORDER”, “PRODUCT”, “PRICE”, “QUANTITY”, “SUBTOTAL”, “CART TOTALS” với, cảm ơn bạn!

1
0
Bạn thích bài viết này, viết bình luận nhé.x