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

    seolagi

    Moderator

     Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    919
    Đã được thích:
    75
    Điểm thành tích:
    28
    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

    Lượt xem: 1,692 - Xem Bài Viết Cùng Chủ Đề

    seolagi, 29/12/20
    #1
  3. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,589
    Đã được thích:
    1,125
    Đ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 );
     
    Chỉnh sửa cuối: 28/1/21
    admin, 29/12/20
    #2
  4. seolagi

    seolagi

    Moderator

     Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    919
    Đã được thích:
    75
    Điểm thành tích:
    28
    Dạ em cảm ơn, em đã áp dụng được cách admin chỉ
     
    seolagi, 29/12/20
    #3
  5. nguyenphuvien

    nguyenphuvien Thành Viên Mới

    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

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,589
    Đã được thích:
    1,125
    Đ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

    nguyenphuvien Thành Viên Mới

    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


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 Update price, đổi giá hàng loạt trên phpmyadmin data table woocommerce 14/6/22
Mã nguồn mở Wordpress Đổi ký hiệu tiền tệ đ sang VNĐ nhứ thế nào trong Woocommerce Wordpress 31/5/22

Like và Share ủng hộ ITSEOVN