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,047
    Đã được thích:
    81
    Đ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

    seolagi, 29/12/20
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Đ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é:


    PHP:
    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: 11/4/24
    admin, 29/12/20
    #2
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Điểm thành tích:
    48
    Dạ em cảm ơn, em đã áp dụng được cách admin chỉ
     
    seolagi, 29/12/20
    #3
  5. 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
    nguyenphuvien, 18/7/21
    #4
  6. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Đ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
    admin, 12/9/21
    #5
    nguyenphuvien thích bài này.
  7. 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
    nguyenphuvien, 13/9/21
    #6
  8. 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ó.
     
    HoangDat, 21/9/22
    #7


Chủ để tương tự : Thay đổi
Diễn đàn Tiêu đề Date
Mã nguồn mở Wordpress Thay đổi số lượng sản phẩm hiển thị trên 1 trang và 1 dòng WooCommerce 2/3/21
Mã nguồn mở Wordpress Thay đổi chiều dài mô tả Lenght Excerpts trong chuyên mục themes Flatsome 6/1/21
Mã nguồn mở Wordpress Thay đổi icon wordpress đảm bảo 100% thành công 17/8/17
Mã nguồn mở Wordpress Lỗi Header logo drak src không tìm thấy trong flatsome wordpress 3/6/23
Mã nguồn mở Wordpress Đổi chữ title tiêu đề trong form bình luận wordpres như thế nào? 5/8/23