16 June 2020

How to create custom meta boxes on single product page in woocommerce?

Create custom meta boxes on single product page in woocommerce.


/**
 * Display custom field on the front end
 * @since 1.0.0
 */
function wpcodekit_display_custom_field() {
?>
<style>
.custom-field-container {
    float: left;
    justify-content: center;
    align-items: center;
    max-width: 99px;
    padding: 0px 10px;
    text-align: center;
}
img.custom-field-icons {
    margin: auto;
    width: 25px;
    margin-bottom: 0px;
}
.custom-field-outer {
    margin-bottom: 25px;
    float: left;
    width: 100%;
}
.custom_field_title {
    font-size: 12px;
    line-height: 0px !important;
    color: #2d2d2d;
}

.cfwc-custom-field-wrapper {
    line-height: 16px;
}

</style>
<?php

 global $post;
 // Check for the custom field value
 $product = wc_get_product( $post->ID );

 $title_one = $product->get_meta( 'replacement_Days' );
 $title_two = $product->get_meta( 'year_warranty' );
 $title_three = $product->get_meta( 'delivered' );
 echo '<div class="custom-field-outer">';

 if( $title_one ) {
 // Only display our field if we've got a value for the field title
 printf(
 '<div class="custom-field-container"><img src="'.get_stylesheet_directory_uri().'/images/ReturnIcon.png'.'" class="custom-field-icons"><div class="cfwc-custom-field-wrapper"><label for="cfwc-title-field" class="custom_field_title">%s Days Returnable</label></div></div>',
 esc_html( $title_one )
 );
 }


  if( $title_two ) {
 // Only display our field if we've got a value for the field title
 printf(
 '<div class="custom-field-container"><img src="'.get_stylesheet_directory_uri().'/images/Warranty.png'.'" class="custom-field-icons"><div class="cfwc-custom-field-wrapper"><label for="cfwc-title-field" class="custom_field_title">%s</label></div></div>',
 esc_html( $title_two )
 );
 }

 //echo get_stylesheet_directory_uri().'/images/ReturnIcon.png';
  if( $title_three ) {
 // Only display our field if we've got a value for the field title
 printf(
 '<div class="custom-field-container"><img src="'.get_stylesheet_directory_uri().'/images/Lensforu_Delivery.png'.'" class="custom-field-icons"><div class="cfwc-custom-field-wrapper"><label for="cfwc-title-field" class="custom_field_title">%s</label></div></div>',
 esc_html( $title_three )
 );
 }

 echo '</div>';

}
add_action( 'woocommerce_before_add_to_cart_button', 'wpcodekit_display_custom_field' );

No comments:

Post a Comment

How to create youtube videos slider with play and pause option in wordpress?

Create youtube videos slider with play and pause option in wordpress youtube videos slider Use this shortcode:- [punjab_today] function my_...