• 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
  • Web Development
    • HTML/CSS
    • Javascript
    • PHP
  • 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 - admin Để 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

0 0 đá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.

Thủ thuật Wordpress

Hướng dẫn thêm trạng thái sản phẩm trong Woocommerce

[Woocommrece] Thêm note phương thức thanh toán Woocommrece

Tự động điền các thuộc tính của ảnh dựa trên tiêu đề

Hướng dẫn cách truyền tiêu đề sản phẩm vào Contact Form 7

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

Chuyển tiêu đề woocommerce chi tiết sản phẩm từ h2 thành h1 trong theme The7

Hướng dẫn chặn update wordpress

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

React Native

Setting ANDROID_HOME enviromental variable on Mac OS X

Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation

All Image/Fast Image in React Native app not working on iOS 14 beta and Xcode 12 beta – Fix image cannot show in iOS 14

Phần mềm hay

Phần mềm download truyện tranh KnightComic

Tải Anhdv Boot 2021 Premium mới nhất làm USB Boot

JetBrains PhpStorm v2020.1.3 Mới Nhất

Evernote – Phần mềm quản lý ghi chú hiệu quả

Phần mềm hỗ trợ tải truyện tranh – KT Manga Downloader

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

wpDiscuz