Mình chọn layout Right Sidebar Full Height tặng trang sản phẩm thì phải gọi file product-right-sidebar-full.php để gọi lập trình 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 mọi đ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 mua copy tất cả đ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ư 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 đưa cho PC
Người mua 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-thuatborder: 1px solid #e9e9e9;font-size: 14px;display: inline-block;border-radius: 5px;margin-bottom:20px;.thong-so-ky-thuat h3margin-bottom: 0;padding: 10px;border-bottom: 1px solid #e9e9e9;background: #fed700;.thong-so-ky-thuat .row-infoborder-bottom: 1px solid #e9e9e9;padding: 10px 7px;display: inline-flex;clear: both;width: 100%;.thong-so-ky-thuat .row-info .leftwidth: 43% !important;color: #a0a0a0;display: inline-block;float: left;padding-right: 10px;.thong-so-ky-thuat .row-info .rightwidth: 57% !important;color: black;display: inline-block;float: left;padding-left: 10px;.khuyen-maiborder: 1px solid #ffdb97;padding: 8px;font-size: 14px;border-radius: 4px;margin-bottom: 15px;line-height: 18px;background: #fffbf4;.khuyen-mai h4color: red;.khuyen-mai ulmargin-bottom:0.khuyen-mai ul lilist-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 tất cả đoạn code CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile
.product-footer .containerdisplay: inline-grid;.product-footer .container .large-9order: 1;.product-footer .container .large-3order: -3;