Xây dựng website bán hàng với Flatsome phần 6

Xây dựng website bán hàng với Flatsome phần 6 – Show một số field ra ngoài list product

Ở trang demo gotechcamera.com họ đưa giá trị các field ra ngoài trang chủ và các trang lưu trữ sản phẩm, bài này mình sẽ đưa ra nó luôn nhé.

 

Xây dựng website bán hàng với Flatsome phần 6

Bạn mở file show-thongsokythuat.php lên và dán thêm đoạn code này vào

/**
 *
 * Hiển thị thông số kỹ thuật ra trang danh sách sản phẩm
 */

function show_fields_list_product()
{
    $ongkinh = get_field('ongkinh') ;
    $tamnhin = get_field('tamnhin') ;

    ?>
<ul class="list-product-info">
    <li><span class="trong">Góc Quan Sát : </span><?php echo $ongkinh; ?></li>
    <hr>
    <li><?php the_terms( $post->ID, 'do-phan-giai', '<span class="strong">Độ Phân Giải : </span>', ', ', ' ' );  ?></li>
    <li><?php the_terms( $post->ID, 'cong-nghe-su-dung', '<span class="strong">Công Nghệ : </span>', ', ', ' ' );  ?></li>
    <li><span class="strong">Tầm nhìn : </span><?php echo $tamnhin; ?></li>

</ul>
    <?php 
}
add_action( 'flatsome_product_box_after', 'show_fields_list_product' ) ;

p/s: flatsome_product_box_after là hook do flatsome cung cấp tại đây https://docs.uxthemes.com/article/385-hooks

Khi bạn móc vào hook này thì dữ liệu sẽ nằm phía dưới box product trong các trang danh sách sản phẩm.

Xây dựng website bán hàng với Flatsome phần 6

Bây giờ css nó lại một xíu cho dễ nhìn, copy code này dán thêm vào assets/style.css

p/s: Trường hợp bạn css xong mà nó ko có thay đổi thì gì bạn vào đường dẫn http://localhost/flatsome/wp-content/themes/web-ban-hang/assets/style.css sau đó nhấn F5 để reload lại CSS ( vì nó dính cache của trình duyệt nên chưa thấy thay đổi, bạn reload lại là được )

.list-product-info
{
    margin-top: 1em;
    padding: 0px;
    list-style: none;
    text-align: left;
}
.list-product-info li
{
    padding: 0px;
    font-size: 0.8em;
}
.list-product-info li a
{
    color: #FF9800 !important;
}

Bài này chỉ bây nhiêu thôi, bài sau mình sẽ làm phần footer cho site

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments