Chào các bạn, nếu bạn đang tạo website bán các sản phẩm điện thoại thì chắc chắn cần một bảng thông số kỹ thuật như CPU, RAM, bộ nhớ, thông số màn hình, thông số camera, … đúng không? Tôi đã làm khá tốt bảng thông số kỹ thuật này và tôi muốn chia sẻ nó với bạn.

Mục đích của bài viết này là giúp những bạn chưa biết code hoặc biết một chút code có thể tự tạo phần thông số kỹ thuật cho website bán điện thoại của mình mà không phải trả tiền thuê hay nhờ người khác làm.

Thực ra cũng không quá phức tạp, bạn cứ làm theo từng bước như tôi hướng dẫn. Tuy nhiên, tôi đang sử dụng giao diện Flatsome cho hướng dẫn này nên bất kỳ ai sử dụng Flatsome có thể làm theo hướng dẫn tương tự và những người sử dụng thiết kế khác có thể liên hệ với tôi để được hướng dẫn thêm.

[Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields

Hướng dẫn tạo phần thông số kỹ thuật trên Flatsome

Bước 1: Cài đặt plugin Advanced Custom Field

Bạn vào trang quản trị WordPress, vào phần Plugins – New Install – Gõ “Advanced Custom Field” vào ô tìm kiếm trong kho plugin miễn phí của WordPress. (Nếu đủ tiền mua bản PRO thì càng tốt, nhưng thực tế thì bản miễn phí cũng đủ giúp chúng ta làm bài này).

Sau khi bạn đã cài đặt thành công, bạn có thể kích hoạt plugin này để có thể sử dụng.

Bước 2: Tạo Filed Group Thông Số Kỹ Thuật

Đây là một Filed Group mà tôi đã chuẩn bị cho bạn. Tất cả những gì bạn phải làm là tải chúng xuống, nhập chúng vào plugin “Advanced Custom Field” và sử dụng chúng.

Tải xuống tại đây: https://drive.google.com/file/d/1qsMP3xUvHd3vMSLdgjVVlu59EUSmfXwv/view?usp=sharing

Sau khi tải xong nhóm trường, hãy vào Quản trị – Custom Field – Tools.

Sau khi nhập tệp ACF ở trên, kể từ giờ, khi bạn chỉnh sửa bất kỳ sản phẩm nào, nó sẽ thêm các trường mới để bạn nhập thông tin (nằm cuối bài), ví dụ:

Bây giờ nhập thông số kỹ thuật và thông tin khuyến mại cho sản phẩm. Nhập ít nhất 1 sản phẩm để dễ dàng nhận thấy sự thay đổi sau các bước tiếp theo.

Đây chỉ đơn giản là tạo trường tùy chỉnh cho Post Type = Product, tức là hệ thống cho phép bạn thêm trường tùy chỉnh để đưa nhiều dữ liệu vào sản phẩm trong backend, quan trọng hơn chúng ta phải gọi nó để hiển thị ra bên ngoài.

Bước 3: Hiển thị ra bên ngoài giao diện người dùng

Hiển thị bảng thông số kỹ thuật

Bạn có thể để datasheet này ở bất cứ đâu, nhưng theo tôi nó nên để ở sidebar cho đẹp.

Đối với chủ đề Flatsome, có tới 9 bố cục cho các trang sản phẩm khác nhau trong phần điều chỉnh bố cục của trang chi tiết sản phẩm Woocommerce. Do đó, nếu bạn quyết định sử dụng bất kỳ loại bố cục nào, bạn sẽ cần chọn tệp .php thích hợp để truy cập bảng thông số kỹ thuật. Ví dụ:

Chọn kiểu bố cục cho trang sản phẩm: Bố cục -> Tùy chỉnh -> Woocommerce (Cửa hàng) -> Product Page -> Product Layout

Chọn tệp .php xác định bố cục cho trang sản phẩm: Bố cục -> Chỉnh sửa -> Chọn chủ đề gốc Flatsome -> Woocommerce -> Single-product -> Layout

Ví dụ: Tôi chọn bố cục Right Sidebar Full Height cho trang sản phẩm, sau đó tôi cần tìm tệp product-right-sidebar-full.php để gọi mã hiển thị bảng thông số kỹ thuật:

Sao chép và dán tất cả mã bên dưới:

<?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 }?>

<?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){?>

<h3 class="tieu-de thong-so">Thông số kỹ thuật</h3>

<div class="left">Bộ nhớ trong</div>

</div>

<?php if($camera_chinh){?>

<div class="left">Camera chính</div>

</div>

<?php }?>

<?php if($camera_phu){?>

<div class="left">Camera phụ</div>

</div>

<?php }?>

<?php if($cpu){?>

</div>

<?php }?>

<?php if($do_phan_giai_man_hinh){?>

</div>

<?php }?>

<?php if($dung_luong_pin){?>

<div class="left">Dung lượng pin</div>

</div>

<?php }?>

<?php if($he_dieu_hanh){?>

</div>

<?php }?>

<?php if($kich_thuoc_man_hinh){?>

<div class="left">Kích thước màn hình</div>

</div>

<?php }?>

<?php if($ram){?>

</div>

<?php }?>

<?php if($the_sim){?>

</div>

<?php }?>

<?php if($the_nho){?>

</div>

<?php }?>

</div>

<?php }?>

Dán tất cả mã ở trên ngay sau thẻ mở như hình dưới đây:

Bước 4: thêm một chút CSS cho đẹp

Chúng tôi vừa gọi mã để hiển thị nội dung của trường tùy chỉnh trong giao diện người dùng, nhưng bây giờ dữ liệu được gọi đang hiển thị một cách lộn xộn vì không có CSS:

Tiếp theo, CSS sao cho đúng và hiển thị đẹp!

CSS dành cho PC

Đi tới Giao diện – Tùy chỉnh – Kiểu – CSS tùy chỉnh và dán vào toàn bộ đoạn CSS này:

.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(http://dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png);
background-repeat: no-repeat;
background-size: 14px;
background-position-y: 2px;
padding-left: 22px;
margin-left: 0;
margin-bottom: 10px;}

.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(http://dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png);

background-repeat: no-repeat;

background-size: 14px;

background-position-y: 2px;

padding-left: 22px;

margin-left: 0;

margin-bottom: 10px;}

Lưu ý: Bạn tải ảnh biểu tượng dấu tích xanh từ link http://dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png để upload lên host và url ảnh để thay thế thuộc tính nền của thẻ trong đoạn mã CSS ở trên.

CSS dành cho thiết bị di động

Bạn copy toàn bộ đoạn mã CSS bên dưới và dán vào Appearance – Customize – Style – Custom CSS – Custom CSS Mobile

.product-footer .container {
display: inline-grid;
}
.product-footer .container .large-9 {
order: 1;
}
.product-footer .container .large-3 {
order: -3;
}

.product-footer .container {

display: inline-grid;

}

.product-footer .container .large-9 {

order: 1;

}

.product-footer .container .large-3 {

order: -3;

}

Và kết quả là:

Tổng kết

Trên đây là bài hướng dẫn [Woocommerce] Tạo bảng thông số kỹ thuật sử dụng Advanced Custom Fields dành cho người dùng website giao diện Flatsome. Nếu có bất kỳ vấn đề nào có thể để lại bình luận bên dưới để cùng trao đổi nhé.

Cảm ơn các bạn đã quan tâm xem và ủng hộ leekhoa.com trong thời gian gần đây. Nếu bạn có nhu cầu thiết kế website bán hàng, thiết kế landing page,.v.v.. hãy liên hệ với mình để được hỗ trợ.