Đối với những ai thực hiện chưa website chỉ về kỹ thuật bỗng nhiên ( 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ì rất cần thiết trong trang diễn tả sản phẩm nhanh của trang web phải không? Sau đây siêu Tốc Việt sẽ hướng dẫn người mua thực hiện mất 1 bảng thông số kĩ thuật tiên tiến nhỏ nhất nhé !!! Bạn có lẽ tự thực hiện quá 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên mới kiến thức về code và cũng như mình có lẽ không cần bỏ giá tiền để lập trình chậm cả. Việc này cũng không quá phức tạp, khách hàng chỉ cần làm theo bao giờ bước như mình hướng dẫn là được thôi. Không những thế, mình đang dùng theme Flatsome cho bài hướng dẫn này, do đó, bạn nào dùng theme Flatsome thường làm theo y nguyên, còn người dùng 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ó lẽ tự làm đượ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 nhiều lập trình lại nên chúng ta bắt đầu tiến hành cài đặ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 free của Wp chẳng. Sau khi quý khách không thể thiết đặt trở thành chính công plugin “Advanced Custom Fields” thì người mua 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 dài Fields ở đây và import vào Plugin Sau khi quý khách có thể import ACF- file vào rồi thì người dùng sửa Bất cứ sản phẩm vẫn nào sẽ thấy có các field mới được thêm vào để khách hàng nhập thông số tặng ngắn sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field cho Post type = sản phẩm chỉ , nghĩa là hệ thống tặng cả phép bạn thêm Custom Field để nhập thêm dữ liệu nhanh vào món đồ trong backend thôi, việc trọng yếu nhẹ 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 khía cạnh sản phẩm nhỏ Woocommerce sở hữu không tới 9 kiểu layout đưa cho trang sản phẩm chẳng 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 với ngắn để liên hệ bảng thông số công nghệ ra.

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

<?php if($camera_phu)?>

<div class="row-info">

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

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

</div>

<?php lại?>

<?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 được?>

<?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 lại?>

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

<?php if($ram)?>

<div class="row-info">

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

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

</div>

<?php cũ ?>

<?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 luôn ?>

</div>

<?php ?>

Sau đó, quý khách nhanh paste tất cả đoạn lập trình cũ đó lên đầu file share.php như 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 đưa cho nó theo chính xác ý và hiển thị đẹp rực rỡ nha!

CSS đưa cho PC

Quý khách lớn 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:

CSS cho mobile - copy hầu hết đoạn lập trình được CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile