WooCommerce product category archive, add additional details

Hi the code below adds an extra field in the WooCommerce product categories section, I need some more extra fields added besides this one. what do I need to change in the code below to add more fields like this one please.

Thank you for your help in advance.

// Add term page
add_action( 'product_cat_add_form_fields', 'wpm_taxonomy_add_new_meta_field', 10, 2 );

function wpm_taxonomy_add_new_meta_field() {
  // this will add the custom meta field to the add new term page
  ?>
  <div class="form-field">
    <label for="term_meta[custom_term_meta]"><?php _e( 'Details', 'wpm' ); ?></label>
    <textarea name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" rows="5" cols="40"></textarea>
    <p class="description"><?php _e( 'Detailed category info to appear below the product list','wpm' ); ?></p>
  </div>
  <?php
}

// Edit term page
add_action( 'product_cat_edit_form_fields', 'wpm_taxonomy_edit_meta_field', 10, 2 );

function wpm_taxonomy_edit_meta_field($term) {

  // put the term ID into a variable
  $t_id = $term->term_id;

  // retrieve the existing value(s) for this meta field. This returns an array
  $term_meta = get_option( "taxonomy_$t_id" );
  $content = $term_meta['custom_term_meta'] ? wp_kses_post( $term_meta['custom_term_meta'] ) : '';
  $settings = array( 'textarea_name' => 'term_meta[custom_term_meta]' );
  ?>
  <tr class="form-field">
  <th scope="row" valign="top"><label for="term_meta[custom_term_meta]"><?php _e( 'Details', 'wpm' ); ?></label></th>
    <td>
      <?php wp_editor( $content, 'product_cat_details', $settings ); ?>
      <p class="description"><?php _e( 'Detailed category info to appear below the products list','wpm' ); ?></p>
    </td>
  </tr>
<?php
}

// Save extra taxonomy fields callback function
add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 );  
add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 );

function save_taxonomy_custom_meta( $term_id ) {
  if ( isset( $_POST['term_meta'] ) ) {
    $t_id = $term_id;
    $term_meta = get_option( "taxonomy_$t_id" );
    $cat_keys = array_keys( $_POST['term_meta'] );
    foreach ( $cat_keys as $key ) {
      if ( isset ( $_POST['term_meta'][$key] ) ) {
        $term_meta[$key] = wp_kses_post( stripslashes($_POST['term_meta'][$key]) );
      }
    }
    // Save the option array.
    update_option( "taxonomy_$t_id", $term_meta );
  }
}


// Display details on product category archive pages
add_action( 'woocommerce_after_subcategory_title', 'wpm_product_cat_archive_add_meta' );

function wpm_product_cat_archive_add_meta() {
  $t_id = get_queried_object()->term_id;
  $term_meta = get_option( "taxonomy_$t_id" );
  $term_meta_content = $term_meta['custom_term_meta'];
  if ( $term_meta_content != '' ) {
    echo '<div class="woo-sc-box normal rounded full">';
      echo apply_filters( 'the_content', $term_meta_content );
    echo '</div>';
  }
}

Related posts

1 comment

  1. For adding more field you have to add more form field in your function and then save that in save function.Look my below function there I created an extra fieldproduct_cat_thumbnailbig_id for creating custom image upload option in category section. Here your detais section also working. Follow my code and create as many field you want.

    // Add term page
    add_action( 'product_cat_add_form_fields', 'wpm_taxonomy_add_new_meta_field', 10, 2 );
    
    function wpm_taxonomy_add_new_meta_field() {
      // this will add the custom meta field to the add new term page
     ?>
    
    <div class="form-field">
        <label for="term_meta[custom_term_meta]"><?php _e( 'Details', 'wpm' ); ?></label>
        <textarea name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" rows="5" cols="40"></textarea>
        <p class="description"><?php _e( 'Detailed category info to appear below the product list','wpm' ); ?></p>
    </div>
    <div class="form-field">
            <label><?php _e( 'Thumbnail', 'woocommerce' ); ?></label>
            <div id="product_cat_thumbnailbig" style="float: left; margin-right: 10px;"><img src="<?php echo esc_url( wc_placeholder_img_src() ); ?>" width="60px" height="60px" /></div>
            <div style="line-height: 60px;">
                <input type="hidden" id="product_cat_thumbnailbig_id" name="product_cat_thumbnailbig_id" />
                <button type="button" class="upload_image_buttonbig button"><?php _e( 'Upload/Add image', 'woocommerce' ); ?></button>
                <button type="button" class="remove_image_buttonbig button"><?php _e( 'Remove image', 'woocommerce' ); ?></button>
            </div>
            <script type="text/javascript">
    
                // Only show the "remove image" button when needed
                if ( ! jQuery( '#product_cat_thumbnailbig_id' ).val() ) {
                    jQuery( '.remove_image_buttonbig' ).hide();
                }
    
                // Uploading files
                var file_frame;
    
                jQuery( document ).on( 'click', '.upload_image_buttonbig', function( event ) {
    
                    event.preventDefault();
    
                    // If the media frame already exists, reopen it.
                    if ( file_frame ) {
                        file_frame.open();
                        return;
                    }
    
                    // Create the media frame.
                    file_frame = wp.media.frames.downloadable_file = wp.media({
                        title: '<?php _e( "Choose an image", "woocommerce" ); ?>',
                        button: {
                            text: '<?php _e( "Use image", "woocommerce" ); ?>'
                        },
                        multiple: false
                    });
    
                    // When an image is selected, run a callback.
                    file_frame.on( 'select', function() {
                        var attachment = file_frame.state().get( 'selection' ).first().toJSON();
    
                        jQuery( '#product_cat_thumbnailbig_id' ).val( attachment.id );
                        jQuery( '#product_cat_thumbnailbig img' ).attr( 'src', attachment.sizes.thumbnail.url );
                        jQuery( '.remove_image_buttonbig' ).show();
                    });
    
                    // Finally, open the modal.
                    file_frame.open();
                });
    
                jQuery( document ).on( 'click', '.remove_image_buttonbig', function() {
                    jQuery( '#product_cat_thumbnailbig img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
                    jQuery( '#product_cat_thumbnailbig_id' ).val( '' );
                    jQuery( '.remove_image_buttonbig' ).hide();
                    return false;
                });
    
            </script>
            <div class="clear"></div>
        </div>
     <?php
      }
    
     // Edit term page
    add_action( 'product_cat_edit_form_fields', 'wpm_taxonomy_edit_meta_field', 10, 2 );
    
     function wpm_taxonomy_edit_meta_field($term) {
        $thumbnail_idb = absint( get_woocommerce_term_meta( $term->term_id, 'thumbnail_idb', true ) );
      if ( $thumbnail_idb ) {
            $imageb = wp_get_attachment_thumb_url( $thumbnail_idb );
          } else {
            $imageb = wc_placeholder_img_src();
        }
    
        // put the term ID into a variable
       $t_id = $term->term_id;
    
       // retrieve the existing value(s) for this meta field. This returns an array
       $term_meta = get_option( "taxonomy_$t_id" );
       $content = $term_meta['custom_term_meta'] ? wp_kses_post($term_meta['custom_term_meta'] ) : '';
       $settings = array( 'textarea_name' => 'term_meta[custom_term_meta]' );
       ?>
       <tr class="form-field">
         <th scope="row" valign="top"><label for="term_meta[custom_term_meta]"><?php _e( 'Details', 'wpm' ); ?></label></th>
       <td>
      <?php wp_editor( $content, 'product_cat_details', $settings ); ?>
      <p class="description"><?php _e( 'Detailed category info to appear below the products list','wpm' ); ?></p>
    </td>
    </tr>
    <tr class="form-field">
            <th scope="row" valign="top"><label><?php _e( 'Thumbnail', 'woocommerce' ); ?></label></th>
            <td>
                <div id="product_cat_thumbnailbig" style="float: left; margin-right: 10px;"><img src="<?php echo esc_url( $imageb ); ?>" width="60px" height="60px" /></div>
                <div style="line-height: 60px;">
                    <input type="hidden" id="product_cat_thumbnailbig_id" name="product_cat_thumbnailbig_id" value="<?php echo $thumbnail_id; ?>" />
                    <button type="button" class="upload_image_buttonbig button"><?php _e( 'Upload/Add image', 'woocommerce' ); ?></button>
                    <button type="button" class="remove_image_buttonbig button"><?php _e( 'Remove image', 'woocommerce' ); ?></button>
                </div>
                <script type="text/javascript">
    
                    // Only show the "remove image" button when needed
                    if ( '0' === jQuery( '#product_cat_thumbnailbig_id' ).val() ) {
                        jQuery( '.remove_image_buttonbig' ).hide();
                    }
    
                    // Uploading files
                    var file_frame;
    
                    jQuery( document ).on( 'click', '.upload_image_buttonbig', function( event ) {
    
                        event.preventDefault();
    
                        // If the media frame already exists, reopen it.
                        if ( file_frame ) {
                            file_frame.open();
                            return;
                        }
    
                        // Create the media frame.
                        file_frame = wp.media.frames.downloadable_file = wp.media({
                            title: '<?php _e( "Choose an image", "woocommerce" ); ?>',
                            button: {
                                text: '<?php _e( "Use image", "woocommerce" ); ?>'
                            },
                            multiple: false
                        });
    
                        // When an image is selected, run a callback.
                        file_frame.on( 'select', function() {
                            var attachment = file_frame.state().get( 'selection' ).first().toJSON();
    
                            jQuery( '#product_cat_thumbnailbig_id' ).val( attachment.id );
                            jQuery( '#product_cat_thumbnailbig img' ).attr( 'src', attachment.sizes.thumbnail.url );
                            jQuery( '.remove_image_buttonbig' ).show();
                        });
    
                        // Finally, open the modal.
                        file_frame.open();
                    });
    
                    jQuery( document ).on( 'click', '.remove_image_buttonbig', function() {
                        jQuery( '#product_cat_thumbnailbig img' ).attr( 'src', '<?php echo esc_js( wc_placeholder_img_src() ); ?>' );
                        jQuery( '#product_cat_thumbnailbig_id' ).val( '' );
                        jQuery( '.remove_image_buttonbig' ).hide();
                        return false;
                    });
    
                </script>
                <div class="clear"></div>
            </td>
            </tr>
            <?php
             }
    
        // Save extra taxonomy fields callback function
        add_action( 'edited_product_cat', 'save_taxonomy_custom_meta', 10, 2 );  
        add_action( 'create_product_cat', 'save_taxonomy_custom_meta', 10, 2 );
    
    function save_taxonomy_custom_meta( $term_id) {
    
    
    if ( isset( $_POST['term_meta'] ) ) {
    $t_id = $term_id;
    $term_meta = get_option( "taxonomy_$t_id" );
    $cat_keys = array_keys( $_POST['term_meta'] );
    foreach ( $cat_keys as $key ) {
      if ( isset ( $_POST['term_meta'][$key] ) ) {
        $term_meta[$key] = wp_kses_post( stripslashes($_POST['term_meta'][$key]) );
      }
    }
    // Save the option array.
    update_option( "taxonomy_$t_id", $term_meta );
    }
    
     if ( isset( $_POST['product_cat_thumbnailbig_id'] ) ) {
            update_woocommerce_term_meta( $term_id, 'thumbnail_idb', absint( $_POST['product_cat_thumbnailbig_id'] ) );
        }
      }
    

Comments are closed.