Khi nội dung giới thiệu danh mục sản phẩm của bạn quá dài, thì việc hiển thị nó đôi khi không thực sự cần thiết. Đặc biệt là trên các thiết bị di động thì nó chiếm hết phần không gian đầu trang, khiến cho khách hàng kéo mãi vẫn chưa nhìn thấy sản phẩm đâu cả. Trong khi phần lớn những nội dung này chỉ để nhằm mục đích seo chứ chẳng khách hàng nào quan tâm.

Chẳng hạn trong một số lĩnh vực đặc thù như đồ gỗ nội thất, khách hàng chỉ muốn xem sản phẩm của bạn chứ không cần đọc mô tả danh mục. Thì ý tưởng ở đây là chúng ta sẽ chỉ cho hiển thị một phần nội dung và bên dưới có nút xem thêm. Nếu khách hàng thực sự muốn xem, họ sẽ click vào nút xem thêm, khi đó toàn bộ nội dung sẽ hiện ra.

Việc trình bày như vậy giúp website trông gọn gàng hơn và kích thích khách hàng tạo ra một hành động tương tác với trang web – đó là click xem thêm.

Code rút gọn nội dung mô tả danh mục sản phẩm Woocommerce

Trước khi sửa code, các bạn cần đọc kỹ lưu ý này:

1. Code này mình đang tạo với theme Flatsome nên nếu bạn dùng theme khác thì phải xem lại thuộc tính CSS cho chính xác thì nó mới hoạt động nhé.
2. Copy chính xác code bên dưới và paste vào file functions.php trong thư mục theme của bạn.
3. Nên dùng child theme để cập nhật main theme thoải mái mà không sợ bị lỗi.

Code đây:

/*
* Code thu gọn nội dung mô tả danh mục Woocommerce
*/

function dvp_readmore_button_woo($content){
	if(is_woocommerce() && (is_product_category() || is_product_tag())) {
	$content .= '<div class="dvp_readmore_woo"><span title="Xem thêm">Xem thêm <i style="padding-left:5px;margin-top:2px" class="icon-angle-down"></i></span></div>';
	}
	return $content;
}
add_filter( 'woocommerce_taxonomy_archive_description_raw', 'dvp_readmore_button_woo', 100 );
add_action('wp_footer','dvp_readmore_woocommerce_danh_muc');
function dvp_readmore_woocommerce_danh_muc() {
if(is_woocommerce() && (is_product_category() || is_product_tag())){
	?>
	<style>
		.shop-container > div.term-description {
			overflow: hidden;
			position: relative;
			max-height: 180px;
		}

		.dvp_readmore_woo {
			text-align: center;
			cursor: pointer;
			position: absolute;
			z-index: 2;
			bottom: 0;
			width: 100%;
			background: #fff;
			margin-left: -15px;
		}

		.dvp_readmore_woo:before {
			height: 55px;
			margin-top: -45px;
			content: "";
			background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
			display: block;
		}

		.dvp_readmore_woo span {
			color: #6c6d70;
			display: block;
			border: 1px solid;
			margin-left: auto;
			display: flex;
			width: 130px;
			margin-right: auto;
			text-transform: uppercase;
			text-align: center;
			justify-content: center;
			margin-bottom: 20px;
		}
	</style>
	<script>
		let xemThemButtonMore = document.querySelector(".dvp_readmore_woo");
		let xemThemNoiDung = document.querySelector(".term-description");
		const divInnerContentHeight = document.querySelector('.term-description').scrollHeight;
		let your_height = 150;
		if (divInnerContentHeight > your_height) {
			xemThemButtonMore.addEventListener("click", () => {
				xemThemNoiDung.style.maxHeight = "none";
				xemThemButtonMore.style.display = "none";
			})
		} else {
			xemThemNoiDung.style.maxHeight = "none";
			xemThemButtonMore.style.display = "none";
		};
	</script>
	<?php
	}
}

Có một số đoạn các bạn có thể tùy chỉnh theo ý mình nhé:

Đoạn .shop-container > div.term-description bạn có thể sửa thành .term-description để chắc chắn đoạn code trên sẽ hoạt động với bất kỳ theme nào, miễn là sử dụng Woocommerce thì phần nội dung mô tả danh mục sản phẩm sẽ nằm trong thẻ này.

Đoạn max-height: 180px là chiều cao của phần nội dung được hiển thị tính từ trên xuống. Bạn có thể sửa 180px thành một con số khác tùy thích. Nếu độ dài của nội dung lớn hơn 180px thì nó sẽ tự ẩn phần nội dung phía dưới.

Đoạn let your_height = 150 quy định là kích thước chiều cao đoạn nội dung dùng để so sánh. Nếu nội dung mô tả danh mục sản phẩm Woocommerce của bạn lớn hơn con số này thì phần nội dung thừa ra sẽ bị ẩn đi và thay bằng nút Xem thêm.

Bạn nào làm chưa được có thể để lại website bên dưới phần bình luận, mình sẽ hỗ trợ nhé.

Tương tự, nếu muốn thu gọn nội dung mô tả của trang sản phẩm chi tiết thì bạn có thể sử dụng code trong bài viết này.

• Sắp xếp mặc định (thứ tự tùy chỉnh + tên)
• Mức độ phổ biến (dựa trên doanh số – số lượng đơn hàng bán được)
• Đánh giá trung bình (dựa trên điểm đánh giá dưới phần đánh giá sản phẩm)
• Sắp xếp theo gần đây nhất (hiển thị sản phẩm từ mới đến cũ)
• Sắp xếp theo giá tăng dần (hiển thị sản phẩm giá thấp đến cao)
• Sắp xếp theo giá giảm dần (hiển thị sản phẩm giá cao đến thấp)

Tùy chỉnh tại: Woocommerce > Settings > Products > Display

Nếu bạn muốn thêm sắp xếp theo thứ tự ngẫu nhiên (random) thì bạn phải chèn thêm code sau vào file functions.php trong theme đang sử dụng:

// Shop random order. View settings drop down order by Woocommerce > Settings > Products > Display
add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_woocommerce_get_catalog_ordering_args' );
function custom_woocommerce_get_catalog_ordering_args( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
    if ( 'random_list' == $orderby_value ) {
        $args['orderby'] = 'rand';
        $args['order'] = '';
        $args['meta_key'] = '';
    }
    return $args;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby' );
function custom_woocommerce_catalog_orderby( $sortby ) {
    $sortby['random_list'] = 'Random';
    return $sortby;
}

Chúc các bạn thành công

Khi nội dung của bạn quá dài thì việc hiển thị toàn bộ nội dung mô tả đôi khi không thực sự cần thiết. Chẳng hạn trong một số lĩnh vực đặc thù như đồ gỗ nội thất, khách hàng chỉ cần xem ảnh, giá sản phẩm và một số thông tin cơ bản là đủ để họ đưa ra quyết định liên hệ hoặc đặt hàng.

Ý tưởng ở đây là chúng ta sẽ chỉ cho hiển thị một phần nội dung và bên dưới có nút xem thêm. Nếu khách hàng thực sự muốn xem, họ sẽ phải click vào nút xem thêm, khi đó toàn bộ nội dung sẽ hiện ra.

Việc trình bày như vậy giúp website trông gọn gàng hơn và kích thích khách hàng tạo ra một hành động tương tác với trang web – đó là click xem thêm.

Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce

Trước khi sửa code, các bạn cần đọc kỹ lưu ý này:

1. Code chỉ làm việc với kiểu hiển thị nội dung mô tả sản phẩm chi tiết dưới dạng Tabs (là kiểu hiển thị mặc định của Woocommerce). Trên một số theme (ví dụ Flatsome) có tùy chọn hiển thị Product Tabs theo nhiều kiểu khác (chẳng hạn Sections hoặc Accordion) thì code này sẽ không hoạt động.
2. Copy chính xác code bên dưới và paste vào file functions.php trong thư mục theme của bạn.
3. Nên dùng child theme để cập nhật main theme thoải mái mà không sợ bị lỗi.

Code:

/*
* Code rút gọn nội dung mô tả chi tiết sản phẩm Woocommerce
*/

function dvp_readmore_button_woo($content){
	if (is_product()){
	$content .= '<div class="dvp_readmore_woo"><span title="Xem thêm">Xem thêm</span></div>';
	}
	return $content;
}
add_filter( 'the_content', 'dvp_readmore_button_woo', 100 );

add_action('wp_footer','dvp_readmore_woocommerce');
function dvp_readmore_woocommerce(){
	if (is_product()){
	?>
	<style>
		.single-product div#tab-description {
			overflow: hidden;
			position: relative;
			max-height: 600px;
		}

		.dvp_readmore_woo {
			text-align: center;
			cursor: pointer;
			position: absolute;
			z-index: 9999;
			bottom: 0;
			width: 100%;
			background: #fff;
		}

		.dvp_readmore_woo:before {
			height: 55px;
			margin-top: -45px;
			content: "";
			background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
			display: block;
		}

		.dvp_readmore_woo span {
			color: #6c6d70;
			display: block;
			border: 1px solid;
			margin-left: auto;
			display: flex;
			width: 130px;
			margin-right: auto;
			text-transform: uppercase;
			text-align: center;
			justify-content: center;
		}
	</style>
	<script>
		let xemThemButtonMore = document.querySelector(".dvp_readmore_woo");
		let xemThemNoiDung = document.getElementById("tab-description");
		const divInnerContentHeight = document.querySelector('.woocommerce-Tabs-panel--description').scrollHeight;
		let your_height = 599;
		if (divInnerContentHeight > your_height) {
			xemThemButtonMore.addEventListener("click", () => {
				xemThemNoiDung.style.maxHeight = "none";
				xemThemButtonMore.style.display = "none";
			})
		} else {
			xemThemNoiDung.style.maxHeight = "none";
			xemThemButtonMore.style.display = "none";
		};
	</script>
	<?php
	}
}

Có một số đoạn các bạn có thể tùy chỉnh theo ý mình nhé:

Dòng 21, đoạn max-height: 600px là kích thước phần nội dung được hiển thị tính từ trên xuống. Bạn có thể sửa 600px thành một con số khác.

Dòng 62, đoạn let your_height = 599 là kích thước chiều dài nội dung dùng để so sánh. Nếu nội dung mô tả sản phẩm Woocommerce của bạn dài hơn con số này thì phần nội dung thừa ra sẽ bị ẩn đi và thay bằng nút Xem thêm. Bạn chỉnh con số này nhỏ hơn 1px so với dòng 21 ở trên.

Bạn nào làm chưa được có thể để lại website bên dưới phần bình luận, mình sẽ hỗ trợ nhé.

Tương tự, nếu muốn thu gọn nội dung mô tả của danh mục sản phẩm Woocommerce thì bạn có thể sử dụng code trong bài viết này.

Quá bất tiện đúng không! Vấn đề sẽ được giải quyết rất đơn giản chỉ với vài dòng code.

Giải pháp 1: Sử dụng Plugin

Đây là cách đơn giản nhất, các bạn không cần biết code, chỉ cần cài plugin là được.

https://wordpress.org/plugins/wc-product-author/

Và giờ bạn sẽ thấy cột tác giả trong trang quản lý sản phẩm:

Giải pháp 2: Chèn code vào theme

Bạn mở file functions.php trong thư mục theme đang sử dụng và thêm vào đoạn code sau:

function dvp_add_author_woocommerce() {
	add_post_type_support( 'product', 'author' );
	}
add_action( 'after_setup_theme', 'dvp_add_author_woocommerce' );

Lưu ý là nên dùng child theme để tránh bị mất code mỗi khi update theme nhé.

Bước 1: Cài và kích hoạt plugin

Trước tiên các bạn cài plugin vào website nhé.

Bước 2: Tạo Feed

Vào Product Feed PRO → Create Feed rồi chọn như hướng dẫn ở đây:

Project name: Nhập tên bất kỳ. Như ví dụ ở đây tôi xuất dữ liệu để quảng cáo cho website dogothanhtung.vn nên tôi đặt là DoGoThanhTung cho dễ nhớ.

Country: Vietnam (Chọn quốc gia bạn muốn quảng cáo).

Channel: Google Shopping. Plugin cũng hỗ trợ xuất dữ liệu cho các mạng quảng cáo khác như Bing, Facebook, Instagram, Pinterest, Snapchat nhưng chắc các bạn sẽ không dùng đến.

Include product variations: Mặc định là Tắt nhé. Bật lên nếu sản phẩm của bạn có nhiều biến thể.

Add only include default product variation: Mặc định là Tắt nhé.

Add only include lowest priced product variations: Mặc định là Tắt nhé. Đối với sản phẩm có nhiều biến thể (giá bán khác nhau) bạn nên Bật để chỉ xuất dữ liệu của biến thể có giá thấp nhất. Cái này có lợi cho quảng cáo Google Shopping vì giá thấp ai chẳng thích đúng ko?

File format: Chọn CSV để còn import vào Excel hoặc Google Sheets sửa cho tiện.

Delimiter: tab

Refresh interval: No refresh

Xong bước này, bấm Save & Continue để tiếp tục.

Bước 3: Field mapping

Tất cả các dữ liệu mặc định bạn để nguyên. Kéo xuống cuối trang ấn vào nút Add field mapping để thêm dữ liệu mới theo hướng dẫn dưới đây:

Các bạn nhớ làm đúng như hình thì mới xuất dữ liệu ra chính xác nhé.

Bước 4: Category mapping

Bước này để so khớp danh mục sản phẩm trên Woocommerce của bạn với danh mục sản phẩm của Google Shopping.

Google có một thư viện danh mục sản phẩm đã chuẩn hóa (google_product_category). Đối với mỗi sản phẩm, chúng ta phải khai báo mã số của danh mục phù hợp. Nếu khai báo sai, sản phẩm sẽ không được duyệt và không chạy quảng cáo được.

Ở bước này nếu bạn nhập mã số google_product_category thì dữ liệu sẽ tự động được thêm cho tất cả sản phẩm thuộc danh mục tương ứng trên website của bạn. Tuy nhiên tôi thường bỏ qua bước này vì nhập thủ công trong file Excel sẽ chính xác hơn. Lý do vì danh mục của chúng ta thường không chi tiết như danh mục của Google nên sẽ có những sản phẩm cùng thuộc một danh mục trên web nhưng mã số google_product_category lại khác nhau.

Bạn kéo xuống cuối trang, ấn nút Save mappings để tiếp tục.

Bước 5: Conversion & Google Analytics settings

Đây là phần cấu hình chuyển đổi để theo dõi trong Google Analytics. Bạn nào đọc được báo cáo Google Analytics thì chắc chắn tự cấu hình được phần này nên tôi không nói thêm nữa để tập trung cho nội dung chính.

Nếu bạn không cần theo dõi thì tắt cái Enable Google Analytics tracking là được.

Xong thì ấn nút Generate Product Feed để tiếp tục.

Sau khi tải về, bạn sẽ được 1 file Excel như thế này:

Dựa vào file này, tiếp theo bạn chỉ cần bổ sung một số dữ liệu để có được file dữ liệu hoàn chỉnh theo yêu cầu của Google Merchant Center.

Bước 6: Chuẩn hóa file dữ liệu Google Shopping

File dữ liệu chuẩn để import vào Google Merchant Center có các cột sau:

Đối chiếu với file dữ liệu các bạn vừa xuất ra bằng plugin Product Feed PRO for WooCommerce thì chúng ta còn trống các trường dữ liệu: google_product_category, brand, gtin và mpn.

Trước tiên, bạn xem quy cách dữ liệu sản phẩm của Google Shopping ở đây:

https://support.google.com/merchants/answer/7052112?hl=vi

Các bạn sẽ thấy trường dữ liệu nào bắt buộc phải điền và trường dữ liệu nào có thể bỏ trống.

GTIN

Đối với Đồ Gỗ Thanh Tùng thì sản phẩm đều là xưởng tự sản xuất, không có mã số mã vạch gì cả nên cột GTIN có thể bỏ trống. Và với tất cả các sản phẩm không phải hàng thương hiệu, không có nguồn gốc xuất xứ rõ ràng thì mã GTIN có thể bỏ trống nhé các bạn!

MPN

Giống với GTIN, bỏ trống nhé các bạn!

BRAND (nhãn hiệu)

Vì sản phẩm không phải hàng thương hiệu nên cột này các bạn có thể bỏ trống hoặc nhập tên shop của các bạn. Ví dụ như ở đây tôi nhập Đồ Gỗ Thanh Tùng.

Google Product Category

Trước tiên các bạn tải danh mục chuẩn hóa của Google ở đây:

https://support.google.com/merchants/answer/6324436?hl=vi

Các bạn nên tải file Excel (.xls) về cho dễ tra cứu:

Sau đó đối chiếu sản phẩm của mình với danh mục chuẩn hóa của Google để khai báo mã số danh mục cho chính xác thì sản phẩm mới được duyệt và phân phối đúng khách hàng mục tiêu.

Sản phẩm của bạn không có trong danh mục của Google?

Nếu vậy thì bạn có thể chọn một danh mục liên quan nhất.

Ví dụ trong số các sản phẩm đồ gỗ mỹ nghệ mà Đồ Gỗ Thanh Tùng đang muốn quảng cáo thì sập gỗ không nằm trong danh mục sản phẩm của Google. Tuy nhiên chúng ta có thể xếp nó vào nhóm Bộ đồ nội thất phòng khách (Mã: 6348). Mặc dù nhiều người cũng mua sập để kê trong phòng thờ.

Bộ lập lịch hành động sẽ ghi lại nhật ký công việc mà bạn có thể xem chi tiết trong tab Scheduled Actions ở phần Status của Woocommerce. Trong database dữ liệu được lưu trữ trong bảng wp_actionscheduler_actions và wp_actionscheduler_logs. Lâu ngày có thể các tác vụ công việc sẽ ngày một nhiều hơn và khiến cho cơ sở dữ liệu trở nên cồng kềnh và làm chậm website của bạn.

Đối với những tác vụ đã hoàn thành (complete), bị lỗi (failed) hoặc bị hủy (canceled) thì các bạn nên xóa đi để giảm tải cho cơ sở dữ liệu.

Bạn có thể vào phpMyAdmin để Empty dữ liệu của bảng:

Hoặc chạy lần lượt 3 dòng lệnh SQL sau đây:

DELETE FROM 'wp_actionscheduler_actions' WHERE 'status' = 'complete'
DELETE FROM 'wp_actionscheduler_actions' WHERE 'status' = 'canceled'
DELETE FROM 'wp_actionscheduler_actions' WHERE 'status' = 'failed'

Đối với các tác vụ công việc được lên lịch đang chờ xử lý, nếu muốn chạy ngay tác vụ đó bạn vào phần Pending để chạy.

Đối với các tác vụ đã thực hiện, mặc định sẽ được xóa trong 30 ngày nhưng bạn có thể thay đổi cài đặt thành 7 ngày bằng cách thêm đoạn code sau vào file functions.php trong theme của bạn:

add_filter( 'action_scheduler_retention_period', 'wpb_action_scheduler_purge' );
function wpb_action_scheduler_purge() {
	return WEEK_IN_SECONDS;
}

Nếu bạn muốn tối ưu nhất database của mình thì chỉ cần lưu nhật ký trong 1 ngày, dùng code sau:

add_filter( 'action_scheduler_retention_period', 'wpb_action_scheduler_purge' );
function wpb_action_scheduler_purge() {
	return DAY_IN_SECONDS;
}

Chúc bạn thành công!

Mục đích thì rất tốt nhưng dở hơi là để làm được điều đó WooCommerce đã sử dụng 1 file js có tên là zxcvbn.min.js nặng tới hơn 800Kb. File này được tích hợp sẵn trong thư mục wp-includes/js của WordPress.

Bạn cảm thấy sao khi người dùng phải tải về một file js nặng tới hơn 800Kb? Chắc chắn nó sẽ làm chậm tốc độ website. Để wordpress tối ưu, bạn cần phải loại bỏ file js này. Thêm đoạn code dưới đây vào file functions.php trong thư mục theme của bạn:

// Tắt tính năng kiểm tra độ mạnh của mật khẩu trong Woocommerce
function dvp_remove_password_strength() {
    wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'dvp_remove_password_strength', 10 );

Liệu có ảnh hưởng đến khách hàng?

Đối với khách hàng am hiểu công nghệ, tự bản thân họ sẽ ý thức sử dụng mật khẩu phức tạp để bảo mật. Nên cái tính năng kiểm tra độ mạnh của mật khẩu này hoàn toàn không cần thiết.

Còn đối với người không am hiểu về công nghệ, họ thường có xu hướng đặt mật khẩu thật đơn giản và dễ nhớ (như số điện thoại hoặc ngày tháng năm sinh). Khi đó họ sẽ nhận được cảnh báo, yêu cầu phải thêm các ký tự đặc biệt, viết hoa hoặc thêm số,… Điều này khiến họ cảm thấy thật phiền phức! Bởi đối với nhóm khách hàng này, mấy cái tài khoản trên mạng chẳng có ý nghĩa gì, không cần phải bảo vệ, mất thì tạo cái mới. Do đó tính năng kiểm tra độ mạnh của mật khẩu lại càng vô nghĩa.

Đối với một số Woocommerce theme có sử dụng Lightbox đăng nhập, thì nó sẽ thêm form đăng nhập trên tất cả các trang của bạn, có nghĩa là script kiểm tra độ mạnh mật khẩu cũng sẽ tải trên tất cả các page.

Bạn vào Tùy biến giao diện → Shop → My Account và thay đổi phần the Login Style từ Lightbox thành Link. Khi đó script này sẽ chỉ tải trên trang đăng nhập & đăng ký thôi.

Tóm lại, tắt tính năng kiểm tra độ mạnh của mật khẩu trong Woocommerce giúp tối ưu cho WordPress, tăng tốc độ tải trang, đỡ làm phiền khách hàng.

• Mặc định plugin Woocommerce chia phần họ tên của khách hàng thành 2 phần tách biệt là First Name (tên của bạn) và Last Name (họ của bạn). Điều này là không phù hợp với thói quen của người Việt Nam. Để tiết kiệm thời gian cũng như tạo ra sự tiện lợi cho khách hàng thì chúng ta chỉ cần để 1 trường dữ liệu duy nhất là Họ và Tên để khách hàng chỉ phải điền 1 lần thôi.
• Tương tự cũng có 2 ô địa chỉ là Address 1 và Address 2, trong khi chúng ta chỉ cần 1 ô địa chỉ là đủ.
• Ngoài ra, mặc định Woocommerce cũng có trường dữ liệu như Company (công ty của bạn), State (tiểu bang), Postcode (mã bưu chính) và Country (quốc gia) cũng là không cần thiết.

Tối ưu thông tin khách hàng

Với một trang bán hàng thông thường thì chúng ta chỉ cần thu thập những dữ liệu sau:

• Họ và tên của khách hàng;
• Số điện thoại liên hệ;
• Địa chỉ email (để tạo tài khoản);
• Địa chỉ chi tiết nơi nhận hàng;

Khi đó những trường dữ liệu dư thừa hoặc không phù hợp nên được ẩn đi. Có 2 lợi ích rõ ràng:

• Một là để phần điền thông tin trông gọn gàng, vừa đủ, tiết kiệm thời gian nhập liệu cho khách hàng.
• Hai là để tối ưu cơ sở dữ liệu. Database không phải lưu trữ những thứ không cần thiết.

Để làm việc này các bạn có nhiều cách, chẳng hạn như thêm các đoạn code vào file function.php của theme hoặc sửa trực tiếp tại thư mục plugin. Tuy nhiên tác động bằng code thì sau này mỗi khi update plugin hoặc theme thì các tùy chỉnh của bạn sẽ trở về mặc định. Hơn nữa không phải ai cũng giỏi về code nên trong bài viết này tôi sẽ hướng dẫn các bạn chỉnh sửa các trường dữ liệu khách hàng bằng cách sử dụng plugin.

Plugin các bạn cần là Woo Checkout Field Editor Pro.

Điều kiện để plugin hoạt động đương nhiên là bạn phải có Woocommerce rồi.

Hướng dẫn sử dụng Woo Checkout Field Editor Pro

Bước 1: Cài đặt và kích hoạt WooCommerce Checkout Field Editor (Manager) Pro. Xem hướng dẫn tại đây nếu bạn chưa biết!

Bước 2: Bạn vào WooCommerce => Checkout Form để quản lý các trường dữ liệu.

• Mặc định bạn đang ở phần Billing Fields (thông tin thanh toán);
• Shipping Fields là phần thông tin vận chuyển;
• Additional Fields là thông tin thêm;
• Nút Add field để thêm trường dữ liệu mới;
• Remove để xóa;
• Enable để kích hoạt;
• Disable để vô hiệu hóa.

Phía dưới là các trường dữ liệu hiện đang sử dụng. Theo thứ tự từ trên xuống dưới trong đây sắp xếp như nào thì bên ngoài trang thanh toán sẽ hiển thị như thế. Bạn có thể kéo – thả để sắp xếp tùy ý.

Muốn sửa phần nào thì bạn click nút Edit tương ứng bên tay phải sẽ hiện ra bảng:

Ý nghĩa của các ô dữ liệu:

• Name là tên (hoặc ID) lưu trong cơ sở dữ liệu.
• Type là thể loại/định dạng cho phép nhập liệu (ví dụ text là văn bản, tel là số điện thoại, email là thư điện tử,…)
• Label là tên hiển thị.
• Placeholder là nội dung gợi ý cho khách hàng điền thông tin.
• Class là thuộc tính CSS của vùng nhập liệu (bạn sử dụng form-row-wide nếu muốn đó là 1 dòng duy nhất, muốn chia thành 2 cột thì cột bên trái sử dụng form-row-first và cột bên phải sử dụng form-row-last để chia)
• Validation là điều kiện/quy tắc bắt buộc. Bạn có 2 lựa chọn: phone là định dạng số điện thoại, email là định dạng thư điện tử. Tức là nếu dữ liệu khách hàng nhập vào đây không đúng định dạng thì sẽ xảy ra lỗi. Điều này nhằm hạn chế khách hàng khai báo thông tin linh tinh.
• Required nếu có thì không được bỏ trống.

Bước 3: Sau khi sửa xong bạn phải click nút Save changes để lưu lại.