Xây dựng bảng thông số kỹ thuật sử dụng Advanced Custom Field

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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

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

Thực ra nó cũng không quá phức tạp, các bạn chỉ cần làm theo từng bước như mình hướng dẫn là được thôi. Tuy nhiên, mình đang sử dụng theme Flatsome cho bài hướng dẫn này, do đó, bạn nào sử dụng theme Flatsome có thể làm theo y nguyên, còn các bạn sử dụng theme khác có thể inbox mình hướng dẫn thêm.

Bạn nhìn hình bên dưới để biết chúng ta sẽ làm gì hôm nay:

Demo: //phukiendienthoai.ninhbinhsite.com/san-pham/the-nho-micro-sd-16-gb-class-10/

Giuseart.com - Tạo bảng thông số kỹ thuật và khuyến mại sử dụng advanced custom fileds — Giuseart.com – Tạo bảng thông số kỹ thuật và khuyến mại sử dụng advanced custom fileds

Như vậy, chúng ta sẽ xử lí 2 việc:

Xây dựng bảng thông số kỹ thuật.
Xây dựng bảng khuyến mại.

BẮT ĐẦU THÔI!

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

Các bạn vào trang quản trị WordPress, tìm tới mục Plugin – Cài mới – Gõ “Advanced Custom Field” vào khung tìm kiếm trên kho plugin miễn phí của WordPress. (Bạn nào có điều kiện mua bản PRO thì càng ngon, nhưng thực tế bản free cũng đủ giúp chúng ta xử lí công việc của bài viết này).

Giuseart.com - Cài plugin Advanced Custom Fields 1 — Giuseart.com – Cài plugin Advanced Custom Fields 1

Giuseart.com - Cài plugin Advanced Custom Field — Giuseart.com – Cài plugin Advanced Custom Field 2

Sau khi các bạn cài đặt thành công plugin “Advanced Custom Fields” thì các bạn kích hoạt để có thể sử dụng luôn nhé.

Bước 2: Import Filed Group Thông số kỹ thuật

Giuseart.com - Field Group Thông số kỹ thuật — Giuseart.com – Field Group Thông số kỹ thuật bởi NinhBinhWeb

Đây là Field Group mình bỏ công sức làm sẵn cho các bạn rồi nên việc của các bạn chỉ là tải về và import vào plugin “Advanced Custom Fields” là sử dụng.

Tải Filed Group về tại đây: //drive.google.com/file/d/1Yhd1lR_NSjDoIF3bIlKCKmyuBLe_hiU0/view?usp=sharing

Sau khi tải được Field Group về, các bạn vào Quản trị – Custom Field – Tools

Giuseart.com - Import Filed Group Advanced Custom Field — Giuseart.com – Import Filed Group Advanced Custom Field 1

Giuseart.com - Import Filed Group Advanced Custom Field 2 — Giuseart.com – Import Filed Group Advanced Custom Field 2

Sau khi các bạn import ACF- file vào rồi thì các bạn sửa bất cứ sản phẩm nào sẽ thấy có các field mới được thêm vào để các bạn nhập thông số cho sản phẩm, ví dụ:

Giuseart.com - Nhập dữ liệu vào Custom Field — Giuseart.com – Nhập dữ liệu vào Custom Field

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

Đây mới chỉ đơn thuần là tạo Custom Field cho Post type = Sản phẩm, nghĩa là hệ thống cho phép bạn thêm Custom Field để nhập thêm dữ liệu vào sản phẩm trong backend thôi, việc quan trọng hơn chúng ta phải gọi nó hiển thị ra bên ngoài nữa.

Bước 3: Hiển thị Custom Field ra ngoài Front End

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

Bảng thông số kỹ thuật này các bạn có thể để đâu tùy ý, nhưng theo mình thì nên để ở sidebar cho nó đẹp.

Đối với theme Flatsome, trong phần tùy biến layout của trang chi tiết sản phẩm Woocommerce có tới 9 kiểu layout cho trang sản phẩm khác nhau. Do đó, nếu bạn chọn kiểu layout nào thì phải chọn file .php tương ứng để gọi bảng thông số kỹ thuật ra. Ví dụ:

Giuseart.com - Thêm bảng thông số kỹ thuật cho website — Giuseart.com – Thêm bảng thông số kỹ thuật cho website

Chọn kiểu layout cho trang sản phẩm: Giao diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
Chọn file .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

Ví dụ: Mình chọn layout Right Sidebar Full Height cho trang sản phẩm thì phải tìm đến file product-right-sidebar-full.php để gọi code hiển thị bảng thông số kỹ thuật:

Các bạn copy toàn bộ đoạn code sau:

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

Paste toàn bộ đoạn code trên vào ngay sau thẻ mở <div id=”product-sidebar”….> như hình dưới:

Gọi code hiển thị custom field trong wordpress

Hiển thị bảng tin khuyến mại

Các bạn copy toàn bộ đoạn code dưới đây:

<?php 
$khuyen_mai_1=get_field('khuyen_mai_1');
$khuyen_mai_2=get_field('khuyen_mai_2');
$khuyen_mai_3=get_field('khuyen_mai_3');
$khuyen_mai_4=get_field('khuyen_mai_4');
$khuyen_mai_5=get_field('khuyen_mai_5');?>
<?php if($khuyen_mai_1) {?>
<div class="khuyen-mai">
<h4>Thông tin khuyến mại</h4>
<ul>
<li><?php the_field('khuyen_mai_1');?></li>
<?php if($khuyen_mai_2){?>
<li><?php the_field('khuyen_mai_2');?></li>
<?php }?>
<?php if($khuyen_mai_3){?>
<li><?php the_field('khuyen_mai_3');?></li>
<?php }?>
<?php if($khuyen_mai_4){?><li><?php the_field('khuyen_mai_4');?></li>
<?php }?>
<?php if($khuyen_mai_5){?><li><?php the_field('khuyen_mai_5');?></li>
<?php }?>
</ul>
</div>
<?php };?>

<?php

$khuyen_mai_1=get_field('khuyen_mai_1');

$khuyen_mai_2=get_field('khuyen_mai_2');

$khuyen_mai_3=get_field('khuyen_mai_3');

$khuyen_mai_4=get_field('khuyen_mai_4');

$khuyen_mai_5=get_field('khuyen_mai_5');?>

<?php if($khuyen_mai_1) {?>

<h4>Thông tin khuyến mại</h4>

<ul>

<?php if($khuyen_mai_2){?>

<?php }?>

<?php if($khuyen_mai_3){?>

<?php }?>

<?php if($khuyen_mai_4){?><li><?php the_field('khuyen_mai_4');?></li>

<?php }?>

<?php if($khuyen_mai_5){?><li><?php the_field('khuyen_mai_5');?></li>

<?php }?>

</ul>

</div>

<?php };?>

Sau đó, các bạn paste toàn bộ đoạn code đó lên đầu file share.php như hình dưới. Tìm file share.php theo đường dẫn: Giao diện – sửa – theme Flatsome – Woocommerce – Single-product – Share.php

Giuseart.com - Gọi code hiển thị bảng khuyến mại — Giuseart.com – Gọi code hiển thị bảng khuyến mại

Lưu ý: Với cách làm trên, chúng ta đã hoàn thành việc gọi hiển thị bảng thông số kỹ thuật cho wordpress sử dụng Advanced Custom Field.

Tuy nhiên, chúng ta sửa code trong theme gốc Flatsome khi update theme sẽ mất hết những thứ chúng ta làm. Do đó, các bạn copy folder “woocommerce” của theme gốc Flatsome đưa sang child theme là OK nha, lần sau update theme thoải mái. Bước này rất quan trọng đó.

Bước 4: CSS cho đẹp rực rỡ

Chúng ta vừa mới thực hiện việc gọi code để hiển thị nội dung custom field ra Front End, tuy nhiên lúc này dữ liệu được gọi ra đang hiển thị lộn xộn vì chưa có CSS:

Giuseart.com - CSS cho bảng thông số kỹ thuật — Giuseart.com – CSS cho bảng thông số kỹ thuật

Việc tiếp theo chúng ta CSS cho nó theo đúng ý và hiển thị đẹp rực rỡ nha!

CSS cho PC

Các bạn vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste toàn bộ đoạn CSS này vào nha:

.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(//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 ý: Các bạn tải ảnh icon check ở link //dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png về upload lên host và lấy url ảnh để thay vào thuộc tính background của thẻ <li> trong đoạn CSS trên nha.

CSS cho mobile

Các bạn copy toàn bộ đoạn code CSS ở dưới paste vào Giao diện – Tùy chỉnh – 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à ngon lành rồi nha các bạn:

Lời kết

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ GiuseArt.com trong suốt thời gian qua. Mọi nhu cầu thiết kế đồ họa, thiết kế website và in ấn, vui lòng liên hệ admin để được tư vấn nhiệt tình:

Thông tin liên hệ

+ Liên hệ: Lê Văn Thiện
+ Phone: 0972939830
+ Email: giuselethien@gmail.com
+ Website: www.giuseart.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: //www.behance.net/giuselethien
+ Pintesest: //www.pinterest.com/giuselethien/pins

5/5 - (10 bình chọn)

Chia sẻ bài viết:

8 những suy nghĩ trên “Xây dựng bảng thông số kỹ thuật và khuyến mại sử dụng Advanced Custom Fields”

Dương nói:
Theme Porto thì chỉnh ở file php nào vậy Admin? thanks

13/10/2020 tại 10:52
Bình luận
Dương nói:
Porto Theme thì thay đổi trong file php nào vậy Admin? Thanks

13/10/2020 tại 13:50
Bình luận
Tony Hieu nói:
Bác ơi , nếu sử dụng Custom Product Layout của theme flatsome thì add bảng này như thế nào bác?Thanks bác đúng cái cần luôn 😀

05/11/2020 tại 12:05
Bình luận
Minh Khanh nói:
rất hay anh

01/03/2021 tại 11:50
Bình luận
Hùng Hà nói:
Ad ơi, mình không gọi các field ra trang chủ được, đã làm theo các bước. ad giúp mình với

19/04/2021 tại 11:55
Bình luận
- Lê Văn Thiện nói:
  Bạn gặp vấn đề vui lòng nhắn qua messenger giúp mình nhé!
  
  19/04/2021 tại 15:24
  Bình luận
Nam nói:
Bạn cho mình hỏi? trang web của mình có nhiều danh mục sản phẩm, mỗi danh mục có thể có nhiều loại sản phẩm khác nhau với thông số khác nhau. Nếu tạo ra nhiều field và gọi hàm code như trên chắc loạn mất. có giải pháp nào bạn có thể gợi ý giúp mình được không?

01/05/2021 tại 07:49
Bình luận
- Lê Văn Thiện nói:
  Mình cũng đã từng làm field thông số kỹ thuật cho một cửa hàng nhiều sp khác nhau. Thực sự như bạn nói rất vất vả, nhưng không còn cách nào khác, mỗi loại sp bạn tạo một group filed, rồi gọi ra như nhau, nhưng đặt điều kiện hiển thị phân biệt bằng filed đầu tiên.
  
  04/05/2021 tại 15:37
  Bình luận

Xây dựng bảng thông số kỹ thuật và khuyến mại sử dụng Advanced Custom Fields

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

Bước 2: Import Filed Group Thông số kỹ thuật

Bước 3: Hiển thị Custom Field ra ngoài Front End

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

Hiển thị bảng tin khuyến mại

Bước 4: CSS cho đẹp rực rỡ

CSS cho PC

CSS cho mobile

Lời kết

Bài viết cùng chuyên mục:

Tạo slider ảnh sử dụng Gallery trong plugin Advanced Custom Field trên theme Flatsome

Hiển thị bảng thuộc tính sản phẩm và bật chế độ lưu trữ các sản phẩm cùng thuộc tính

Tổng hợp các hàm hiển thị dữ liệu trong Woocommerce

Đổi text nút Thêm vào giỏ hàng hoặc Add to cart trong woocommere

Thêm custom field mô tả ngắn cho danh mục sản phẩm không dùng plugin

Thêm custom field ảnh đại diện cho danh mục sản phẩm không dùng plugin

Xử lí lỗi Breadcrumb của Rank Math không dịch được chữ “Trang chủ” với Polylang

Tạo layout tùy chỉnh cho trang Blog Archive trong theme Flatsome cực dễ

Bài viết mới cập nhật:

Hướng dẫn tùy biến giao diện trang đăng nhập mặc định của WordPress

Chia sẻ file in khổ lớn Đức Mẹ ban ơn cho ai cần

Thiết kế thiệp mời Lễ khánh thành nhà thờ Giáo xứ An Tôn

Thiết kế bộ ấn phẩm in ấn lễ tạ ơn Tân Linh Mục

Chia sẻ file thiết kế biển hiệu hợp tác xã nông nghiệp

Chia sẻ file thiết kế biển quảng cáo tạp hóa bánh kẹo

Chia sẻ file thiết kế biển hộp đứng spa thẩm mỹ

Chia sẻ file thiết kế biển quảng cáo tiệm ảnh chân dung

8 những suy nghĩ trên “Xây dựng bảng thông số kỹ thuật và khuyến mại sử dụng Advanced Custom Fields”

Để lại một bình luận Hủy

Dịch vụ cung cấp

GiuseArt.com