Hướng Dẫn Thủ Thuật Tùy Biến WooCommerce Đơn Giản Từ A-Z

Chỉ cần bạn nắm rõ các thủ thuật tùy biến Woocommerce để biến website WordPress thành website thương mại điện tử, bạn đã dễ dàng bước vào thị trường “kinh doanh số”. Bài viết dưới đây sẽ giúp bạn hiểu rõ hơn về các tùy chỉnh Woocommerce cũng như thủ thuật cài đặt và sử dụng chúng hiệu quả.

Thủ thuật tùy biến WooCommerce.

Tùy biến WooCommerce bằng Plugin (WooCommerce Customizer)

WooCommerce đã xuất hiện từ năm 2011 và WooC Commerce Editor là plugin thương mại điện tử được thiết kế tốt nhất và phổ biến nhất cho WordPress.

Trên thực tế, nó hiện là giải pháp thương mại điện tử phổ biến nhất trên Internet. Bạn có thể sử dụng plugin với WooCommerce Customizer mà không cần code. Bởi vì tính năng này cung cấp một trang cấu hình nâng cao cho phép chủ cửa hàng trực tuyến thay đổi các nút và trang văn bản khác nhau.

Ngoài ra, bạn cũng có thể thay đổi số lượng sản phẩm hiển thị trên trang.

Xem thêm: WordPress là gì?

Chuyển tiếng Anh sang tiếng Việt

Nếu bạn muốn chuyển đổi WooCommerce từ tiếng Anh sang tiếng Việt hay thậm chí là các ngôn ngữ khác mà bạn muốn. Bạn chỉ cần vào: Cài đặt -> Cài đặt chung -> chọn Tiếng Việt và WooCommerce sẽ tự động cập nhật bản dịch website của bạn.

Cài đặt ngôn ngữ cho WooCommerce.

Cài đặt Wizard cho WooCommerce

Sau khi kích hoạt, bạn sẽ thấy mục WooCommerce trên thanh menu bên trái, nhấp vào WooCommerce -> Cài đặt -> Trợ giúp để hoàn tất trình hướng dẫn cài đặt.

Tính năng này giúp xác định thứ tự của các yếu tố WooCommerce quan trọng, bao gồm trang giỏ hàng, thanh toán, tài khoản,…

Shortcode tùy biến WooCommerce

Bạn muốn hiển thị tất cả sản phẩm tùy biến WooCommerce ở trang chủ hay một trang bất kỳ. Bạn chỉ cần sử dụng các Shortcode như sau:

Bạn chỉ cần Paste các mã Code dưới đây vào như hình trên.

Hiển thị sản phẩm mới nhất: [recent_ products per_page=’12’ columns=’4′]

Hiển thị sản phẩm nổi bật: [featured_ products per_page=’12’ columns=’4′]

Hiển thị sản phẩm theo ID: [product id = ‘1’]

Hiển thị sản phẩm theo nhiều ID: [products ids=’1, 2, 3, 4, 5′]

Hiển thị sản phẩm đang giảm giá: [sale_products per_page=’12’]

Hiển thị sản phẩm đang bán chạy: [best_selling_products per_page=’12’]

Hiển thị sản phẩm theo danh mục: [product_category category=”SEO”]

Hoặc bạn muốn đưa Shop ra ngoài trang chủ thì bạn Setup như hình:

Cách đưa Shop ra ngoài trang chủ WooCommerce.

Sửa text “Add to cart” thành “Thêm vào giỏ hàng”

Add to Cart là nút cần thiết để tùy chỉnh WooCommerce, nhưng có những theme không hỗ trợ tiếng Việt, hoặc bạn chỉ muốn thay đổi văn bản mặc định thành Call to Action. 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’ );

Xem thêm: ThemeForest Là Gì? Những Lưu Ý Khi Mua ThemeForest

Xóa Tab đánh giá trong trang sản phẩm

Tab tổng quan về thông tin sản phẩm khá thú vị. Sử dụng đoạn code sau để thêm văn bản tùy chỉnh bên dưới tên sản phẩm trên mỗi trang chi tiết của sản phẩm:

// Remove vote tab in product detail page

add_filter( ‘woocommerce_product_tabs’, ‘wcs_woo_remove_reviews_tab’, 98 );

function wcs_woo_remove_reviews_tab( $tabs ) {

unset( $tabs[‘reviews’] ); // Remove the reviews tab

return $tabs;

}

Khi có đánh giá, bạn sẽ có sao và được Vote Google hiển thị. Nếu thấy phần đánh giá này dài dòng, bạn cũng có thể xóa chúng.

Thêm nút “Mua ngay” kế bên nút “Thêm vào giỏ hàng”

Cách để làm thêm nút “Mua ngay” (Buy Now) kế bên nút “Thêm vào giỏ hàng”.

Bạn chỉ cần thêm đoạn Code này vào file functions.php trong Theme của bạn đang sử dụng. Vậy là xong.

/*

* Add quickbuy button go to cart after click

*/

add_action(‘woocommerce_after_add_to_cart_button’,’devvn_quickbuy_after_addtocart_button’);

function devvn_quickbuy_after_addtocart_button(){

global $product;

?>

<button type=”submit” name=”add-to-cart” value=”<?php echo esc_attr($product->get_id()); ?>” class=”single_add_to_cart_button button alt” id=”buy_now_button”>

<?php _e(‘Mua ngay’, ‘devvn’); ?>

</button>

<input type=”hidden” name=”is_buy_now” id=”is_buy_now” value=”0″ />

<script>

jQuery(document).ready(function(){

jQuery(‘body’).on(‘click’, ‘#buy_now_button’, function(){

if(jQuery(this).hasClass(‘disabled’)) return;

var thisParent = jQuery(this).closest(‘form.cart’);

jQuery(‘#is_buy_now’, thisParent).val(‘1’);

thisParent.submit();

});

});

</script>

<?php

}

add_filter(‘woocommerce_add_to_cart_redirect’, ‘redirect_to_checkout’);

function redirect_to_checkout($redirect_url) {

if (isset($_REQUEST[‘is_buy_now’]) && $_REQUEST[‘is_buy_now’]) {

$redirect_url = wc_get_checkout_url();

}

return $redirect_url;

}

Bạn sẽ được Update thành công khi Click vào “Mua ngay” sẽ chuyển hướng tới trang thanh toán.

Xóa /product/ và /product-category/ trong đường dẫn

Việc rút ngắn URL (đường dẫn tĩnh) giúp Website bạn chuẩn SEO hơn và URL nhìn ngắn gọn dễ nhìn, dễ nhớ. Nếu Website bạn đã lâu năm và đang thịnh hành, tốt nhất không nên chỉnh sửa URL, nên giữ nguyên site URL.

Tất cả trong một Plugin để rút ngắn URL: Premmerce WooCommerce Permalink Manager Pro.

Xóa /product/ Sản phẩm slug Woo

Xóa đường dẫn /san-pham/ hay /product/ Slug trong URL Chi tiết sản phẩm. Thiết lập lại đường dẫn tĩnh cho toàn bộ sản phẩm của Shop. Ví dụ:

URL cũ: domain.com/san-pham/dien-thoại-iphone-x-64gh.

URL mới: domain.com/dien-thoại-iphone-x-64gh.

Xóa /product-category/ Danh mục slug Woo

Xóa đường dẫn tĩnh /product-category/ hay /danh-muc/ trong URL các Danh mục sản phẩm, rút ngắn URL nhất có thể cho Danh mục giúp SEO dễ hơn. Lưu ý khi sử dụng Plugin này vì nó không dành cho người mới bắt đầu. Chẳng hạn như:

URL cũ: domain.com/danh-muc/dieu-hoa/dieu-hoa-panasonic.

URL mới: domain.com/dieu-hoa-panasonic.

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.

Update Permalinks

Tùy biến WooCommerce về giá

Sau đây là các Code về tùy biến WooCommerce liên quan đến giá.

Sửa text “Miễn phí” của sản phẩm 0đ thành “Giá liên hệ”

Mặc định của WooCommerce khi sản phẩm không điền giá (0đ) sẽ hiển thị: Miễn Phí, để thay chữ Miễn Phí ->  Giá liên hệ thì:

Thêm Code sau vào file functions.php của Theme đang kích hoạt.

Chuyển 0đ thành chữ “Liên hệ”.

* WooCommerce Replace “Free!” by a custom string

**/

function custom_call_for_price() {

return ‘Giá liên hệ’;

}

add_filter(‘woocommerce_empty_price_html’, ‘custom_call_for_price’);

Hiển thị “Chỉ từ $$$” thay vì khoảng giá “$$$ – $$$”

Chèn vào file functions.php của Theme/ Child Theme.

add_filter( ‘woocommerce_variable_price_html’, ‘variation_price_format_min’, 9999, 2 );

function variation_price_format_min( $price, $product ) {

$prices = $product->get_variation_prices( true );

$min_price = current( $prices[‘price’] );

$price = sprintf( __( ‘Chỉ từ: %1$s’, ‘woocommerce’ ), wc_price( $min_price ) );

return $price;

}

Hiển thị “Giá – Giá thường – Giá tiết kiệm”

Để hiển thị “ Giá – Giá thường – Giá tiết kiệm” cho các sản phẩm đang bán.

Bạn có thể đặt các đoạn mã php ở cuối tệp functions.php.

[code] add_filter(‘woocommerce_get_price_html’,‘bbloomer_simple_product_price_format’, 10, 2 );
function bbloomer_simple_product_price_format( $price, $product ) {
if ( $product->is_on_sale() && $product->is_type(‘simple’) ) {
$price = sprintf( __( ‘

WAS %1$s

NOW %2$s

SAVE %3$s

’, ‘woocommerce’ ), wc_price ( $product->get_regular_price() ), wc_price( $product->get_sale_price() ), wc_price( $product->get_regular_price() – $product->get_sale_price() ) );
}
return $price;
}
[/code]

Chuyển ký hiệu tiền tệ từ “đ” sang “VND”

Tùy biến WooCommerce hỗ trợ tiếng Việt khá tốt và bây giờ bạn muốn đổi từ “đ” sang “VND” thì phải làm thế nào?

/**

Custom currency and currency symbol

*/

add_filter( ‘woocommerce_currencies’, ‘add_my_currency’ );

function add_my_currency( $currencies ) {

$currencies[‘VND’] = __( ‘Currency name’, ‘woocommerce’ );

return $currencies;

}

add_filter(‘woocommerce_currency_symbol’, ‘add_my_currency_symbol’, 10, 2);

function add_my_currency_symbol( $currency_symbol, $currency ) {

switch( $currency ) {

case ‘VND’: $currency_symbol = ‘$’; break;

}

return $currency_symbol;

}

Có thể thay ký hiệu VNĐ bằng bất kì đơn vị nào bạn muốn.

Lời kết

Qua bài viết trên, BKNS đã chia sẻ và hướng dẫn các thủ thuật tùy biến WooCommerce khá đơn giản và đầy đủ các chi tiết. Các đoạn Code sẽ giúp Website linh động hơn, tạo các tùy chọn nâng cao cho người dùng từ đó hỗ trợ 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 Website rất nhiều, đôi khi đơn giản nhất là hiệu quả nhất. Mong các bạn sẽ áp dụng thành công với Website của mình nhé.

Cảm ơn bạn đã đón đọc bài viết. Có thể bạn cũng quan tâm đến:

Theo dõi BKNS thường xuyên hơn tại các nền tảng mạng xã hội:

[mautic type=”form” id=”6″]