Đối với những ai làm website chỉ về công nghệ ( máy tính, điện thoại, laptop,... ). Thì bảng thông số kĩ thuật như CPU, Ram, bộ nhớ, thông số màn hình, thông số camera,… Lại cực kì cần thiết trong trang biểu lộ món đồ của web site phải không? Sau đây vô cùng đừng Tốc Việt sẽ hướng dẫn cụ thể nhanh người mua làm 1 bảng thông số kĩ thuật tiên tiến gần nhất nhé !!! Bạn có lẽ tự làm 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên lại nhỏ mất kiến thức về lập trình có lẽ và tương tự như chính mình thường xuyên nhẹ dễ không tốt nhất nên rất bỏ giá thành để code cả. Việc này cũng không quá phức tạp, người dùng chỉ cần làm theo lần nào bước như mình hướng dẫn là được thôi. Tuy nhiên dễ , mình đang dùng theme Flatsome đưa cho bài hướng dẫn này, do đó, bạn nào dùng theme Flatsome có lẽ làm theo y nguyên, còn người dùng dùng theme khác thường xuyên không tìm đến lắm mình để được hướng dẫn cụ thể đừng thêm. xem thêm: các plugin cần thiết cho wordpress

Cài đặt plugin Advanced Custom Field

Để có thể tự làm được thì việc dùng các plugin là điều dễ dàng hiểu vì chúng không quá phức tạp và cũng không yêu cầu am hiểu rộng rãi những quá lập trình cần tốt nhất nên nhẹ ngắn chúng ta mở đầu cả tiến hành cài đặt nhé !!! người dùng vào trang quản trị WordPress, tìm tới mục Plugin – Cài mới – Gõ “Advanced Custom Field” vào khung tìm kiếm thường trên kho plugin free của Word press. Sau khi quý khách mất cài đặt trở thành đích công plugin “Advanced Custom Fields” thì khách hàng kích hoạt để thường dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File lập trình nhỏ không thể Fields ở đây và import vào Plugin Sau khi người dùng import ACF- file vào rồi thì người dùng sửa Bất kì món đồ nào sẽ thấy nắm tới các field mới được thêm vào để các bạn nhập thông số cho sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field cho Post type = món đồ, nghĩa là chương trình đưa cho phép bạn thêm Custom Field để nhập thêm data vào mặt hàng trong backend thôi, việc quan trọng hơn chúng ta phải tìm đến rất nó hiển thị ra bên ngoài nữa.

Bước 3: Hiển thị Advance Custom Field ra ngoài giao diện

Đối với theme Flatsome, trong phần tùy biến layout của trang yếu tố vẫn sản phẩm ngắn Woocommerce nắm tới tới 9 kiểu layout cho trang sản phẩm chẳng đầy đủ khác nhau. Do đó, nếu bạn chọn kiểu layout nào thì phải chọn file .php tương ứng để tìm đến sớm dài bảng thông số khoa học ra.

Chọn kiểu layout tặng đích trang sản phẩm: Giao diện – Tùy biến – Woocommerce (Shop) – Product Page – Product Layout
Chọn file .php quy cách layout cho trang sản phẩm: Giao diện – Sửa – chọn theme gốc Flatsome – Woocommerce – Single-product – Layout

Mình chọn layout Right Sidebar Full Height cho trang sản phẩm không thể thì phải tìm đến cũ 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 tất cả đ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 xa ?>

<?php if($camera_phu)?>

<div class="row-info">

<div class="left">Camera phụ</div>

<div class="right"><?php echo $camera_phu;?></div>

</div>

<?php nhất?>

<?php if($cpu)?>

<div class="row-info">

<div class="left">CPU</div>

<div class="right"><?php echo $cpu;?></div>

</div>

<?php gần ?>

<?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 mất ?>

<?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 nhất?>

<?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 xa ?>

<?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 đích ?>

<?php if($ram)?>

<div class="row-info">

<div class="left">Ram</div>

<div class="right"><?php the_field('ram');?></div>

</div>

<?php nhất?>

<?php if($the_sim)?>

<div class="row-info">

<div class="left">Thẻ sim</div>

<div class="right"><?php echo $the_sim;?></div>

</div>

<?php quá ?>

<?php if($the_nho)?>

<div class="row-info">

<div class="left">Thẻ nhớ</div>

<div class="right"><?php echo $the_nho;?></div>

</div>

<?php bỗng nhiên được nhẹ?>

</div>

<?php ?>

Paste tất cả đ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 mua 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 sẽ ?>

<?php if($khuyen_mai_3)?>

<li><?php the_field('khuyen_mai_3');?></li>

<?php rất ?>

<?php if($khuyen_mai_4)?><li><?php the_field('khuyen_mai_4');?></li>

<?php vẫn ?>

<?php if($khuyen_mai_5)?><li><?php the_field('khuyen_mai_5');?></li>

<?php rất ?>

</ul>

</div>

<?php ;?>

Sau đó, quý khách nhẹ đột nhiên paste toàn bộ lại rấ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 đưa cho nó theo chính xác ý và hiển thị đẹp rực rỡ nha!

CSS tặng dài PC

Người mua vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste hầu hết đ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;

có lẽ

.thong-so-ky-thuat h3

margin-bottom: 0;

padding: 10px;

border-bottom: 1px solid #e9e9e9;

background: #fed700;

vẫn

.thong-so-ky-thuat .row-info

border-bottom: 1px solid #e9e9e9;

padding: 10px 7px;

display: inline-flex;

clear: both;

width: 100%;

nhất

.thong-so-ky-thuat .row-info .left

width: 43% !important;

color: #a0a0a0;

display: inline-block;

float: left;

padding-right: 10px;

lớn

.thong-so-ky-thuat .row-info .right

width: 57% !important;

color: black;

display: inline-block;

float: left;

padding-left: 10px;

lớn

.khuyen-mai

border: 1px solid #ffdb97;

padding: 8px;

font-size: 14px;

border-radius: 4px;

margin-bottom: 15px;

line-height: 18px;

background: #fffbf4;

đầy đủ

.khuyen-mai h4

color: red;

đã

.khuyen-mai ul

margin-bottom:0

đột nhiên

.khuyen-mai ul li

list-style: none;

background: url(http://dienthoai3.ninhbinhweb.info/cdn/2019/08/[email protected]);

background-repeat: no-repeat;

background-size: 14px;

background-position-y: 2px;

padding-left: 22px;

margin-left: 0;

margin-bottom: 10px; ngắn

CSS đưa cho mobile - copy đa số đ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;

được vẫn

.product-footer .container .large-9

order: 1;

sớm đã

.product-footer .container .large-3

order: -3;

thôi