Thay đổi vị trí hiển thị Related Products trong Woocommerce

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 29/12/20.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Giúp mình thay đổi vị trí hiển thị của sản phẩm liên quan (Product Related) trong phần chi tiết sản phẩm như thế nào vậy. Hiện tại nó đang ở dưới nội dung content, mình vào code thì thấy nó ghi như dưới, có phải đó là thứ tự hiển thị không? làm sao thay đổi thứ tự này.
    Mã:
    * @hooked woocommerce_output_product_data_tabs - 10
    * @hooked woocommerce_upsell_display - 15
    * @hooked woocommerce_output_related_products - 20
    Như hình dưới, mình muốn đổi thứ tự hiện thị nó từ dưới lên trên chỗ tab product như hình mình vẽ thì làm như thế nào?

    Mình xài themes Flatsome phiên bản mới nhất

    thay-doi-vi-tri-hien-thi-related-product-wordpress.jpg
     
    Cảm ơn đã xem bài:

    Thay đổi vị trí hiển thị Related Products trong Woocommerce

  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Mấy cái hooked number đó đúng là vị trí hiện thị ha bạn, hay còn gọi là thứ tự gọi code của web, cái nào được gọi trước thì nó cho hiển thị trước.

    Để thay đổi thứ tự này bạn add code sau vào function.php của themes nhé:

    Mã:
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 5 );
    
    Muốn đổi nó qua slider bar của sản phẩm thì add code:
    PHP:
    remove_action'woocommerce_after_single_product_summary''woocommerce_output_related_products'20 );
    add_action'flatsome_before_product_sidebar''woocommerce_output_related_products'20 );
    Các vị trí thay đổi khác bạn tham khảo:
    Mã:
    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
    remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
    remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
    remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
    remove_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
    
    // Before content
    add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
    add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
    add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
     
    // Left column
    add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
    add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
    add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
    // Right column
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
    // Right column - add to cart
    do_action( 'woocommerce_before_add_to_cart_form' );
    do_action( 'woocommerce_before_add_to_cart_button' );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
    add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
    add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
    add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
    add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
    add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
    add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
    do_action( 'woocommerce_before_quantity_input_field' );
    do_action( 'woocommerce_after_quantity_input_field' );
    do_action( 'woocommerce_after_add_to_cart_button' );
    do_action( 'woocommerce_after_add_to_cart_form' );
    // Right column - meta
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
    do_action( 'woocommerce_product_meta_start' );
    do_action( 'woocommerce_product_meta_end' );
    // Right column - sharing
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
    do_action( 'woocommerce_share' );
    // Tabs, upsells and related products
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );
    do_action( 'woocommerce_product_after_tabs' );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
    add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
    // Reviews
    add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
    add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
    add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
    do_action( 'woocommerce_review_before_comment_text', $comment );
    add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );
    do_action( 'woocommerce_review_after_comment_text', $comment );
    // After content
    do_action( 'woocommerce_after_single_product' );
    do_action( 'woocommerce_after_main_content' );
    
    hook-visual-guild-of-single-product.jpg
     
    Chỉnh sửa cuối: 26/3/24 lúc 11:19 AM
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Dạ em cảm ơn, em đã áp dụng được cách admin chỉ
     
  4. nguyenphuvien
    Tham gia ngày:
    18/7/21
    Bài viết:
    2
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Chào admin, nhờ admin hổ trợ mình với ạ
    Mình muốn Sản phẩm tương tự nó hiển thị cuối cùng của trang sản phẩm thì làm code nào ạ
     
    Last edited by a moderator: 12/10/21
  5. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    sorry giờ mình mới thấy, để cho xuống dưới cùng thì dùng code:
    PHP:
    remove_action'woocommerce_after_single_product_summary''woocommerce_output_related_products'20 );
    add_action'woocommerce_after_single_product''woocommerce_output_related_products'20 );
    Xem tất cả các hook của trang chi tiết sản phẩm tại link sau: https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
     
    Chỉnh sửa cuối: 12/10/21
    nguyenphuvien thích bài này.
  6. nguyenphuvien
    Tham gia ngày:
    18/7/21
    Bài viết:
    2
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Em cảm ơn anh, em thêm code vào nó xuống dưới rồi ạ. Mà cái dòng Sản Phẩm Tương Tự nó chạy ra ngoài trên PC. Em muốn cho nó vào bằng với mấy cái khác. anh cho em đoạn code css với. Em cảm ơn anh nhiều ạ
     
    Last edited by a moderator: 12/10/21
  7. HoangDat
    Tham gia ngày:
    21/9/22
    Bài viết:
    2
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Nếu mình muốn làm sidebar như thế này thì làm thế nào ạ[​IMG]
    Đây là ảnh của trang sản phẩm
    [​IMG]
    Và đây là cái sidebar của nó.