Đối với những ai làm website cũng dễ về khoa học ( 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ì quan trọng trong trang thể hiện món đồ của trang web phải không? Sau đây rất Tốc Việt sẽ hướng dẫn các bạn thực hiện được nhất 1 bảng thông số kĩ thuật tiên tiến nhỏ chưa nhất nhé !!! Bạn thường tự làm 1 bảng thông số kĩ thuật mà chẳng nên kiến thức về code và như mình có lẽ không nên 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 bao giờ bước giống như mình có các hướng dẫn là được thôi. Không những thế, mình đang dùng theme Flatsome cho bài có các hướng dẫn này, do đó, bạn nào dùng theme Flatsome thường thực hiện ngay theo y nguyên, còn các bạn dùng theme khác có lẽ gọi 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

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

• Chọn kiểu layout 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 tặng rất 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 tặng bỗng nhiên không trang sản phẩm được có thể rất thì phải tìm đến cần file product-right-sidebar-full.php để gọi lập trình chẳng đừng 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 ngắ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ũ ?>

<?php if($cpu)?>

<div class=”row-info”>

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

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

</div>

<?php ngắ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 được 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 cũ ?>

<?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 ngắn ?>

<?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 mới ?>

<?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 thường ?>

</div>

<?php ?>

Sau đó, khách hàng paste toàn bộ mới đoạn code đó lên đầu file share.php giống 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 cho nó theo đúng không thể ý và hiển thị đẹp rực rỡ nha!

CSS cho PC

Người mua 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 đưa cho mobile – copy tất cả đoạn lập trình không thể CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile

Sử dụng Advanced Custom Fields tạo bảng thông số kĩ thuật cách nào