Mình chọn layout Right Sidebar Full Height đưa cho trang món đồ thì phải tìm đến file product-right-sidebar-full.php để liên hệ 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 ?>

Paste hầu hết đ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

Khách hà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 đó, khách hàng paste mọi đoạn code đó lên đầu file share.php như hình dưới. search 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 đú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;