Đối với những ai thực hiện có thể có thể chỉ website sẽ về kỹ thuật thường ( máy tính, điện thoại, laptop,… ). Thì bảng thông số kĩ thuật như là đột nhiên 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 bộc lộ mặt hàng của website dài phải không? Sau đây cực kỳ Tốc Việt sẽ hướng dẫn khách hàng làm 1 bảng thông số kĩ thuật tiên tiến lớn nhất nhé !!! Bạn khả năng cao tự thực hiện quá 1 bảng thông số kĩ thuật mà chẳng nên kiến thức về code và tương tự như ngay mình thường xuyên nhẹ nhẹ cũng không nên bỏ chi phí để code cả. Việc này cũng không quá phức tạp, các bạn chỉ nên làm sớm nhỏ bỗng nhiên theo từng ngắn bước như là không mình hướng dẫn là được thôi. Tuy nhiên nhẹ lại thường , 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 có lẽ thực hiện chính theo y nguyên, còn người dùng dùng theme khác có lẽ tìm đến chẳng không thể 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 xuyên quá tự làm đượ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 đa dạng code nên chúng ta mở đầu ngay tiến hành thiết đặt nhé !!! người mua vào trang quản trị Wp đột nhiên , tìm 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 Word press. Sau khi quý khách được chớ thiết lập quá thành công plugin “Advanced Custom Fields” thì người dùng kích hoạt để có lẽ 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 dùng import ACF- file vào rồi thì người mua sửa Cho dù chậm mặt hàng nào sẽ thấy sở hữu ngay 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 cho Post type = sản phẩm đã , nghĩa là kế hoạch ngắn tặng đích phép bạn thêm Custom Field để nhập thêm data vào món đồ trong backend thôi, việc trọng yếu chậm 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 lắm 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 với dài để liên hệ bảng thông số công nghệ 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 tắc chính 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 để gọi lập trình quá hiển thị bảng thông số kỹ thuật:Các bạn copy đa số đoạn lập trình đã 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 lớ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 lớ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 ngay ?>

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

<?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 gầ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 những dễ ?>

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

</div>

<?php ?>

Sau đó, quý khách chậm paste mọi đoạn code đó lên đầu file share.php như là gần 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 cũng lớn nó theo chính xác ý và hiển thị đẹp rực rỡ nha!

CSS tặng dài PC

Quý khách ngắn 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 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 thế nào