Buat Custom Badge di Halaman Single Produk Woocommerce

custom badge di produk woocommerce

Ada banyak plugin di luar sana untuk menampilkan lencana/badge, pemberitahuan, pesan khusus… tetapi seperti biasa, beberapa baris PHP dapat membantu Anda mencapai hasil yang sama!

Hari ini kita melihat cara menambahkan kotak centang ke halaman edit produk, sehingga Anda dapat menampilkan lencana bersyarat berdasarkan apakah kotak centang dicentang atau tidak.

 

Baca juga Membuat Popular Artikel di Elementor

Masukan Kode Untuk Tampilan Backend

Kode untuk di backend website , masukan pada functions.php : 

 

add_action( ‘woocommerce_single_product_summary’, ‘nw_echo_short_desc_if_empty’, 21 ); 

function nw_echo_short_desc_if_empty() {

   global $post;

   if ( empty ( $post->post_excerpt  ) ) {

      $global_excerpt = ‘<p class=”default-short-desc”>’;

      $global_excerpt .= ‘This is the default, global, short description.<br>It will show if <b>no short description has been entered!</b>’;

      $global_excerpt .= ‘</p>’;

      echo $global_excerpt;

   }

}

 

add_action( ‘woocommerce_product_options_general_product_data’, ‘nw_add_badge_checkbox_to_products’ );        

  

function nw_add_badge_checkbox_to_products() {           

woocommerce_wp_checkbox( array( 

‘id’ => ‘custom_badge’, 

‘class’ => ”, 

‘label’ => ‘Show Custom Badge’

);      

}

 

Hasil

Kita bisa mengatur sendiri apakah badge akan ditampilkan atau tidak

Masukan kode untuk Tampilan Frontend

Masukan kode berikut di functions.php : 

 

add_action( ‘woocommerce_single_product_summary’, ‘nw_display_badge_if_checkbox’, 6 );

function nw_display_badge_if_checkbox() {

    global $product;     

    if ( get_post_meta( $product->get_id(), ‘custom_badge’, true ) ) {

        echo ‘

<div class=”woocommerce-message”>CUSTOM BADGE!</div>

‘;

    }

}

 

Hasil

Custom badge sudah muncul di atas harga. Anda bisa menambahkan warna agar lebih mencolok dengan menggunakan CSS

 

Masukan kode untuk Tampilan Frontend

Masukan kode berikut di functions.php : 

 

add_action( ‘woocommerce_single_product_summary’, ‘bbloomer_display_badge_if_checkbox’, 6 );

  

function bbloomer_display_badge_if_checkbox() {

    global $product;     

    if ( get_post_meta( $product->get_id(), ‘custom_badge’, true ) ) {

        echo ‘

<div class=”woocommerce-message”>CUSTOM BADGE!</div>

 

‘;

    }

}

 

Hasil

 

0

Share

By About

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Niagaweb Blog