• Bỏ qua primary navigation
  • Skip to main content
  • Bỏ qua primary sidebar

Thủ thuật thiết kế website

Chia sẻ kinh nghiệm thiết kế website

  • Trang chủ
  • Joomla
    • Thủ thuật Joomla
    • Joomla Extensions
    • Joomla Themes
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • PHP Framework
    • Codeigniter
    • Laravel
    • Laminas
  • App Developer
    • React Native
    • Flutter
  • SEO
  • Chia sẻ
  • Phần mềm
Bạn đang ở:Trang chủ / Wordpress / Thủ thuật WordPress / [Woocommerce] Label tùy chỉnh cho sản phẩm của Woocommerce

[Woocommerce] Label tùy chỉnh cho sản phẩm của Woocommerce

05/11/2021 - Administrator Để lại bình luận

Như mọi người đã biết thì hiện tại woocommerce chỉ hỗ trợ 1 đến 2 label duy nhất cho phần product box. Mà phần này thì không thể tùy chỉnh được như ý muốn của mình.

Label này cũ mà nhìn chán nhỉ?

Ngày hôm nay mình sẽ chia sẻ cho các anh em newbie 1 đoạn code hiển thị thêm label và dĩ nhiên các bạn hoàn toàn có thể tùy biến cho label đó rồi, demo nó sẽ như thế này nhé.

Mẫu label mới

Nào bắt tay vào làm thôi.

Các bước mình sẽ thực hiện trong bài viết:

  • Tạo custom field text và radio bằng chính code của woocommerce.
  • Save dữ liệu.
  • Hiển thị dữ liệu ra frontend (Mình dùng hook của Flatsome, nên các bạn dùng theme khác thì lưu ý nhé.)
  • Toàn bộ code ( Ngoại trừ CSS ) các bạn cop vào file function.php nhé.
  • Lưu ý ở chỗ radio các bạn chọn cho mình giảm giá nhé, vì phần CSS của mình sẽ dành cho đoạn này.

Tạo custom field text và radio bằng code của woocommerce.

Phần này các bạn có thể tham khảo ở bài viết: Các tạo custom field woocommerce mà mình đã viết để biết thêm các field mà woo hỗ trợ nhé.

Ở đây mình sẽ dùng text và radio.

function pttuan_custom_fields() {
    global $woocommerce, $post;
    echo '<div class="options_group">';
    woocommerce_wp_radio( 
      array( 
        'id'            => '_radio_custom', 
        'label'         => __('Lựa chọn label muốn hiển thị', 'woocommerce' ), 
         'wrapper_class' => 'custon-radio',
        'options' => array(
          'km'   => __( 'Khuyến mãi', 'woocommerce' ),
          'gg'   => __( 'Giảm giá', 'woocommerce' ),
          'bcn' => __( 'Bán chạy nhất', 'woocommerce' )
          )
        )
      );
    woocommerce_wp_text_input(
        array(
            'id'          => '_text_custom',
            'label'       => __( 'Text muốn hiển thị', 'woocommerce' ),
            'placeholder' => 'Điền label bạn vào đây',
        )
    );
    echo '</div>';
}
add_action( 'woocommerce_product_options_reviews', 'pttuan_custom_fields' );

Như vậy là mình đã tạo thành công 2 field text và radio rồi, các bạn kiểm tra xem đã paste code đúng chưa nhé.

Tạo thành công field text và radio

Save dữ liệu và database

Sau khi tạo thành công 2 field trên, chúng ta sẽ tiến hành lưu dữ liệu lại bằng đoạn code sau;

function pttuan_custom_field_save( $post_id ){
    $woocommerce_text_field = $_POST['_text_custom'];
    update_post_meta( $post_id, '_text_custom', esc_attr( $woocommerce_text_field ) );
    $woocommerce__radio_custom = $_POST['_radio_custom'];
    update_post_meta( $post_id, '_radio_custom', esc_attr( $woocommerce__radio_custom ) );
}
add_action( 'woocommerce_process_product_meta', 'pttuan_custom_field_save' );

Bạn thử thêm text vào ô ” Text muốn hiển thị ” và lưu lại xem nó có thay đổi không. Nếu vẫn thấy text bạn vừa nhập thì xin chúc mừng bạn đã save thành công. Chuyển sang bước hiển thị ra frontend thôi.

Hiển thị dữ liệu ra Frontend

Ở bước này mình sẽ gọi các dữ liệu đã lưu ra ngoài frontend, vị trí mình gọi sẽ là flatsome_woocommerce_shop_loop_images. Hook này nằm ở phía trên đầu của hình ảnh sản phẩm.

Các bạn có thể tìm các hook của flatsome bằng cách tải plugin show all hook flatsome mà mình đã viết nhé.

function label_pttuan(){
    global $product;
    $data = $product->get_meta( '_text_custom' );
    $loai_label = $product->get_meta( '_radio_custom' );
    if(!empty($data)){
        echo '<div class="label-custom '.$loai_label .'"><span>'.$data.'</span></div>';
    }
}
add_action('flatsome_woocommerce_shop_loop_images','label_pttuan');

Các bạn thêm 1 chút CSS để nó trở nên đẹp hơn nhé, mình sử dụng CSS sau:

.gg span{
    padding-left: 15px;
}
.gg:before{
    content: '';
    height: 35px;
    position: absolute;
    width: 35px;
    background-color : #EB6428;
    top: -10px;
    left: -10px;
}
.label-custom{
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    padding: 3px 8px;
    height: auto;
    background-color: #EA6423;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px -5px #333;
}
.label-custom.km{
    background-color: #657bd2;
}
.label-custom.bcn{
    background-color: #0d1620;
}
.badge-container{
    display:none;
}

Và đầy là kết quả, các bạn lưu ý giúp mình chọn cái Giảm giá để có được hình giống demo né.

3 label tương ứng 3 radio

Nguồn : https://pttuan410.com

5 1 đánh giá
Article Rating
Theo dõi
Đăng nhập
Thông báo của
guest
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Sidebar chính

LỜI NGỎ

Đây là blog cá nhân, cung cấp các thông tin, kiến thức và kinh nghiệm về lập trình và cuộc sống. Những bài viết được mình sưu tập từ nhiều nguồn, mọi chi tiết liên quan đến bản quyền xin vui lòng liên hệ qua email kairu2607@gmail.com ! Cám ơn rất nhiều.

Tìm kiếm

Thủ thuật Wordpress

Hướng Dẫn Cấu Hình SMTP Để Gửi Mail Trên WordPress

Cách tự tạo thêm Sidebar cho theme wordpress

Vì Sao Rank Math Vượt Trội – SEO WordPress 2023

Thêm lượt xem bài viết vào WordPress Post Views Counter

Website Bị Hack Virus Index Tiếng Nhật và Toàn Tập Các Cách Xử Lý

Hướng dẫn tạo liên hệ All in one phiên bản có yêu cầu gọi lại

Tạo gợn sóng phân cách bằng SVG trên Flatsome

Codeigniter Framework

[CodeIgniter 4] Codeigniter 4 Remove Public and Index.php From URL

[CodeIgniter 4] How to upload Codeigniter 4 website on share hosting?

Sửa lỗi website Codeigniter 2.x không chạy được với PHP 7.x

[CodeIgniter 4] Sử dụng cURL trong CodeIgniter 4

[CodeIgniter 4] Sử dụng cache để tăng tốc website trong CodeIgniter 4

[CodeIgniter 4] Xử lý hình ảnh chuyên nghiệp trong CodeIgniter 4

[CodeIgniter 4] Hướng dẫn gửi mail trong CodeIgniter 4

Dịch vụ Thiết Kế Website

Laravel

How To Create A Todo List Application In React Native With Laravel Backend

Laravel Cũng Có Notifications?

Cách Bảo Mật Đơn Giản Trong Laravel Bằng Ẩn Config Quan Trọng

Tạo Desktop Notification đơn giản và dể hiểu

Vime thư viện HTML5 Player vừa đẹp mà vừa ngon

Laravel domPDF cách tùy biến Font chữ bất chấp mọi thể loại

Phần mềm hay

Byebye Edge Chromium/Microsoft Edge

Hướng dẫn tắt Gatekeeper (Bật tùy chọn Anywhere) sửa lỗi “damaged and can’t be opened. You should move it to the Trash”

Cài lại macOS trên Mac Silicon (M1) “sạch trơn” bằng macOS Recovery

Cách vào Recovery [Startup Options] trên Mac dùng chip Apple Silicon [M1]

Hướng dẫn tắt System Integrity Protection (SIP) để chạy App Cr4ck

Copyright © 2023 · Metro Pro on Genesis Framework · WordPress · Đăng nhập

wpDiscuz