Đối với những ai làm web site về công nghệ ( máy tính, điện thoại, laptop,… ). Thì bảng thông số kĩ thuật như CPU, Ram, bộ nhớ, thông số màn hình, thông số camera,… Lại cực kì trọng yếu trong trang diễn đạt mặt hàng của web site phải không? Sau đây vô cùng Tốc Việt sẽ có các hướng dẫn người mua thực hiện 1 bảng thông số kĩ thuật hiện đại nhất nhé !!! Bạn khả năng cao tự thực hiện 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên kiến thức về lập trình và tương tự như mình thường xuyên không nên bỏ giá thành để lập trình cả. Việc này cũng không quá phức tạp, quý khách chỉ nên làm theo bao giờ bước như mình hướng dẫn là được thôi. Ngoài ra, mình đang dùng theme Flatsome đưa cho bài hướng dẫn này, do đó, bạn nào dùng theme Flatsome có thể thực hiện theo y nguyên, còn người dùng dùng theme khác khả năng cao gọi mình để được hướng dẫn cụ thể thêm. xem thêm: các plugin cần thiết cho wordpress

Cài đặt plugin Advanced Custom Field

Để khả năng cao tự thực hiện được thì việc dùng các plugin là điều dễ hiểu vì chúng không quá phức tạp và cũng không yêu cầu am hiểu nhiều lập trình cần phải chúng ta bắt đầu tiến hành cài đặt nhé !!! người mua vào trang quản trị Word press, tìm kiếm tới mục PluginCài mới – Gõ “Advanced Custom Field” vào khung tìm trên kho plugin free của WordPress. Sau khi các bạn setup biến thành công plugin “Advanced Custom Fields” thì quý khách kích hoạt để có thể dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File lập trình Fields ở đây và import vào Plugin Sau khi khách hàng import ACF- file vào rồi thì người mua sửa Bất kì món đồ nào sẽ thấy sở hữu các field mới được thêm vào để người mua nhập thông số tặng sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field đưa cho Post type = mặt hàng, nghĩa là chương trình tặng phép bạn thêm Custom Field để nhập thêm data vào sản phẩm trong backend thôi, việc cần thiết hơn chúng ta phải tìm đến nó hiển thị ra bên ngoài nữa.

Bước 3: Hiển thị Advance Custom Field ra ngoài giao diện

Đố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 mặt hàng 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ố khoa học ra.

  • Chọn kiểu layout đưa 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 đưa cho trang sản phẩm: Giao diện – Sửa – chọn theme gốc Flatsome – Woocommerce – Single-product – Layout

Mình chọn layout Right Sidebar Full Height tặng trang mặt hàng thì phải liên hệ 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 tất cả đoạn lập trình 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 ?>

Paste hầu hết đoạn lập trình trên vào ngay sau thẻ mở <div id=”product-sidebar”….>

Hiển thị bảng tin khuyến mại bằng advanced custom fields

Người dùng copy hầu hết đ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 ;?>

Sau đó, các bạn paste hầu hết đoạn code đó lên đầu file share.php như là hình dưới. tìm kiếm file share.php theo đường dẫn: Giao diện – sửa – theme Flatsome – Woocommerce – Single-product – Share.phpViệc tiếp theo chúng ta CSS đưa cho nó theo đúng ý và hiển thị đẹp rực rỡ nha!

CSS tặng PC

Các bạn vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste tất cả đ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(http://dienthoai3.ninhbinhweb.info/cdn/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;

CSS đưa cho mobile – copy đa số đoạn lập trình 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;
5/5 - (1 bình chọn)

Sử dụng Advanced Custom Fields tạo bảng thông số kĩ thuật làm sao

Lê Trương Tấn Lộc (sieutocviet.net)

Có hơn 4 năm thực chiến Drupal 8 năm thực chiến trong quản trị website tư vấn giải pháp đẩy top, Digital marketing tối ưu nhất cho công ty.
Hiện là trưởng phòng kinh doanh tại Siêu Tốc Việt. ping post