Gutenberg Edit là một tính năng mạnh mẽ và tiện lợi được tích hợp vào WooCommerce, giúp bạn tạo và chỉnh sửa trang sản phẩm của cửa hàng trực tuyến của mình một cách dễ dàng và hiệu quả. Với sự ra đời của Gutenberg – trình soạn thảo khối mới của WordPress, việc tạo trang sản phẩm trở nên thú vị hơn bao giờ hết.
Trong hướng dẫn này, chúng tôi sẽ hướng bạn qua các bước cơ bản để sử dụng Gutenberg Edit cho WooCommerce. Từ việc thêm sản phẩm mới đến tùy chỉnh giao diện trang sản phẩm và thậm chí cả việc tạo các khối tùy chỉnh riêng cho cửa hàng của bạn.
Hãy cùng bắt đầu khám phá cách tận dụng sức mạnh của Gutenberg Edit để nâng cao trải nghiệm mua sắm trực tuyến của bạn!
Phương pháp 1: giữ lại chức năng của Classic chỉ đổi tính năng Edit thành Gutenberg
Một đoạn mã nhỏ mà bạn có thể sao chép từ bên dưới sẽ biến khu vực mô tả sản phẩm của bạn thành một xứ sở thần tiên dựa trên các khối Block.
// enable gutenberg for woocommerce
function activate_gutenberg_product( $can_edit, $post_type ) {
if ( $post_type == 'product' ) {
$can_edit = true;
}
return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );
// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
$args['show_in_rest'] = true;
return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );Nếu bạn đã thêm mã ở trên vào trang web của mình nhưng nhận thấy rằng bạn không thể thêm khối mới vào sản phẩm của mình sau khi cập nhật lên Woocommerce phiên bản 7.7.0, bạn nên biết Woocommerce đã thêm mẫu vào loại bài đăng “sản phẩm”, điều này có thể cản trở việc tùy chỉnh của bạn. Có thể xóa mẫu bằng bộ lọc như thế này:
add_filter('woocommerce_register_post_type_product', function( $args ) {
unset( $args['template'] );
return $args;
});Để thêm đoạn code trên bạn có thể add vào file function.php của child theme mình đang sử dụng hoặc sử dụng plugin này:
Sau khi bạn đã cài đặt plugin, chỉ cần truy cập plugin và tạo đoạn mã mới, dán mã ở trên, thêm mô tả và lưu đoạn mã của bạn. Bạn đã kích hoạt tính năng chặn cho Woocommerce.
Nếu bạn đã có một số sản phẩm trong cửa hàng Woocommerce của mình, bạn sẽ cần chuyển đổi nội dung hiện có của mình thành các khối để sử dụng trình chỉnh sửa khối để chỉnh sửa nội dung đó. Bạn sẽ thấy mô tả sản phẩm hiện tại của mình được liệt kê là nội dung soạn thảo “cổ điển”. Nhấp vào cổ điển để xem hộp thoại cho phép bạn “chuyển đổi thành khối”. Lưu mô tả sản phẩm của bạn và thêm vào đó, tùy chỉnh bằng trình chỉnh sửa khối.
Khi bạn đã thêm mã trên vào trang web WordPress của mình, giờ đây bạn đã mở khóa tất cả các tính năng của trình chỉnh sửa khối cho thiết kế mô tả sản phẩm.
Phương pháp 2: Sử dụng chức năng mới của Woocommerce
Biểu mẫu sản phẩm mới trong Woocommerce được thiết kế để nâng cao trải nghiệm quản lý sản phẩm của bạn. Nó giải quyết nhu cầu về một quy trình chỉnh sửa và tạo sản phẩm đơn giản nhưng mạnh mẽ.
Trải nghiệm mới sẽ cho phép bạn tạo và chỉnh sửa danh sách sản phẩm nhanh hơn biểu mẫu cổ điển của chúng tôi. Nhà phát triển đang nâng cấp công nghệ hậu trường của mình để hoạt động với tính năng chỉnh sửa dựa trên khối, nghĩa là bạn sẽ đạt được hiệu suất nhanh hơn và tốn ít thời gian hơn cho việc cài đặt. Điều này cũng mở đường cho nhiều cải tiến hơn trong tương lai ở các lĩnh vực quản lý cửa hàng khác.
Bạn có thể kích hoạt Biểu mẫu sản phẩm mới bằng cách thực hiện theo các bước dưới đây:
Điều hướng đến WooCommerce > Settings > Advanced > Features.
Chọn “Try new product editor (Beta)” và lưu các thay đổi.
Một số nhược điểm của nó là chưa tương thích với một số theme và plugin tới thời điểm hiện tại nên nó sẽ bị mất một số tính năng.
Sau đó, bạn thêm sản phẩm mới như thông thường”
Với giao diện trực quan, bạn có thể dễ dàng điều hướng qua bốn tab: General, Pricing, Inventory, và Shipping. Điều này cho phép bạn hợp lý hóa và tùy chỉnh chi tiết sản phẩm của mình, đảm bảo quản lý hiệu quả và trải nghiệm chỉnh sửa sản phẩm liền mạch.
Theo nhận xét của mình thì nó khá sáng sủa và dễ nhìn, tùy chỉnh rất dễ đặt biệt là những người chỉ dùng Gutenberg và ghét classic editor (như mình) :).
Một số hình ảnh minh họa để bạn dễ hình dung (nhưng mình khuyên là hãy dùng thử và cảm nhận)
Phần General
Phần giá cả
Phần kho hàng
Phần vận chuyển
Nếu bạn không thích dùng nữa thì tắt nó luôn tại đây.
Kết luận
Với một người chỉ sử dụng Gutenberg và không thích Classic Editor như mình thì mình thấy rất tiện lợi. Mình xây dựng tất cả mọi dự án đều bằng Gutenberg hoặc custom code.
Phương pháp 2 mình giới thiệu vẫn đang ở giai đoạn BETA và chưa hoàn thiện 100%. Để đảm bảo tính ổn định nhưng vẫn tùy biến được nhiều thì mình khuyên dùng phương pháp 1.
Vậy là ok, rồi! Chúc các bạn thành công!
