Nội dung

Sắp xếp lại nội dung trên Trang sản phẩm WooCommerce

4 năm trước, Woocommerce, 821 Lượt xem

Một trang sản phẩm duy nhất trong WooCommerce thường chứa thông tin chi tiết về sản phẩm, được sắp xếp và hiển thị theo một cách cụ thể. Một số chủ đề tương thích với WooCommerce, đôi khi thay đổi thứ tự tóm tắt sản phẩm. Ví dụ: giả sử một chủ đề có thể hiển thị mô tả sản phẩm trong một tab riêng biệt, cùng với các bài đánh giá, thay vì bên dưới tiêu đề.

Nhưng chỉ có rất nhiều chủ đề làm sẵn có thể làm được. Thứ tự tóm tắt được xác định trước. Điều gì sẽ xảy ra nếu bạn muốn một cái gì đó khác biệt. Chà, WooCommerce là một plugin được xây dựng tốt. Nó cung cấp một số móc nối, mà bạn có thể sử dụng, để thay đổi thứ tự của nội dung trên trang tóm tắt sản phẩm. Những thay đổi này sẽ phải được thực hiện trong functions.php của chủ đề của bạn hoặc chủ đề con của bạn.

Các móc tóm tắt sản phẩm đơn lẻ của WooCommerce

Nội dung hiển thị trên một trang tóm tắt sản phẩm được hiển thị trên ba hành động. Bạn có thể thấy những hành động này đang được thực thi trong ‘woocommerce/templates/content-single-page.php‘.

/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );

Mỗi chi tiết sản phẩm được hiển thị trên móc cho một hành động. Số lượng liên kết với mỗi hook về cơ bản đặt mức độ ưu tiên của việc thực thi. Giảm số lượng, mức độ ưu tiên thực hiện cao hơn. Vì vậy, trên ‘woocommerce_single_product_summary‘ , thứ tự hiển thị sẽ là, tiêu đề sản phẩm, giá, đoạn trích, thêm vào giỏ hàng, meta và liên kết chia sẻ, do các trọng số liên quan.

Để thay đổi thứ tự, bạn phải thay đổi mức độ ưu tiên liên quan và WordPress sẽ đảm nhận việc hiển thị nội dung theo thứ tự đã nói. Để thay đổi mức độ ưu tiên, bạn cần bỏ dấu móc và thêm lại bằng một số mới.

Do đó, nếu bạn muốn hiển thị đoạn trích sau nút thêm vào giỏ hàng, trọng lượng của móc đoạn trích phải nhiều hơn móc nút thêm vào giỏ hàng, cho biết mức độ ưu tiên thấp hơn.

/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );

Biến nó thành của riêng bạn: Hiển thị các trường tùy chỉnh

Dữ liệu tùy chỉnh có thể được thêm vào loại bài đăng tùy chỉnh WooCommerce ‘Sản phẩm’, sử dụng các hộp meta hoặc bằng Plugin Trường tùy chỉnh nâng cao . Để hiển thị dữ liệu trường tùy chỉnh này trên trang tóm tắt sản phẩm, bạn sẽ phải tạo một hàm hiển thị các trường và kết nối nó với một hành động WooCommerce, cùng với mức độ ưu tiên mong muốn.

Ví dụ: nếu bạn muốn hiển thị các trường tùy chỉnh sau phần trích dẫn sản phẩm nhưng trước khi thêm vào giỏ hàng, bạn sẽ phải viết một hàm tương tự như bên dưới.

function wdm_add_custom_fields()
{
    /** if your have added information using a metabox **/
    echo 'ABC'.get_post_meta(get_the_ID(), "ABC", true);
    /** if you have used ACF to add custom fields **/
    echo 'XYZ'.get_field(“XYZ”);
}
add_action( 'woocommerce_single_product_summary', 'wdm_add_custom_fields', 21 );

Hãy nhớ rằng, những thay đổi này phải được thực hiện trong tệp functions.php .

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    2 năm trước, 456 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    2 năm trước, 295 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)