Cách đưa thuộc tính sản phẩm vào Product Loop Woocommerce

Có thể nói đối với dân Amateur như mình, việc Insert & lôi được các thuộc tính của sản phẩm ra ngoài luôn là điều rất được quan tâm. Điều này sẽ giúp bạn giải quyết rất nhiều vấn đề quan trọng trong việc hiển thị thông tin website. Hãy cùng Nam Digital đi tới một số ví dụ

Preview & một số ví dụ

Dự án v2holiday mà Nam đang đảm trách, mình muốn lôi những thuộc tính như: “Địa điểm, phân loại & thương hiệu” ra bên ngoài Product Loop để đảm bảo hiển thị được nhiều thông tin hơn, giúp khách hàng có thể truy cập & browsing dễ dàng

Như bạn thấy ở hình, việc bổ sung nhiều thông tin giúp bạn tạo ra nhiều layout giao diện đẹp hơn, đồng thời cung cấp nhiều thông tin quan trọng cho khách hàng.

Những website về bất động sản, việc sử dụng các trường như phòng tắm, phòng ngủ, diện tích để hiển thị ra ngoài Loop vô cùng quan trọng. Đây cũng chính là thách thức không nhỏ cho dân kéo thả như mình.

Cách tích hợp Code trên function.php

Sau khi dành thời gian tìm kiếm trên mạng, Nam đã tìm được giải pháp cho vấn đề này. Dưới đây là đoạn Code & một chút diẽn giải

add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
function display_custom_product_attributes_on_loop() {
    global $product;

    $value1 = $product->get_attribute('Square meters');
    $value2 = $product->get_attribute('Rooms');
    $value3 = $product->get_attribute('Toilets');

    if ( ! empty($value1) || ! empty($value2) || ! empty($value3) ) {

        echo '<div class="items" style="color: red;"><p>';

        $attributes = array(); // Initializing

        if ( ! empty($value1) ) {
            $attributes[] = __("Square meters:") . ' ' . $value1;
        }

        if ( ! empty($value2) ) {
            $attributes[] = __("Rooms:") . ' ' . $value2;
        }

        if ( ! empty($value3) ) {
            $attributes[] = __("Toilets:") . ' ' . $value3;
        }

        echo implode( '<br>', $attributes ) . '</p></div>';
    }
}

Hãy cùng phân tích một chút

add_action là hành động chèn một chức năng được định nghĩa sẵn vào Hook của Woocommerce, mà ở đây Hook đó là woocommerce_after_shop_loop_item_title. Hook này là một điểm neo nằm ngay dưới tiêu đề của sản phẩm

Ở ví dụ trên định nghĩa 3 biến là value1, 2, 3, 3 biến này sử dụng hàm get_attribute(‘Tên của thuộc tính’) để gọi các thuộc tính ra. Bạn lưu ý rằng tên thuộc tính này phải được định nghĩa trước ở phần “Sản phẩm -> Thuộc tính”

Phần dưới thì mình không rõ lắm, nhưng theo ý hiểu của mình là nếu 3 trường này không rỗng thì sẽ gọi ra giá trị của 3 trường sau đó dùng implode để nối chúng lại, ngăn cách nhau bằng dấu xuống dòng.

Phần Square metter:, Toilets: , Rooms: là nhãn của các thuộc tính, nên bạn có thể sửa thoải mái. Bạn cũng có thể đưa các hàm này vào các div được định nghĩa bởi bootstrap. Nếu các thuộc tính có class ngang nhau thì bạn có thể dùng implode để nối các trường cho nhanh.

Code tổng quát

add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_attributes_on_loop', 5 );
function display_custom_product_attributes_on_loop() {
    global $product;

    // Settings: Here below set your product attribute label names
    $attributes_names = array('Square meters', 'Rooms', 'Toilets');

    $attributes_data  = array(); // Initializing

    // Loop through product attribute settings array
    foreach ( $attributes_names as $attribute_name ) {
        if ( $value = $product->get_attribute($attribute_name) ) {
            $attributes_data[] = $attribute_name . ': ' . $value;
        }
    }

    if ( ! empty($attributes_data) ) {
        echo '<div class="items" style="color: red;"><p>' . implode( '<br>', $attributes_data ) . '</p></div>';
    }
}

Code này vẫn tương tự như vậy, nhưng chỉ khác là bạn không cần phải định nghĩa 3 thuộc tính một cách lần lượt nữa. Lúc này bạn có thể dùng foreach để tạo vòng lặp cho đến khi đủ 3 trường thì thôi. Sau đó lại dùng implode để nối chúng vào và hiển thị nằm trong thẻ div với class là items

Kết luận

Đây là những đoạn code hết sức hữu ích để bạn tùy biến wordpress. Hy vọng bài viết sẽ giúp ích cho bạn

Nếu bạn muốn đóng góp cho blog thì đừng ngần ngại để lại cho mình những góp ý vô cùng quý giá nhé

About nguyenbahoangnam

Đam mê Digital Marketing, Web Development, Fitness & Healthy Diet đồng thời cũng là Fan cuồng của lối sống tối giản ^^!. Quyết tâm khai quật nghiệp "nhà văn"

Leave a Comment

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 *