1BANNER 123
4.8/5 - (177 bình chọ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-image: url(http://core.pttuan410.com/wp-content/uploads/2021/05/hot-sale.png);
    background-size: cover;
    top: -10px;
    left: -10px;
}
.label-custom{
	font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    padding: 3px 8px;
    height: 26px;
    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

16 thoughts on “Label tùy chỉnh cho sản phẩm của woocommerce

  1. Tâm says:

    Hi,
    Cái này nó chỉ hiển thị trong SHOP, còn ví dụ ở ngoài trang chủ khi build mình thêm Sản phẩm = UIX thì nó ko hiển thị Tuấn ak, bạn làm thêm 1 functions cho nó hiển thị ở trang chủ khi thêm vào đc ko? tks b

    • Thành Tuấn says:

      Bạn xem lại thử nhé, vì hàm mình sử dụng hiển thị ở trang chủ và cả ở trang shop, rất có thể bạn đã display none hoặc không mở 1 option nào đó lên rồi

  2. Son says:

    Bạn ơi mình làm okie rồi. Nhưng icon png của web bạn lỗi. Bạn up lại ảnh nhé

    Có cách nào customs lại cái label sale/new mặc định của flatsome không bạn? Cho đẹp hơn kiểu hình tam giác góc phải màn hình thì trọn vẹn luôn :))

    Cám ơn

    • Thành Tuấn says:

      Bạn cho mình xin website, có khá nhìu bạn làm được, k biết web bạn hiển thị lỗi gì nhỉ, mình cũng đã test rất nhiều lần, bạn kiểm tra lại nhé

    • Thành Tuấn says:

      Bạn sử dụng theme gì, bài viết mình hỗ trợ theme Flatsome nhé. Hoặc bạn có thể ib mình website của bạn để mình check

  3. T says:

    không thấy dùng được nữa ad ơi
    mình dung flatsome bản mới nhất thêm vào function ko hiênj mà con mất luôn cái giảm giá mặc điịnh

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 *