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

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

Tùy biến trang chi tiết sản phẩm

Hiện tại trang sản phẩm của mình đã làm ra như thế này

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

Bây giờ chúng ta sẽ đưa các thông số kỹ thuật ở trong custom field ACF và các tax mà chúng ta đã xây dựng ra ngoài

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

Trong thư mục functions các bạn tạo 2 file php như sau :

  • enqueue-style.php : Chèn file style.css phía dưới tùy biến theme
  • show-thongsokythuat.php : Hiển thị thông số kỹ thuật ra trang chi tiết sản phẩm

Trong thư mục assets tạo file style.css

Sau khi tạo xong 2 file trên thì bạn require_once nó vào file functions.php của child-theme

<?php
/* Tạo các taxonomy do-phan-giai, kieu-dang, cong-nghe-su-dung */
require_once get_stylesheet_directory() . '/functions/enqueue-style.php' ;
/* Tạo các taxonomy do-phan-giai, kieu-dang, cong-nghe-su-dung */
require_once get_stylesheet_directory() . '/functions/add-tax-product.php' ;
/** Hiển thị thông số kỹ thuật ra ngoài trang sản phẩm chi tiết */
require_once get_stylesheet_directory() . '/functions/show-thongsokythuat.php' ;

Code file show-thongsokythuat.php

  • Trong file này chúng ta sẽ lấy 3 filed được tạo trong ACF là ống kính, chống nước và tầm nhìn
  • Đồng thời lấy giá trị các taxonomy đã tạo là Độ phân giải, kiểu dáng, công nghệ sử dụng
<?php 
/** Hiển thị thông số kỹ thuật ra trang chi tiết sản phẩm  */
/**
 * @author  Hồ Danh <vietmaisau102@gmail.com>
 */


function show_thongsokythuat()
{
    $ongkinh = get_field('ongkinh') ;
    $chongnuoc = get_field('chongnuoc') ;
    $tamnhin = get_field('tamnhin') ;

    ?>
<ul class="product-thongso">
    <li><?php the_terms( $post->ID, 'product_cat', '<span class="strong">Danh Mục</span>', ', ', ' ' );  ?></li>
    <li><?php the_terms( $post->ID, 'do-phan-giai', '<span class="strong">Độ Phân Giải</span>', ', ', ' ' );  ?></li>
    <li><?php the_terms( $post->ID, 'kieu-dang', '<span class="strong">Kiểu Dáng</span>', ', ', ' ' );  ?></li>
    <li><?php the_terms( $post->ID, 'cong-nghe-su-dung', '<span class="strong">Công Nghệ</span>', ', ', ' ' );  ?></li>

    <li><span class="strong">Ống Kính</span><?php echo $ongkinh ; ?></li>
    <li><span class="strong">Chống Nước</span><?php echo $chongnuoc ; ?></li>
    <li><span class="strong">Tầm Nhìn</span><?php echo $tamnhin ; ?></li>
</ul>
<div class="product-bosung">
    <ul>
        <li>Gọi đặt mua: 093 192 7579   Hỗ trợ kỹ thuật: 090 194 67 68 (7:30-22:00)</li>
        <li>Chính sách bảo hành chính hãng – Xem chi tiết</li>
        <li>Quy định đổi trả sản phẩm – Xem chi tiết</li>
    </ul>
</div>
    <?php 
}
add_action( 'woocommerce_before_add_to_cart_button', 'show_thongsokythuat') ;

Code file enqueue-style.css

Code này chỉ chèn file assets/style.css đã tạo vào wordpress

<?php 

function mystyle()
{
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/assets/style.css', array(), '1.0.0', 'all' ) ;
}
add_action( 'wp_enqueue_scripts', 'mystyle') ;

Code CSS cho file style.css

/* CSS TÙY BIẾN */

/* --------------------------- SINLE PRODUCT --------------------------- */
.product-thongso
{
    list-style: none;
    width: 100%;
    padding: 0px !important;
    margin: 0px !important;
}
.product-thongso li
{
    background: #eee;
    padding: 0.3em 0.5em;
    border-left: 3px solid #FF9800;
    width: 100%;
    margin-left: 0px !important;
    box-sizing: border-box !important;

}
.product-thongso li span.strong
{
    width: 110px !important;
    display: inline-block;
}
.product-thongso li a
{
    color: #FF9800 !important;
}
.product-bosung
{
    padding: 0.5em;
    border: 1px solid #FF9800;
    font-size: .9em;
    background: #fff;
    margin-bottom: 1em;
    border-radius: 3px;
}

Kết quả trang chi tiết sản phẩm

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

Như vậy là tương đối giống với trang demo mà chúng ta cần làm rồi. Tất nhiên bạn chỉ cần làm giống giống nó thôi, không cần phải làm giống 100%

Kiểu như bạn thấy hợp lý là được.

Bonus: Bạn thêm đoạn css này vào file assets/style.css để custom lại table trong bài viết cho dễ nhìn

/* CSS Table trong nội dung ( content ) bài viết sản phẩm */
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #ddd;
  padding: 8px !important;
}

table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

 

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