Mình chọn layout Right Sidebar Full Height tặng trang món đồ thì phải gọi file product-right-sidebar-full.php để tìm đến code hiển thị bảng thông số kỹ thuật:Các bạn copy hầu hết đ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 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

Quý khách 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 đó, khách hàng paste mọi đoạn code đó lên đầu file share.php giống như 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 cho nó theo chính xác ý và hiển thị đẹp rực rỡ nha!

CSS cho PC

Người mua 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 cho mobile - copy hầu hết đ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;
Marketing 5.0 pdf download

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

Dịch Vụ Entity Bao Gồm Những Gì? Dịch Vụ Backlink năng suất Cao Backlink vẫn...

WordPress wordpress dl

WordPress là 1 trong những nền tảng điều hành nội dung (CMS) phổ quát 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 WEBSITE THÁNG 12: Lập web Trọn Gói tặng Từ Khóa Theo...

SEO Specialist

Phân tích 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 định nghĩa 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 thế nào

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

Với 3 năm thực chiến Drupal 7 năm kinh nghiệm trong quản lý 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à trưởng phòng kinh doanh tại Siêu Tốc Việt.