Chào mọi người đã đến với blog của mình, hôm nay mình sẽ viết tiếp tục seri giới thiệu các hook có trong Flatsome để mọi người tham khảo nhé. Và bài viết hôm nay sẽ giới thiệu đến các bạn các hook có trong product page của theme Flatsome nhé. Các bạn có thể tham khảo lại 2 phần mà mình đã viết trước đây nhé.

Hook nằm ở header của Flatsome

Ở header của Flatsome có một hook tên là

flatsome_after_header

Các bạn lưu ý khỉ sử dụng hook này, vì hook này sẽ hiển thị ở hầu hết các trang, các post và product của theme Flatsome. Chính vì vậy phải có điều kiện ràng buộc hiển thị.

Dưới đây là ví dụ, mình chi echo tên của mình và add vào hook flatsome_after_header thì nó sẽ ra như sau:

function flatsome_product_header(){
    echo 'thành tuấn';
}
add_action('flatsome_after_header','flatsome_product_header');

Thì kết quả sẽ như thế này

Hiển thi ở trang chủ
Hiển thị ở trang sản phẩm
Hiển thị ở post
Hiển thị ở category

Như các bạn thấy thì hook này hiển thị ở tất cả các trang nên chúng ta sẽ cần thêm các điều kiện ràng buộc.

Dưới đây là một số các điều kiện.

if( is_product() ){
     /*Hiển thị trong trang product page*/
}
if( is_single() ){
     /*Hiển thị trong post*/
}
if( is_product_category() ){
     /*Hiển thị trong product category*/
}
if( is_category() ){
     /*Hiển thị trong product category*/
}
if( is_front_page() && is_home() ){
     /*Hiển thị trong trang chủ*/
}

Công dụng

Vị trí của hook này nằm ở ngay dưới thẻ <head> nên thường sẽ được dùng để chèn breadcrumb hoặc sử dụng làm notification (Thông báo gì đó ^^).

Hook flatsome_product_title

Hook này chỉ được kích hoạt khi chọn 3 chế độ này.

Hook flatsome_product_title chỉ được kích hoạt khi chọn 3 chế độ product header này
function flatsome_product_page_breadcrumbs(){
  echo 'thanhtuan';
}
add_action('flatsome_product_title','flatsome_product_page_breadcrumbs');

Và kết quả

Vị trí hiển thị của hook flatsome_product_title

Công dụng

Bạn có thể chèn banner hoặc bất kì 1 block hoặc HTML nào ở vị trí này cũng được.

Hook flatsome_before_product_sidebar

Hook này sẽ nằm ở bên sidebar của product page, hiện tại thì hook này đang được sử dụng để hiển thị sản phẩm upsale.

Mình sẽ thêm đoạn code này vào để xem vị trí hiển thị của hook nhé.

function flatsome_product_sidebar_pttuan(){
    echo 'Thành Tuấn';
}
add_action('flatsome_before_product_sidebar','flatsome_product_sidebar_pttuan', 1);

Các bạn có thể thấy được tên mình đã được hiển thị ở bên phí sidebar nhé.

Vị trí hiển thị của hook flatsome_before_product_sidebar

Thường thì chỗ này mình cũng không cần can thiệp làm gì, vì mình hoàn toàn có thể sử dụng chức năng sidebar của product là được rồi.

Hook woocommerce_product_description_heading

Hook này thích hợp cho các bạn muốn thêm 1 header mặc định cho tất cả các sản phẩm, hook này sẽ sử dụng thẻ H2 các bạn nhé. Để hiểu rõ hơn thì mình sẽ ví dụ cụ thể cho các bạn xem. Đoạn code dưới đây mình sẽ chèn text mặc định “Giói thiệu về sản phẩm …”

function add_heading_custom($heading){
     return $heading = 'Giới thiệu về sản phẩm '.get_the_title();
}
add_filter('woocommerce_product_description_heading','add_heading_custom',100);

Và kết quả sẽ như thế này

Add 1 custom heading mặc định vào phần mô tả của sản phẩm.

Các bạn lưu ý khi sử dụng hook này nhé, vì phần này chúng ta có thể custom được trong lúc nhập sản phẩm, nên chỗ này nhiều khi không cần thiết. Tuy nhiên nếu biết cách khai thác thì biết đâu lại hữu ích cho các bạn đúng không ^^.

Chỗ này chúng ta có 1 hook tương tự áp dụng cho thông tin khác.

woocommerce_product_additional_information_heading

Hook flatsome_product_image_tools_bottom

Nghe tên gọi là các bạn có thể đoán được nó nằm ở đâu rồi đúng không. Hook này hiện đang được sử dụng để hiển thị nút play video. Trong trường hợp bạn sử dụng video trong sản phẩm thì sẽ dễ dàng thấy được nó nằm ở góc trái bên dưới của hình sản phẩm. Xem ví dụ dưới đây để hiểu rõ nó nhé.

function add_text_flatsome_product_image_tools_bottom(){
     echo '<div>Thành tuấn</div>';
}
add_action('flatsome_product_image_tools_bottom','add_text_flatsome_product_image_tools_bottom');

Kết quả

Vị trí của hook flatsome_product_image_tools_bottom

Tiện đây bạn nào muốn remove cái button video và cái button mở lightbox phóng to thì làm theo code dưới đây nhé.

function remove_default(){
    remove_action('flatsome_product_image_tools_bottom','flatsome_product_video_button', 1);
    remove_action('flatsome_product_image_tools_bottom','flatsome_product_lightbox_button', 2);
}
add_action('init','remove_default');

Hook flatsome_before_product_page

Hook này sẽ hiển thị ở ngay sau thẻ mở “main” của product. Để biết chính xác vị trí, các bạn nên mở F12 lên để xem nhé. Ví dụ

function add_text_flatsome_before_product_page(){
     echo '<div>Thành tuấn</div>';
}
add_action('flatsome_before_product_page','add_text_flatsome_before_product_page');

Kết quả.

Vị trí của hook flatsome_before_product_page

Hook flatsome_after_product_page

Có before thì dĩ nhiên sẽ phải có after, các bạn thêm đoạn code sau và kiểm tra vị trí của nó nhé.

function add_text_flatsome_before_product_page(){
     echo '<div>Thành tuấn</div>';
}
add_action('flatsome_after_product_page','add_text_flatsome_before_product_page');
Hiển thị vị trí của flatsome_after_product_page

Before nằm sau thẻ mở “main” thì after sẽ nằm trước thẻ đóng “main” nhé.

Hook của Flatsome ở product page có khá là nhiều, tuy nhiên có một số cái không thật sự cần thiết lắm hoặc Flatsome đã làm khá tốt các khu vực đó nên mình sẽ dừng ở đây nhé. Mình sẽ giới thiệu về các hook của woocommrece cũng nằm ở ngay trang product page ở bài viết sau nhé, các bạn nhớ đón xem.

BONUS

Để cảm ơn các bạn đã theo dõi bài viết này, mình sẽ hướng dẫn các bạn để có thể chèn nút like như thằng Thegioididong nhé.

Giống vậy nè

Để có thể chèn vào vị trí này, mình sẽ sử dụng hook

flatsome_before_product_sidebar

Đầu tiên các bạn vào trang https://developers.facebook.com/docs/plugins/like-button và thực hiện theo các bước sau:

Chèn link cần like để lấy code

Các bạn lưu ý nên set up giống như hình để nút được thon gọn và đẹp, các bạn cũng có thể tùy chỉnh theo ý thích của mình nhé. Sau đó chúng ta sẽ tiến hành lấy code.

Lấy code like bài viết

Cũng tương tự như cách nhúng video facebook lên website, các bạn cần phải có ID ứng dụng nhé.

Sau khi đã có code rồi thì chúng ta tiến hành chèn vào hook thôi. Các bạn có thể thực hiện theo đoạn code sau nhé.

function add_text_flatsome_before_product_sidebar(){
     echo '<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2F127.0.0.1%2Ftheme10%2Fmua%2Fchua-phan-loai%2Ftablet-sao-chep%2F&width=145&layout=button_count&action=like&size=small&share=true&height=46&appId=2630395953942004" width="145" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>';
}
add_action('flatsome_before_product_sidebar','add_text_flatsome_before_product_page',-1);

Vì Flatsome đã sử dụng hook này ở vị trí số 0 rồi, nên mình sẽ sử dụng nó ở vị trí -1.

Và kết quả cuối cùng sẽ như thế này.

Hiển thị nút like bài viết giống TGDD

Như vậy là xong, hook của Flatsome đã có sẵn, việc sử dụng nó như thế nào là của các bạn nhé, hi vọng bài viết sẽ giúp ích cho các bạn.

Donate ủng hộ tinh thần

Có bất kì câu hỏi nào thì hãy gửi về cho mình nhé, mình sẽ cố gắng giải đáp trong thời gian sớm nhất

Ủng hộ mình một ly cà phê nhé: Vì đầy là động lực để mình có thể giúp đỡ mọi người nhé.

Ủng hộ bằng momo:

9 thoughts on “Một số hook cơ bản của Flatsome, woocommerce P.3 – Hook trong product page.

    • Thành Tuấn says:

      Hook mô tả ngắn của sản phẩm là

      woocommerce_single_product_summary

      , nó được gọi ra bằng

      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

      Bạn muốn làm gì với nó

      • Nguyên Khôi says:

        Cho mình hỏi: Mình muốn thêm content ở phía trên mô tả ngắn của sản phẩm thì sử dụng ntn nào ạ
        Code của mình:
        function woocommerce_template_single_excerpt() {
        ?>

        Phiên bản

        <?php
        };
        add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
        Tuy nhiên mình chỉ hiển thị mỗi cái mình mới thêm vào còn phần mô tả ngắng bị mất, Mong bạn hướng dẫn mình fix cái này ạ

        • Thành Tuấn says:

          Bạn code vậy là sai rùi, bạn thử ntn nhé.

          function them_trc_mo_ta_pttuan(){;?>
          Cái gì đó
          <?php };
          add_action('woocommerce_single_product_summary', 'them_trc_mo_ta_pttuan', 19 );

          Như thế này mới đúng

    • Thành Tuấn says:

      Hiện tại thì mình có 1 cách, đó là chụp hình nhìu ảnh và ghép thành 1 ảnh, sau đó dùng css để di chuyển khung hình hiển thị ảnh là được.

Trả lời

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 *