Đối với những ai làm trang web 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ì cần thiết trong trang biểu hiện mặt hàng của website ngắn phải không? Sau đây rất Tốc Việt sẽ hướng dẫn người dùng làm 1 bảng thông số kĩ thuật hiện đại nhất nhé !!! Bạn thường xuyên chỉ tự thực hiện chẳng 1 bảng thông số kĩ thuật mà chẳng tốt nhất nên lại kiến thức về code và tương tự như chính mình có lẽ không cần bỏ giá thành để lập trình nhanh cả. Việc này cũng không quá phức tạp, các bạn chỉ nên làm sâu theo từng ngắn bước như là chẳng mình hướng dẫn cụ thể nhanh là được thôi. Tuy nhiên rất , mình đang dùng theme Flatsome đưa cho bài có các hướng dẫn này, do đó, bạn nào dùng theme Flatsome khả năng cao làm theo y nguyên, còn các bạn dùng theme khác thường tìm đến chẳng mình để được có cá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 không thể được thì việc dùng các plugin là điều đơn giản lắm 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 ngay code cần chúng ta bắt đầu tiến hành setup nhé !!! người mua vào trang quản trị WordPress, tìm kiếm đầy đủ tới mục Plugin – Cài mới – Gõ “Advanced Custom Field” vào khung search trên kho plugin free của WordPress. Sau khi người mua thiết lập quá biến thành công plugin “Advanced Custom Fields” thì người mua kích hoạt để thường xuyên được dùng luôn nhé. Do ở đây là mình đã cài rồi . Download File code Fields ở đây và import vào Plugin Sau khi người dùng import ACF- file vào rồi thì người mua sửa Bất cứ sản phẩm chỉ nào sẽ thấy có các field mới được thêm vào để quý khách được nhập thông số tặng lớn sản phẩm: Đây mới chỉ đơn thuần là tạo Custom Field tặng đích Post type = mặt hàng, nghĩa là hệ thống 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 rất cần thiết 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 chi tiết món đồ Woocommerce có tới 9 kiểu layout đưa 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 để tìm đến sâu bảng thông số kỹ thuật đượ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 tắc cả 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 tặng bỗng nhiên trang mặt hàng thì phải gọi file product-right-sidebar-full.php để tìm đến sâu lập trình quá hiển thị bảng thông số kỹ thuật:Các bạn copy hầu hết đoạn lập trình vẫn 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 nhỏ?>

<?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 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 lớ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 chính ?>

<?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 chẳng?>

<?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 đó, khách hàng paste toàn bộ cần đoạn lập trình mới đó lên đầu file share.php như là xa 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 được ý và hiển thị đẹp rực rỡ nha!

CSS đưa cho PC

Khách hàng vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste tất cả đoạn CSS này vào nha:

CSS đưa cho mobile - copy tất cả đoạn code CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile