Plugin Advanced custom field (ACF) được sử dụng khá phổ biến để xây dựng website bởi tiện ích của nó mang lại. Tuy nhiên để sử dụng nó để áp dụng vào dự án thực tế là cả 1 vấn đề với 1 số bạn mới tiếp cận WP. Bài viết này mình sẽ hướng dẫn hiển thị các trường tùy biến (ACF) trong Flatsome.
Tuy nhiên để làm được bạn cũng lên tìm hiểu về WooCommerce Hook, bạn có thể tham khảo tại đây =>> Woocommerce Tutorials
Sau khi nắm được vị trí cần hiển thị trường tuỳ biến thì các bạn sẽ tiến hành viết code cho hiển thị nó
Hướng dẫn hiển thị các trường tùy biến (ACF) trong Flatsome
Trong ví dụ này mình hướng dẫn thêm trường thông số sản phẩm máy lạnh
Bước1: Cài đặt plugin ACF
Trong ví dụ này mình chỉ cần tải phiên bản ACF miễn phí là được
Bước 2: Tạo Trường ACF
Quan trọng là sau khi thêm field các bạn nhớ chọn post Type -> Product
Bước 3: Code hiển thị
Vi dụ này mình muốn hiển thị các field cho sản phẩm tai trang Shop – Muốn hiển thị tại trang chi tiết thì theo dõi bài viết sau nhé
Dán đoạn code sau vào function.php check kết quả nhé
add_action( ‘woocommerce_after_shop_loop_item_title’,’ins_woocommerce_product_excerpt’,35,2);
function ins_woocommerce_product_excerpt() {
global $post;
if ( is_front_page() || is_shop() || is_product_category() || is_product_tag() ) {
echo ‘<span class=”excerpt”>’;
echo ‘<span style=”color:#0000ff;”><strong>’.get_post_meta( $post->ID,’cf_inverter’,true ).'</strong></span>’.'</br>’;
echo ‘Công suất:’.'<span style=”color:#ff0000;”><strong>’.get_post_meta( $post->ID,’cf_ma_luc’,true ).'</strong> </span>’.'</br>’;
echo ‘Môi chất: ‘.get_post_meta( $post->ID,’cf_moi_chat’,true ).'</br>’;
echo get_post_meta( $post->ID,’cf_bao_hanh’,true );
echo ‘</span>’;
}
}
Trong đó hàm get_post_meta( $post->ID,’cf_inverter’,true ) lấy giá trị acf filed có name là cf_inverter như hình bên dưới:
Kết:
Ứng dụng của ACF là rất nhiều ae có thể tham khảo thêm, thắc mắc hoặc cần hỗ trợ kĩ thuật thì có thể inbox trực tiếp hoặc để lại comment phía dưới mình sẽ rep lại.
Chúc bạn thành công
Bài viết liên quan: