Adding custom admin image upload metabox field in woocommerce to product category

Question

I am working with a custom theme and would like to add a custom upload field in the woocommerce admin section. Particularly, the categories section. I want to add another field just like the thumbnail upload that stores the information. Image of illustrates what i want to achieve

raunak-gupta in Adding custom field to product category in WooCommerce shares a way forward which I took on and produced this. HELP???

Added uploader.js

jQuery(document).ready( function($){

    var mediaUploader_woo;

    $('#upload-button-woo').on('click',function(e) {
        e.preventDefault();
        if( mediaUploader_woo ){
            mediaUploader_woo.open();
            return;
        }

        mediaUploader_woo = wp.media.frames.file_frame = wp.media({
            title: 'Choose an Image',
            button: { text: 'Choose Image'},
            multiple: false
        });

        mediaUploader_woo.on('select', function(){
            attachment = mediaUploader_woo.state().get('selection').first().toJSON();
            $('#meta-woo').val(attachment.url);
        });

        mediaUploader_woo.open();
    });    

});

I called the media uploader in functions.php

function my_admin_scripts() {
    wp_enqueue_media();

    wp_register_script( 'wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', array('jquery','media-upload','thickbox'), '20130115', true );
    wp_enqueue_script( 'wina_classic-uadmin-js');
}

add_action('admin_print_scripts', 'my_admin_scripts');

then voila..

/*-------------------------------------------------------------------
    Add Custom metabox for woocommerce Category page
---------------------------------------------------------------------*/

function product_cat_add_video_field_rj() {

    ?>
    <div class="form-field">
        <label for="term_meta[video_link]"><?php _e( 'Video Link', 'flatsome' ); ?></label>
        <input type="text" name="term_meta[video_link]" id="term_meta[video_link]" value="">
        <p class="description"><?php _e( 'Enter a Video Link','flatsome' ); ?></p>
    </div>
<?php
}
function product_cat_edit_video_field_rj($term) {


    $t_id = $term->term_id;

    $term_meta = get_option( "taxonomy_$t_id" ); ?>
    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[video_link]"><?php _e( 'Video Link', 'flatsome' ); ?></label></th>
        <td>            
            <input type="text" name="term_meta[video_link]" id="meta-woo" value="<?php echo esc_attr( $term_meta['video_link'] ) ? esc_attr( $term_meta['video_link'] ) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" />
            <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" />
            <p class="description"><?php _e( 'Enter a Video Link','flatsome' ); ?></p>
        </td>
    </tr>
<?php
}

// this action use for add field in add form of taxonomy 
add_action( 'product_cat_add_form_fields', 'product_cat_add_video_field_rj', 10, 2 );
// this action use for add field in edit form of taxonomy 
add_action( 'product_cat_edit_form_fields', 'product_cat_edit_video_field_rj', 10, 2 );

function product_cat_video_link_save( $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] = $_POST['term_meta'][$key];
            }
        }
       update_option( "taxonomy_$t_id", $term_meta );
    }
}


// this action use for save field value of edit form of taxonomy 
add_action( 'edited_product_cat', 'product_cat_video_link_save', 10, 2 );  
// this action use for save field value of add form of taxonomy 
add_action( 'create_product_cat', 'product_cat_video_link_save', 10, 2 );

PS: This code does not store or reproduce the saved data in the text field.

I thought WooCommerce had category thumbnails by default? Anyway, `product_cat_add_video_field_rj()` has `id="term_meta[video_link]"` for the text input. The JS targeting the `#meta-woo` id. Also, use `console.log(attachment)` in your JS script to verify that you are getting the correct values. — helgatheviking, Nov 11 '16 at 17:53
You are right woocommerce comes with default images. I just need another image for a custom archive template header image. — omukiguy, Nov 12 '16 at 10:50
Hello there, I am confused a little. Where to use the last code block? — Ashickur Rahman, Apr 19 '17 at 02:42

score 0 · Answer 1 · answered Nov 12 '16 at 10:56

A few hours later, I came up with this code below

Add function to functions.php

//call for woocommerce custom admin image code    
require get_template_directory() . '/inc/woo-meta-category.php';

/*--------------------------------------------------------------------------------------
    Uploader JS
----------------------------------------------------------------------------------------*/
function my_admin_scripts() {
    wp_enqueue_media();

    wp_register_script( 'wina_classic-uadmin-js', get_template_directory_uri() . '/js/uploader.js', 
                                        array('jquery','media-upload','thickbox'), '20130115', true );
    wp_enqueue_script( 'wina_classic-uadmin-js');
}

add_action('admin_print_scripts', 'my_admin_scripts');

Add Media uploader Javascript in js/uploader.js

jQuery(document).ready( function($){

    var mediaUploader_woo;

    $('#upload-button-woo').on('click',function(e) {
        e.preventDefault();
        if( mediaUploader_woo ){
            mediaUploader_woo.open();
            return;
        }

        mediaUploader_woo = wp.media.frames.file_frame = wp.media({
            title: 'Choose an Image',
            button: { text: 'Choose Image'},
            multiple: false
        });

        mediaUploader_woo.on('select', function(){
            attachment = mediaUploader_woo.state().get('selection').first().toJSON();
            $('#category-meta-woo').val(attachment.url);
            $('#category-header-preview').attr('src', ''+ attachment.url + '' );
        });

        mediaUploader_woo.open();
    });    

});

Finally add /inc/woo-meta-category.php file with code below

<?php

/*-------------------------------------------------------------------
    Add Custom metabox for woocommerce Category page
---------------------------------------------------------------------*/

function product_cat_add_cat_head_field_rj() {  ?>
    <div class="form-field">
        <label for="term_meta[cat_head_link]"><?php _e( 'Category Page Image', 'wina-classic' ); ?></label>
        <input type="text" name="term_meta[cat_head_link]" id="term_meta[cat_head_link]" value="">
        <p class="description"><?php _e( 'Upload Category Page Image','wina-classic' ); ?></p>
    </div>
<?php }

function product_cat_edit_cat_head_field_rj($term) {
    $t_id = $term->term_id; $term_meta = get_option( "taxonomy_$t_id" ); ?>

    <tr class="form-field">
    <th scope="row" valign="top"><label for="term_meta[cat_head_link]"><?php _e( 'Category Page Image', 'wina-classic' ); ?></label></th>
        <td>
            <img src="<?php echo esc_attr( $term_meta['cat_head_link'] ) ? esc_attr( $term_meta['cat_head_link'] ) : ''; ?>" height="60" width="120" id="category-header-preview" />
            <input type="hidden" name="term_meta[cat_head_link]" id="category-meta-woo" value="<?php echo esc_attr( $term_meta['cat_head_link'] ) ? esc_attr( $term_meta['cat_head_link'] ) : ''; ?>" style="margin-left: 0px; margin-right: 0px; width: 50%;" />
            <input type="button" class="button button-secondary" value="Upload Image" id="upload-button-woo" />
            <p class="description"><?php _e( 'Upload Category Page Image','wina-classic' ); ?></p>
        </td>
    </tr>
<?php
}

// this action use for add field in add form of taxonomy 
add_action( 'product_cat_add_form_fields', 'product_cat_add_cat_head_field_rj', 10, 2 );
// this action use for add field in edit form of taxonomy 
add_action( 'product_cat_edit_form_fields', 'product_cat_edit_cat_head_field_rj', 10, 2 );

function product_cat_cat_head_link_save( $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] = $_POST['term_meta'][$key];
            }
        }
       update_option( "taxonomy_$t_id", $term_meta );
    }
}

// this action use for save field value of edit form of taxonomy 
add_action( 'edited_product_cat', 'product_cat_cat_head_link_save', 10, 2 );  
// this action use for save field value of add form of taxonomy 
add_action( 'create_product_cat', 'product_cat_cat_head_link_save', 10, 2 );

In the front end

global $post;

//for product cat archive page only
$term = get_queried_object();
$cutomPageImageOption = get_option('taxonomy_' . $term->term_id);
$cutomPageImage = $cutomPageImageOption['cat_head_link'];

if ($cutomPageImage > 1) { echo "Please add a category head image in the admin panel"; }
?>

<section id="page-header" class="page-header" style="background-image: url('<?php echo $cutomPageImage; ?>">
    <div class="container">
        <div class="row">
            <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
                <h1><?php woocommerce_page_title(); ?></h1>
            <?php endif; ?>

        </div>
    </div>
</section>

Adding custom admin image upload metabox field in woocommerce to product category

1 Answers1