Add custom fieds to Product Page - No plugin
Custom Product page layout
Copy product-right-sidebar.php (woocommerce -> single-product -> layouts) to child-theme
Repalce all with below code
<div class="product-container">
<div class="product-main">
<div class="header-product-single row mb-0 content-row">
<div class="product-head col large-10">
<?php woocommerce_template_single_title(); ?>
<?php woocommerce_template_single_rating(); ?>
</div>
<div class="fb-like product-head-share col large-1" data-href="'. get_permalink() .'" data-width="550" data-layout="button" data-action="like" data-size="small" data-share="true"></div>
<?php
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10)
?>
</div>
<div class="row mb-0 content-row details-product">
<div class="product-gallery large-<?php echo flatsome_option('product_image_width'); ?> col">
<?php
/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
</div>
<div class="product-info summary large-4 col entry-summary <?php flatsome_product_summary_classes();?>">
<?php
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<div class="xso-product-info-extra-col-right col col-fit">
<?php
$product_in_box = get_post_meta( get_the_ID(), '_product_textarea_in_box', true );
if ( ! empty( $product_in_box ) ) {
$arr_product_inbox = explode(";",$product_in_box);
echo '<div class="in-box"><h3>Sản phẩm bao gồm</h3>';
foreach ($arr_product_inbox as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
}
$product_giamgia = get_post_meta( get_the_ID(), '_product_textarea_giamgia', true );
if ( ! empty( $product_giamgia) ) {
$arr_product_giamgia = explode(";",$product_giamgia);
echo '<div class="giam-gia"><h3>Mua càng nhiều - Giá càng giảm:</h3>';
foreach ($arr_product_giamgia as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
}
$product_list_showroom = get_post_meta( get_the_ID(), '_product_textarea_list_showroom', true );
if ( ! empty( $product_list_showroom ) ) {
$arr_product_list_showroom = explode(";",$product_list_showroom);
echo '<div class="list-showroom"><h3>Danh sách chi nhánh</h3>';
echo '<div class="showroom scrollbar" id="style-1">';
echo '<div class="force-overflow">';
foreach ($arr_product_list_showroom as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
echo '</div>';
}
?>
</div>
</div>
<div class="product-footer">
<div class="container">
<?php
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_upsell_display - 15
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
</div>
</div>
PHP
// Thêm field vào quản trị sản phẩm
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_add_fields');
function woocommerce_product_add_fields()
{
global $woocommerce;
echo '<div class="product_custom_field">';
// Custom Product Text Field
woocommerce_wp_text_input(
array(
'id' => '_product_text_field_nhan_hang_1h',
'placeholder' => 'Ghi chú hiển thị dưới giá tiền',
'label' => __('Ghi chú', 'xso'),
'placeholder' => __('Vd: Nhận hàng trong 1 giờ', 'xso'),
'value' => __('Nhận hàng trong 1 giờ', 'sxo'),
'desc_tip' => 'true',
'description' => 'Không nhập sẽ bỏ trống'
)
);
//Text Area Field - Khuyến mãi
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_km',
'label' => __( 'Khuyến mãi', 'xso' ),
'placeholder' => 'Nhập các khuyến mãi dành cho sản phẩm, xuống hàng bằng dấu ;',
'value' => __('Tặng 1 chậu sứ;
Tặng 1 bao vải bố trang trí bọc chậu;
Tặng 1 bao phân bò đã qua xử lý (500g);
Tặng 1 chai kích rễ tăng trưởng (50ml)'),)
);
//Text Area Field - Trong hộp có
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_in_box',
'label' => __( 'Sản phẩm bao gồm', 'xso' ),
'placeholder' => 'Nhập chi tiết linh kiện sản phẩm, xuống hàng bằng dấu ;',
'value' => __('Cây 1 năm tuổi, chậu sứ, 1 bao phân bò đã qua xử lý (500g).'),)
);
//Text Area Field - Mua càng nhiều giá càng giảm
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_giamgia',
'label' => __( 'Giảm giá % theo tổng đơn hàng', 'xso' ),
'placeholder' => 'Nhập mức giá giảm, xuống hàng bằng dấu ;',
'value' => __('Giảm 3% đơn hàng từ 2,000,000 ₫;
Giảm 5% đơn hàng từ 5,000,000 ₫;
Giảm 8% đơn hàng từ 8,000,000 ₫;
Giảm 10% đơn hàng từ 15,000,000 ₫;
Giảm 12% đơn hàng từ 25,000,000 ₫;
Giảm 15% đơn hàng từ 50,000,000 ₫'))
);
//Text Area Field - Danh sách chi nhánh
woocommerce_wp_textarea_input(
array(
'id' => '_product_textarea_list_showroom',
'label' => __( 'Danh sách chi nhánh', 'xso' ),
'placeholder' => 'Nhập danh sách các chi nhánh, xuống hàng bằng dấu ;',
'value' => __('Khu vực HCM:;
81 Nguyễn Minh Hoàng, P.12, Q. Tân Bình, TP.HCM - Hotline: 091 313 4439;
460 đường Nguyễn Thị Định, phường Thạnh Mỹ Lợi, Quận 2, TP.HCM - Hotline: 0916.891.003;
2 Đường số 4, P. Tân Phú, Quận 7, TP. HCM - Hotline: 0901 195 648;
Khu vực Hà Nội:;
10A Phố Nguyễn Lân, Phương Liệt, Q. Thanh Xuân, Hà Nội - Hotline: 0963 065 386;
271 Nguyễn Hoàng Tôn, P. Xuân La, Quận Tây Hồ, Hà Nội -
Hotline: 0393 395 386;
Khu vực Đà Nẵng:;
222 Nguyễn Đình Tựu, Phường An Khê, Quận Thanh Khê, Thành phố Đà Nẵng - Hotline: 0336 395 386')
)
);
echo '</div>';
}
//Lưu các field vào DB
function woocommerce_product_fields_save($post_id) {
// Lưu - Giao hàng 1h
$woocommerce_product_text_field_1h = $_POST['_product_text_field_nhan_hang_1h'];
if (!empty($woocommerce_product_text_field_1h))
update_post_meta($post_id, '_product_text_field_nhan_hang_1h', esc_attr($woocommerce_product_text_field_1h));
// Lưu - Khuyến mãi
$woocommerce_procut_textarea_km = $_POST['_product_textarea_km'];
if (!empty($woocommerce_procut_textarea_km))
update_post_meta($post_id, '_product_textarea_km', esc_html($woocommerce_procut_textarea_km));
// Lưu - Trong hộp
$woocommerce_procut_textarea_in_box = $_POST['_product_textarea_in_box'];
if (!empty($woocommerce_procut_textarea_in_box))
update_post_meta($post_id, '_product_textarea_in_box', esc_html($woocommerce_procut_textarea_in_box));
// Lưu - Danh sách
$woocommerce_procut_textarea_list_showroom = $_POST['_product_textarea_list_showroom'];
if (!empty($woocommerce_procut_textarea_list_showroom))
update_post_meta($post_id, '_product_textarea_list_showroom', esc_html($woocommerce_procut_textarea_list_showroom));
// Lưu - Giảm giá
$woocommerce_procut_textarea_giamgia = $_POST['_product_textarea_giamgia'];
if (!empty($woocommerce_procut_textarea_giamgia))
update_post_meta($post_id, '_product_textarea_giamgia', esc_html($woocommerce_procut_textarea_giamgia));
}
add_action('woocommerce_process_product_meta', 'woocommerce_product_fields_save');
//Hiển thị ra trang sản phẩm
function display_front_end() {
// Hiển thị nhận hàng 1 h
$product_1h = get_post_meta( get_the_ID(), '_product_text_field_nhan_hang_1h', true );
if ( ! empty( $product_1h ) ) {
echo '<span class="giao-hang-1h">'.$product_1h.'</span>';
}
// Hiển thị Ưu đãi - Khuyến mãi
$product_khuyenmai = get_post_meta( get_the_ID(), '_product_textarea_km', true );
if ( ! empty( $product_khuyenmai ) ) {
$arr_product_khuyenmai = explode(";",$product_khuyenmai);
echo '<div class="khuyen-mai"><span class="title">Khuyến mãi cho sản phẩm này</span>';
foreach ($arr_product_khuyenmai as $value) {
echo '<span>'.$value.'</span><br/>';
}
echo '</div>';
}CSS
/************ tên sản phẩm*********/
.single-product .product-container .product-main .product-head {padding: 10px 20px;background: #fff; margin: 0;}
.product-head .product-title {margin:0px!important;}
button.single_add_to_cart_button.button.alt{width: 68%!important;}
a.devvn_buy_now_style{margin-top:-34px;max-width:100%;display:block}
/******** ghi chú ********/
span.giao-hang-1h {
border-radius: 4px;
line-height: 30px;
border: 1px solid #c4ddc8;
display: block;
color: #30a43b;
background: #ecf7ed;
padding: 5px 10px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
margin-bottom: 15px;
margin-top: 5px;
}
span.giao-hang-1h:before {
content: '';
background: url(/wp-content/uploads/2021/06/icon_nhan_hang_1_gio.png) no-repeat;
width: 19px;
height: 21px;
background-size: 19px 21px;
margin-right: 10px;
float: left;
margin-top: 4px;
}
/********* khuyến mãi *********/
.khuyen-mai span:before, .cket span:before {
content: '';
background: url(/wp-content/uploads/2021/06/icon-check.png) no-repeat;
display: inline-block;
position: relative;
width: 16px;
height: 16px;
background-size: contain;
vertical-align: middle;
margin-right: 8px;
margin-bottom:3px;
}
.khuyen-mai {
margin-top: 30px;
border: 1px solid #e00000;
padding: 20px 10px 10px 10px;
border-radius: 7px;
font-size: 15px;
color: #4c4c4c;
margin-bottom: 20px;
}
.khuyen-mai .title:before{
background:none;
margin:0;
width:0;
}
.khuyen-mai .title {
position: absolute;
margin-top: -35px;
background: #fff;
padding: 1px 8px;
color: #ff0000;
font-weight: 700;
font-size: 16px;
}
/*********Cột chi tiết********/
@media (max-width:992px){
.xso-product-info-extra-col-right{
border-left: none!important;
}}
.xso-product-info-extra-col-right{
border-left: 1px solid #e3e3e3;
padding-top:18px;
}
.xso-product-info-extra-col-right h3{
font-size: 16px;
color: #30a43b;
}
/***** danh sách chi nhánh ******/
.in-box span, .giam-gia span {
margin: 5px 0;
display: inline-block;
line-height: 1.3;
font-size: 14px;
color: #333;
}
.giam-gia span:before {
content: '';
background: url(/wp-content/uploads/2021/06/hot.png) no-repeat;
display: inline-block;
position: relative;
width: 16px;
height: 16px;
background-size:contain;
vertical-align: middle;
margin-right: 0px;
margin-bottom:3px
}
.list-showroom, .giam-gia{
margin-top:20px
}
.list-showroom .showroom .force-overflow span:nth-child(1), .list-showroom .showroom .force-overflow span:nth-child(9), .list-showroom .showroom .force-overflow span:nth-child(15) {
font-weight: bold;
color:#ec1136;
}
.list-showroom .showroom .force-overflow span:nth-child(1):before , .list-showroom .showroom .force-overflow span:nth-child(9):before , .list-showroom .showroom .force-overflow span:nth-child(15):before {
background:none;
margin-left:-20px!important;
}
.list-showroom .showroom .force-overflow span:before {
content: '';
background: url(/wp-content/uploads/2021/06/icondt.png) no-repeat;
background-position: -76px -51px;
display: inline-block;
position: relative;
width: 18px;
height: 20px;
vertical-align: middle;
margin-right: 3px;
margin-bottom:3px
}
.list-showroom span {
margin: 5px 0;
border-bottom: solid 1px #f1f0f0;
padding-bottom: 10px;
width: 100%;
display: inline-block;
line-height: 1.3;
font-size: 14px;
color: #333;
}
.scrollbar {
float: left;
height: 280px;
margin-bottom: 0px;
margin-top: 6px;
overflow-y: scroll;
padding-right: 5px;
}
#style-1::-webkit-scrollbar {
width: 2px;
background-color:#000!important;
}
#style-1::-webkit-scrollbar-thumb {
color: #ec1136!important;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%)!important;
background-color: #F3F3F3!important;
}
Last updated