Dùng Meta Box thêm các trường thông tin cho WooCommerce

WooCommerce là một nền tảng thương mại điện tử cho WordPress được sử dụng khá phổ biến với hơn 23% tổng số website TMĐT trên thế giới. Nền tảng này sẽ giúp bạn tạo nên những cửa hàng trực tuyến kết hợp với các công cụ quản lý cơ bản như tạo giỏ hàng, quản lý vận chuyển, thanh toán, quản lý đơn hàng, thu phí tự động, thuế, …

Mặc dù WooCommerce cung cấp khá nhiều tính năng và công cụ như vậy, nhưng nó vẫn chỉ đáp ứng được những nhu cầu cơ bản của một cửa hàng trực tuyến mà thôi. Nếu sản phẩm của bạn có nhiều thông tin đặc biệt mà WooCommerce không hỗ trợ sẵn thì bạn buộc phải sử dụng một công cụ khác để thêm các trường thông tin tùy biến (custom fields) cho chúng. Trong bài viết này, mình sẽ dùng Meta Box để giúp bạn thêm các trường thông tin như vậy.

Meta Box là gì?

Meta Box là một trong số plugin WordPress hàng đầu giúp tạo và thiết lập các trường tùy biến (custom fields) cho website WordPress.

Meta Box có bản miễn phí trên WordPress.org. Bạn có thể tải plugin này tại đây.

Nếu chỉ sử dụng plugin trên, bạn sẽ cần tự code để có được custom fields như mong muốn.

Nhưng nếu bạn không muốn code, bạn có thể sử dụng một UI miễn phí do chính Meta Box cung cấp là online generator. Mặt khác, bạn cũng có thể mua thêm một extension của Meta Box có tên là Meta Box Builder để có được một UI tạo custom fields ngay trong backend.

Trong bài viết này, mình sẽ hướng dẫn bạn sử dụng cả hai nhé.

Dùng Meta Box để thêm custom fields cho WooCommerce

Cách 1: Dùng Online Generator để tạo field

Bước 1: Tạo các field cần thiết

Bạn truy cập vào đường dẫn này để tạo và thiết lập thông tin cho các field bạn cần.

Đầu tiên, nhập các thông tin chung (bạn có thể bỏ qua bước này):

Nhập thông tin chung

Sau đó, di chuyển đến tab Meta Box và nhập các thông tin chung cho meta box chứa các field bạn muốn tạo:

Nhập thông tin chung cho Meta Box

Ở đây, bạn cần lưu ý ở mục Post types, bạn tùy chọn là post hay page, hay cả hai đều được. Kiểu gì thì chúng ta cũng sẽ cần phải sửa thông tin này trên code ở bước sau, thế nên chọn gì cũng không quan trọng.

Cuối cùng, bạn di chuyển đến tab Fields và tạo các fields bạn muốn:

Tạo fields

Bạn tìm loại fields bạn cần tạo ở khu vực số 1, click vào loại field bạn muốn, thì một field tương ứng sẽ hiển thị ra ở khu vực số 2 để bạn đặt tên và chỉnh sửa thông tin.

Bạn tùy ý chọn loại field với số lượng field mà bạn muốn nhé.

Cuối cùng, nhấn nút Generate Code ở bên dưới để lấy code của toàn bộ meta box cùng các field mà bạn vừa tạo.

Bước 2: Thêm đoạn code của fields vào website

Thông thường, để thêm fields cho website, ở bước này bạn sẽ chỉ cần copy đoạn code vừa nhận được từ công cụ Online Generator vào file functions.php trong thư mục theme của bạn là xong.

Tuy nhiên, đó chỉ là các fields dành cho post hoặc page thôi. Các sản phẩm trên website của bạn thường có một loại post types khác (có thể là ‘product’ chẳng hạn), nên nếu bạn muốn các field này hiển thị trong các bài viết có loại post types là ‘product’ thì bạn cần sửa lại một chút trong chính đoạn code bạn vừa copy.

Post types - Product

Ở vị trí mà mình đánh dấu trong ảnh, bạn thay phần (‘post’, ‘page’) bằng tên loại post types của sản phẩm của bạn là được. Ví dụ mình sẽ sửa thành (‘product’).

Sau khi sửa và lưu file xong, bạn sẽ thấy các field bạn vừa tạo hiển thị ngay bên dưới các bài viết có post type là product.

Cách 2: Dùng Meta Box Builder để tạo field

Trước tiên bạn cần cài Meta Box Builder. Lúc này, bạn sẽ có một giao diện để tạo custom fields ngay trong phần admin dashboard.

Bạn tìm đến menu Meta Box > Custom Fields và chọn Add New để thêm custom fields cho website của bạn.

Thêm Custom fields

Trong giao diện tạo custom fields, tại tab Fields (1), bạn đặt tên cho field group (tức meta box chứa các custom field của bạn) ở vị trí số 2, Meta Box sẽ tự tạo ID tương ứng (số 3) hoặc bạn có thể sửa lại tùy ý.

Tiếp đó, bạn chọn loại field bạn muốn (4) và một field tương ứng sẽ hiển thị để bạn chỉnh sửa thông tin (5).

Chỉnh sửa thông tin

Bạn cứ lặp lại thao tác số (4) và (5) cho đến khi tạo xong tất cả các field bạn cần.

Cuối cùng, bạn di chuyển đến tab Settings và chọn tên loại post type mà bạn muốn hiển thị các field này ở mục Post types.

Chọn post types hiển thị

Ở đây, post type của các bài viết sản phẩm của mình là Product nên ở mục Post types mình cũng chọn là Product.

Bạn nhấn nút Publish để lưu lại các field vừa tạo.

Giờ bạn quay trở lại trang chỉnh sửa bài viết thông tin sản phẩm (post type là Product) bạn sẽ thấy custom fields bạn vừa tạo hiển thị ra.

Hiển thị Custom fields

Hiển thị giá trị của custom field ra Frontend

Bạn thêm đoạn code sau vào file functions.php của theme:

add_action( 'woocommerce_product_meta_end', 'extra_info' );
function extra_info() {
    echo "<div class='extra-info'>";
    if ( $meta = rwmb_meta( 'text_1' ) ) {
        echo '<div>' . __( 'Guaranty: ', 'twentytwenty' ) . $meta . '</div>';
    }
    if ( $meta = rwmb_meta( 'color_1' ) ) {
        echo '<div class="color">' . __( 'Color: ', 'twentytwenty' );
        foreach($meta as $value) {
            echo '<span style="background:'. $value .'"></span>';
        }
        echo '</div>';
    }
    echo "</div>";
}

Trong đó:

  • 'woocommerce_product_meta_end': là hook của woocommerce. Hook này sẽ quy định vị trí hiển thị giá trị của field mà bạn đang thêm vào. Bạn có thể tham khảo một vài loại hook với mô tả vị trí trực quan ở đây để tìm được hook phù hợp với vị trí bạn muốn đặt thông tin.
  • 'text_1''color_1' : là ID của custom field mà chúng ta đã tạo ở trên
  • 'Guaranty: ''Color: ': là tiền tố mình thêm vào để hiển thị cùng với giá trị của field
  • 'twentytwenty' : là tên của theme mà mình đang sử dụng

Lưu ý: Trường 'color_1' của mình có nhiều giá trị, nên mình cần sử dụng vòng lặp để gọi hết các giá trị ra. Các trường thông tin khác mà chỉ có 1 giá trị duy nhất thì bạn sử dụng code như trường 'text_1' là được.

Sau đó, giá trị của các field mà mình thêm vào được hiển thị như sau:

Hiển thị giá trị của fields

Ở đây, phần màu sắc của sản phẩm tạm thời vẫn chưa hiển thị lên, nên mình dùng thêm một chút CSS để style cho phần này.

.extra-info {
    display:flex;
    flex-flow: row wrap;
    margin-top: 10px;
}
.extra-info div {
    width: 100%;
    margin-top: 10px;
}
.extra-info span {
    width:40px;
    height:40px;
    display:inline-block;
    border:1px solid;
    margin: 0 10px;
}
.color {
    display: flex;
    align-items: center;
}

Kết quả, các thông tin của mình hiển thị khá ổn như sau:

Thông tin hiển thị

Lời cuối

Bạn thấy đấy, kết hợp sử dụng WooCommerce và Meta Box thì bạn có thể thêm bất cứ loại thông tin cho sản phẩm nào mà bạn muốn. Việc này đã trở nên dễ dàng hơn khá nhiều với sự hỗ trợ của Meta Box. Chúc các bạn có một gian hàng chất lượng với các sản phẩm đầy đủ thông tin nhé.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *