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

Cài đặt plugin Advanced Custom Field

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

• Chọn kiểu layout đưa cho 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 đưa 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 món đồ thì phải liên hệ file product-right-sidebar-full.php để liên hệ lập trình quá hiển thị bảng thông số kỹ thuật:Các bạn copy toàn bộ không thể đ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 gần ?>

<?php if($camera_phu)?>

<div class="row-info">

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

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

</div>

<?php cần ?>

<?php if($cpu)?>

<div class="row-info">

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

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

</div>

<?php xa ?>

<?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 không thể ?>

<?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 nhỏ?>

<?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 cả ?>

<?php if($ram)?>

<div class="row-info">

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

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

</div>

<?php cần ?>

<?php if($the_sim)?>

<div class="row-info">

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

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

</div>

<?php lắm ?>

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

</div>

<?php ?>

Sau đó, các bạn paste toàn bộ cũ đoạn lập trình lại đó lên đầu file share.php như là ngắn hình dưới. tì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 tặng cũng nó theo đúng có lẽ ý và hiển thị đẹp rực rỡ nha!

CSS tặng lớn PC

Người dùng vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste mọi đoạn CSS này vào nha:

CSS 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