Mình chọn layout Right Sidebar Full Height cho trang sản phẩm thì phải tìm đến 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 lập trình sau:
Sau đó, khách hàng paste mọi đoạn lập trình đó lên đầu file share.php giống 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 tặng nó theo đúng ý và hiển thị đẹp rực rỡ nha!
<?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 tất cả đ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 đ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 ;?>
CSS tặng PC
Các bạn vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste toàn bộ đ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 đưa cho mobile - copy tất cả đ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 .containerdisplay: inline-grid;.product-footer .container .large-9order: 1;.product-footer .container .large-3order: -3;
Diệp Toàn Phát (sieutocviet.vn)
Trải qua 3 năm kinh nghiệm Laravel 8 năm kinh nghiệm trong quản trị website tư vấn giải pháp SEO từ khóa, 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.