Woocommerce: Những Đoạn Code Tùy Biến Hay Nhất

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? Hôm nay Biget Software sẽ giới thiệu đến các bạn về những đoạn code tuỳ biến hay được nhiều người biết đến và vận dụng nó,

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.

Cách Tùy Chỉnh Function.php WordPress

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, có đoạn tự chém.

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!”

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

/**
* Change the add to cart text on single product page
*/
function woo_custom_cart_button_text()
{
return __(‘Thêm vào giỏ’, ‘woocommerce’);
}

add_filter(‘single_add_to_cart_text’, ‘woo_custom_cart_button_text’);

/**
* Change the add to cart text on product archives
*/
function woo_archive_custom_cart_button_text()
{
return __( ‘Thêm vào giỏ’, ‘woocommerce’ );
}

add_filter( ‘add_to_cart_text’, ‘woo_archive_custom_cart_button_text’ );

Đổ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:

/*
Change Place Order button text on checkout page in woocommerce
*/

add_filter(‘woocommerce_order_button_text’,’custom_order_button_text’,1);
function custom_order_button_text($order_button_text) {
$order_button_text = ‘ĐẶT TOUR’;
return $order_button_text;
}

Code Chuyển 0đ Thành Chữ “Liên hệ”

Dán code dưới vào file functions.php của theme

1
2
3
4
5
6
7
8
9
10
11
12
function devvn_wc_custom_get_price_html( $price, $product ) {
    if ( $product->get_price() == 0 ) {
        if ( $product->is_on_sale() && $product->get_regular_price() ) {
            $regular_price = wc_get_price_to_display( $product, array( 'qty' => 1, 'price' => $product->get_regular_price() ) );
            $price = wc_format_price_range( $regular_price, __( 'Free!', 'woocommerce' ) );
        } else {
            $price = '<span class="amount">' . __( 'Liên hệ', 'woocommerce' ) . '</span>';
        }
    }
    return $price;
}
add_filter( 'woocommerce_get_price_html', 'devvn_wc_custom_get_price_html', 10, 2 );

Chuyển Giá Thành “Liên Hệ” Khi Hết Hàng

Đoạn code này sẽ giúp bạn hiển thị giá thành chữ “Liên hệ” khi set sản phẩm đó là hết hàng. Chỉ cần thêm đoạn code sau vào functions.php của theme đang active là được

1
2
3
4
5
6
7
function devvn_oft_custom_get_price_html( $price, $product ) {
    if ( !is_admin() && !$product->is_in_stock()) {
       $price = '<span class="amount">' . __( 'Liên hệ', 'woocommerce' ) . '</span>';
    }
    return $price;
}
add_filter( 'woocommerce_get_price_html', 'devvn_oft_custom_get_price_html', 99, 2 );

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

// Remove Add to cart button
function remove_loop_button(){
remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
}
add_action(‘init’,’remove_loop_button’);

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.

// Show 24 products per page
add_filter( ‘loop_shop_per_page’, create_function( ‘$cols’, ‘return 24;’ ), 20 );

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

// Show all products per page
add_filter( ‘loop_shop_per_page’, create_function( ‘$cols’, ‘return -1;’ ), 20 );

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 🙂

// Remove Woo breadcrumb
add_action( ‘init’, ‘jk_remove_wc_breadcrumbs’ );

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

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:

// Change SKU text
function translate_woocommerce($translation, $text, $domain) {
if ($domain == ‘woocommerce’) {
switch ($text) {
case ‘SKU’:
$translation = ‘Mã sản phẩm:’;
break;
case ‘SKU:’:
$translation = ‘Mã sản phẩm:’;
break;
}
}
return $translation;
}

add_filter(‘gettext’, ‘translate_woocommerce’, 10, 3);

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.

/**
* Add custom SKU for shop
**/
add_action( ‘woocommerce_before_shop_loop_item_title’, ‘shop_sku’ );
function shop_sku(){
global $product;
echo ‘<div class=”sku”>Mã SP: ‘ . $product->sku . ‘</div>’;
}

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:

// Translate Shopping Cart Breadcrumb
add_filter( ‘gettext’, function ( $strings ) {

$text = array(
‘SHOPPING CART’ => ‘Giỏ hàng’,
‘CHECKOUT DETAILS’ => ‘Thanh toán’,
‘ORDER COMPLETE’ => ‘Hoàn tất’,
);
$strings = str_ireplace( array_keys( $text ), $text, $strings );
return $strings;
}, 20 );

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:

//Remove Sale Label on Products
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_show_product_loop_sale_flash’, 10 );

Hiện Giá Biến Thể Dưới Tiêu Đề Sản Phẩm

Mặc định thì Giá của Biến thể sản phẩm nằm dưới Mô tả ngắn, rất nhỏ và khó xem. Muốn hiển thị giá của một biến thể sản phẩm vào đúng vị trí Giá sản phẩm, anh em có thể thêm đoạn code như bên dưới, ngon luôn. Hoặc, ta hiểu là thay đổi khoảng giá WooCommerce thành 1 giá sau khi lựa chọn biến thể

VD như giá sản phẩm có 3 biến thể từ: 300.000đ – 420.000đ ?? Bạn chỉ muốn hiển thị giá của một biến thể 300.000đ vào đúng vị trí Giá sản phẩm mặc định – ngay dưới Tiêu đề sản phẩm?

//Thay thế giá cho sản phẩm có biến thể
// Nguồn: https://stackoverflow.com/revisions/61101012/1

add_action( ‘woocommerce_before_single_product’, ‘move_variations_single_price’, 1 );
function move_variations_single_price(){
global $product, $post;
if ( $product->is_type( ‘variable’ ) ) {
add_action( ‘woocommerce_single_product_summary’, ‘replace_variation_single_price’, 10 );
}
}
function replace_variation_single_price() {
?>
.woocommerce-variation-price { display: none; }

<br /> jQuery(document).ready(function($) {<br /> var priceselector = ‘.product p.price’;<br />

Đổ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:

/**
Change a currency symbol đ to VND
*/
add_filter(‘woocommerce_currency_symbol’, ‘change_existing_currency_symbol’, 10, 2);
function change_existing_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case ‘VND’: $currency_symbol = ‘VND’; break;
}
return $currency_symbol;
}

Xóa Extensions Trả Phí Woo 3.6

Từ WooCommerce 3.6 thì có thêm các Extensions (addon gợi ý) có tính phí rất khó chịu. Đây là điều nhiều người không mong muốn – trong đó có mình. Có lẽ WordPress không còn trong sáng và Miễn phí như trước nữa!!!

Xóa Extensions Trả Phí Woo 3.6

Đư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é

add_action ( ‘woocommerce_before_variations_form’,
‘show_attributes’, 25 );function show_attributes() {
global $product;
wc_display_product_attributes ($product);
}

add_filter( ‘woocommerce_product_tabs’,
‘woo_remove_product_tabs’, 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs[‘additional_information’] ); //emove the additional information tab
return $tabs;
}

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

Kết Luận

Các đoạn code tùy biến mà chúng tôi đã giới thiệu 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.

Rate this post

Trả lời