Mình chọn layout Right Sidebar Full Height đưa cho trang sản phẩm thì phải gọi file product-right-sidebar-full.php để tìm đến lập trình hiển thị bảng thông số kỹ thuật:Các bạn copy đa số đ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 ?>
Paste mọi đoạn code 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 đa số đoạn lập trình 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 đó, người mua paste toàn bộ đoạn code đó lên đầu file share.php như là hình dưới. tì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 chính xác ý 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 đa số đ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 tặng mobile - copy hầu hết đ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;
Marketing 5.0 công nghệ vị nhân sinh

Xu Hướng Nổi Bật Trong Marketing 5.0 Dịch Vụ Marketing 5.0 Cho Doanh Nghiệp Trong...

Dịch Vụ Entity Backlink Social

Giới Thiệu Về Dịch Vụ Entity Trong bối cảnh SEO ngày càng cạnh tranh, Dịch...

WordPress wordpress dl

WordPress là một trong các nền tảng quản lý nội dung (CMS) phổ thông nhất hiện...

Search intent

Tầm quan trọng của Search Intent Search Intent đối với seo và doanh nghiệp Trong...

Ưu đãi web tháng 12

ƯU ĐÃI XÂY DỤNG TRANG WEB THÁNG 12: Làm trang web Trọn Gói tặng Từ...

SEO Specialist

Đánh giá về SEO Specialist Kỹ năng chuyên môn làm việc của SEO Specialist Trong...

Breadcrumbs

Breadcrumbs là gì? Vai trò của 3 loại Breadcrumb đối với người dùng Bạn có...

Canonical

{ Canonical URL không còn là một khái niệm mới lạ đối với người làm...

5/5 - (1 vote)

Sử dụng Advanced Custom Fields tạo bảng thông số kĩ thuật không khó

Nguyễn Văn Hải (hostmail.vn)

Với 6 năm kinh nghiệm Python, PHP 7 năm thực chiến trong quản trị web site tư vấn giải pháp đẩy top, Digital marketing tối ưu nhất cho tập đoàn quốc tế.
Hiện là giám đốc kinh doanh tại Siêu Tốc Việt.