Hướng dẫn sử dụng Advance Custom Fields tạo bảng thông số – khuyến mãi cho wordpress

Đối với những ai làm web về công nghệ ( máy tính, điện thoại, laptop,… ). Thì bảng thông số kĩ thuật như là 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 mô tả sản phẩm của web phải không? Sau đây Siêu Tốc Việt sẽ hướng dẫn các bạn làm 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 kiến thức về code và cũng như mình có thể không cần phải bỏ chi phí để code cả.

Việc này cũng không quá phức tạp, các bạn chỉ cần làm theo từng bước như mình hướng dẫn là được thôi.

Tuy nhiên, mình đang sử dụng theme Flatsome cho bài hướng dẫn này, do đó, bạn nào sử dụng theme Flatsome có thể làm theo y nguyên, còn các bạn sử dụng theme khác có thể 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ự làm được thì việc sử 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 code 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, tìm tới mục PluginCài mới – Gõ “Advanced Custom Field” vào khung tìm kiếm trên kho plugin miễn phí của WordPress.

Sau khi các bạn cài đặt thành công plugin “Advanced Custom Fields” thì các bạn kích hoạt để có thể sử 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 các bạn import ACF- file vào rồi thì các bạn sửa bất cứ sản phẩm nào sẽ thấy có các field mới được thêm vào để các bạn nhập thông số 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à hệ thống cho phép bạn thêm Custom Field để nhập thêm dữ liệu vào sản phẩm 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 sản phẩm Woocommerce có tới 9 kiểu layout cho trang sản phẩm 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 để gọi bảng thông số kỹ thuật 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 định 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 cho trang sản phẩm thì phải tìm đến file product-right-sidebar-full.php để gọi code hiển thị bảng thông số kỹ thuật:Các bạn copy toàn bộ đ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 skthut</h3>
<div class=“row-info”>
<div class=“left”>Bnhtrong</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 }?>
<?php if($camera_phu){?>
<div class=“row-info”>
<div class=“left”>Camera ph</div>
<div class=“right”><?php echo $camera_phu;?></div>
</div>
<?php }?>
<?php if($cpu){?>
<div class=“row-info”>
<div class=“left”>CPU</div>
<div class=“right”><?php echo $cpu;?></div>
</div>
<?php }?>
<?php if($do_phan_giai_man_hinh){?>
<div class=“row-info”>
<div class=“left”>Độ phân gii màn hình</div>
<div class=“right”><?php echo $do_phan_giai_man_hinh;?></div>
</div>
<?php }?>
<?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 }?>
<?php if($he_dieu_hanh){?>
<div class=“row-info”>
<div class=“left”>Hệ điu hành</div>
<div class=“right”><?php echo $he_dieu_hanh;?></div>
</div>
<?php }?>
<?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 }?>
<?php if($ram){?>
<div class=“row-info”>
<div class=“left”>Ram</div>
<div class=“right”><?php the_field(‘ram’);?></div>
</div>
<?php }?>
<?php if($the_sim){?>
<div class=“row-info”>
<div class=“left”>Thsim</div>
<div class=“right”><?php echo $the_sim;?></div>
</div>
<?php }?>
<?php if($the_nho){?>
<div class=“row-info”>
<div class=“left”>Thnh</div>
<div class=“right”><?php echo $the_nho;?></div>
</div>
<?php }?>
</div>
<?php }?>
Paste toàn bộ đoạn code trên vào ngay sau thẻ mở <div id=”product-sidebar”….>

Hiển thị bảng tin khuyến mại bằng advanced custom fields

Các bạn copy toàn bộ đoạn code dưới đây:

<?php
$khuyen_mai_1=get_field(‘khuyen_mai_1’);
$khuyen_mai_2=get_field(‘khuyen_mai_2’);
$khuyen_mai_3=get_field(‘khuyen_mai_3’);
$khuyen_mai_4=get_field(‘khuyen_mai_4’);
$khuyen_mai_5=get_field(‘khuyen_mai_5’);?>
<?php if($khuyen_mai_1) {?>
<div class=“khuyen-mai”>
<h4>Thông tin khuyến mi</h4>
<ul>
<li><?php the_field(‘khuyen_mai_1’);?></li>
<?php if($khuyen_mai_2){?>
<li><?php the_field(‘khuyen_mai_2’);?></li>
<?php }?>
<?php if($khuyen_mai_3){?>
<li><?php the_field(‘khuyen_mai_3’);?></li>
<?php }?>
<?php if($khuyen_mai_4){?><li><?php the_field(‘khuyen_mai_4’);?></li>
<?php }?>
<?php if($khuyen_mai_5){?><li><?php the_field(‘khuyen_mai_5’);?></li>
<?php }?>
</ul>
</div>
<?php };?>

Sau đó, các bạn paste toàn bộ đoạn code đó 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 cho nó theo đúng ý và hiển thị đẹp rực rỡ nha!

CSS cho PC

Các bạn vào Giao diện – tùy biến – Style – Custom CSS – Custom CSS, paste toàn bộ đoạn CSS này vào nha:

.thongsokythuat{
border: 1px solid #e9e9e9;
fontsize: 14px;
display: inlineblock;
borderradius: 5px;
marginbottom:20px;
}
.thongsokythuat h3{
marginbottom: 0;
padding: 10px;
borderbottom: 1px solid #e9e9e9;
background: #fed700;
}
.thongsokythuat .rowinfo{
borderbottom: 1px solid #e9e9e9;
padding: 10px 7px;
display: inlineflex;
clear: both;
width: 100%;
}
.thongsokythuat .rowinfo .left{
width: 43% !important;
color: #a0a0a0;
display: inlineblock;
float: left;
paddingright: 10px;
}
.thongsokythuat .rowinfo .right{
width: 57% !important;
color: black;
display: inlineblock;
float: left;
paddingleft: 10px;
}
.khuyenmai{
border: 1px solid #ffdb97;
padding: 8px;
fontsize: 14px;
borderradius: 4px;
marginbottom: 15px;
lineheight: 18px;
background: #fffbf4;
}
.khuyenmai h4{
color: red;
}
.khuyenmai ul{
marginbottom:0
}
.khuyenmai ul li {
liststyle: none;
background: url(http://dienthoai3.ninhbinhweb.info/wp-content/uploads/2019/08/check@2x.png);
backgroundrepeat: norepeat;
backgroundsize: 14px;
backgroundpositiony: 2px;
paddingleft: 22px;
marginleft: 0;
marginbottom: 10px;}

CSS cho mobile –  copy toàn bộ đoạn code CSS ở dưới paste vào Giao diện – Tùy chỉnh – Style – Custom CSS – Custom CSS Mobile

.productfooter .container {
display: inlinegrid;
}
.productfooter .container .large9 {
order: 1;
}
.productfooter .container .large3 {
order: 3;
}
 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

zalo
messenger