Trong bài viết này chúng tôi hướng dẫn thêm thông số kỹ thuật vào website WordPress đơn giản bằng plugin advanced custom field nhé.
Nếu các bạn đang có một website bán hàng về công nghệ như máy tính thì chắc chắn những thông số kỹ thuật về sản phẩm rất cần thiết khi show ra cho khách hàng.
Vì vậy chúng ta sẽ đi xây dựng bảng thông số kĩ thuật theo cách sau.
Tạo thông số kỹ thuật trên theme Flatsome
Cài đặt Plugin
Plugin chúng ta sử dụng ở đây là Advanced Custom Field.
Các bạn vào Plugin > Add New > tìm tên plugin Advanced Custom Field tải và kích hoạt nó lên nhé.
Tạo Field Group thông số kỹ thuật
Các bạn tải file Drive này về và import vào plugin Advanced Custom Field bằng đường dẫn Quản trị > Custom Field > Tool
https://drive.google.com/file/d/1yVIqg3hV1mNK7DckXDDgQIVtBxh2jHaW/view?usp=sharing
Từ giờ khi bạn muốn thêm hoặc chỉnh sửa bất kì sản phẩm nào thì nó sẽ có chỗ điền thông tin cho các bạn điền vào.
Bạn thêm thông số kỹ thuật của sản phẩm tại đây nhé.
Hiển thị thông số kỹ thuật ra bên ngoài giao diện
Chúng ta sẽ để đoạn code bên dưới vào Sidebar cho đẹp.
Chọn bố cục cho trang sản phẩm:
Giao diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
Chọn tệp .php quy định layout cho trang sản phẩm.
Giao diện – Sửa – chọn theme gốc Flatsome – Woocommerce – Single-product – Layout
Ở đây mình chọn bố cục cho trang sản phẩm là product-right-sidebar-full.php.
Các bạn Coppy đoạn code này vào đó nhé.
<?php
$bo_nho_trong=get_field('bo_nho_trong');
$camera_chinh=get_field('camera_chinh');
$camera_phu=get_field('camera_phu');
$cpu=get_field('cpu');
$do_phan_giai_man_hinh=get_field('do_phan_giai_man_hinh');
$dung_luong_pin=get_field('dung_luong_pin');
$he_dieu_hanh=get_field('he_dieu_hanh');
$kich_thuoc_man_hinh=get_field('kich_thuoc_man_hinh');
$ram=get_field('ram');$the_sim=get_field('the_sim');
$the_nho=get_field('the_nho');?>
<?php if($bo_nho_trong){?>
<div class="thong-so-ky-thuat" id="thong-so">
<h3 class="tieu-de thong-so">Thông số kỹ thuật</h3>
<div class="row-info">
<div class="left">Bộ nhớ trong</div>
<div class="right"><?php echo $bo_nho_trong;?></div>
</div>
<?php if($camera_chinh){?>
<div class="row-info">
<div class="left">Camera chính</div>
<div class="right"><?php echo $camera_chinh;?></div>
</div>
<?php }?>
<?php if($camera_phu){?>
<div class="row-info">
<div class="left">Camera phụ</div>
<div class="right"><?php echo $camera_phu;?></div>
</div>
<?php }?>
<?php if($cpu){?>
<div class="row-info">
<div class="left">CPU</div>
<div class="right"><?php echo $cpu;?></div>
</div>
<?php }?>
<?php if($do_phan_giai_man_hinh){?>
<div class="row-info">
<div class="left">Độ phân giải màn hình</div>
<div class="right"><?php echo $do_phan_giai_man_hinh;?></div>
</div>
<?php }?>
<?php if($dung_luong_pin){?>
<div class="row-info">
<div class="left">Dung lượng pin</div>
<div class="right"><?php echo $dung_luong_pin;?></div>
</div>
<?php }?>
<?php if($he_dieu_hanh){?>
<div class="row-info">
<div class="left">Hệ điều hành</div>
<div class="right"><?php echo $he_dieu_hanh;?></div>
</div>
<?php }?>
<?php if($kich_thuoc_man_hinh){?>
<div class="row-info">
<div class="left">Kích thước màn hình</div>
<div class="right"><?php echo $kich_thuoc_man_hinh;?></div>
</div>
<?php }?>
<?php if($ram){?>
<div class="row-info">
<div class="left">Ram</div>
<div class="right"><?php the_field('ram');?></div>
</div>
<?php }?>
<?php if($the_sim){?>
<div class="row-info">
<div class="left">Thẻ sim</div>
<div class="right"><?php echo $the_sim;?></div>
</div>
<?php }?>
<?php if($the_nho){?>
<div class="row-info">
<div class="left">Thẻ nhớ</div>
<div class="right"><?php echo $the_nho;?></div>
</div>
<?php }?>
</div>
<?php }?>
Dán vào sau thẻ mở <div id=”product-sidebar”….>
Thêm CSS
Cho PC
Các bạn dán đoạn code này vào file style.css hoặc Custom CSS nhé.
.thong-so-ky-thuat{
border: 1px solid #e9e9e9;
font-size: 14px;
display: inline-block;
border-radius: 5px;
margin-bottom:20px;
}
.thong-so-ky-thuat h3{
margin-bottom: 0;
padding: 10px;
border-bottom: 1px solid #e9e9e9;
background: #fed700;
}
.thong-so-ky-thuat .row-info{
border-bottom: 1px solid #e9e9e9;
padding: 10px 7px;
display: inline-flex;
clear: both;
width: 100%;
}
.thong-so-ky-thuat .row-info .left{
width: 43% !important;
color: #a0a0a0;
display: inline-block;
float: left;
padding-right: 10px;
}
.thong-so-ky-thuat .row-info .right{
width: 57% !important;
color: black;
display: inline-block;
float: left;
padding-left: 10px;
}
.khuyen-mai{
border: 1px solid #ffdb97;
padding: 8px;
font-size: 14px;
border-radius: 4px;
margin-bottom: 15px;
line-height: 18px;
background: #fffbf4;
}
.khuyen-mai h4{
color: red;
}
.khuyen-mai ul{
margin-bottom:0
}
.khuyen-mai ul li {
list-style: none;
background: url(https://alowebtot.com/wp-content/uploads/2021/08/checkkk.png);
background-repeat: no-repeat;
background-size: 14px;
background-position-y: 2px;
padding-left: 22px;
margin-left: 0;
margin-bottom: 10px;}
Cho Mobile
Các bạn dán đoạn code này vào Custom Css mobile nhé.
.product-footer .container {
display: inline-grid;
}
.product-footer .container .large-9 {
order: 1;
}
.product-footer .container .large-3 {
order: -3;
}
Đây là bài hướng dẫn tạo bảng thông số kỹ thuật cho website sử dụng theme Flatsome cực kì đơn giản. Bạn không cần phải biết code chỉ cần biết sao chép và dán đúng phần là được rồi.
