Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Add icon uploader in custom tab of WooCommerce admin section

I wrote code to add a custom tab in the WooCommerce setting section page:

add_filter('woocommerce_settings_tabs_array', array($this, 'my_custom_settings_tabs_array'), 99);
add_action('woocommerce_settings_my_custom', array($this, 'action_woocommerce_settings_my_custom'), 10);
add_action('woocommerce_settings_save_my_custom', array($this, 'action_woocommerce_settings_save_my_custom'), 10);

I want to add an image uploader in my custom tab here

public function get_custom_settings()
{
    global $current_section;

    $settings = array();

    // My section 1
    $settings = array(
        // Title
        array(
            'title'     => __('Table Style Setting', ''),
            'type'      => 'title',
            'id'        => 'my_custom_setting_heading'
        ),
        // Text input
        array(
            'title'     => __('Change the text on the top of Table', 'text-domain'),
            'type'      => 'text',
            'desc_tip'  => false,
            'id'        => 'koala_bmsm_general_settings[tb_top_text]',
            'css'       => 'min-width:300px;'
        ),
        // Section end
        array(
            'type'      => 'sectionend',
            'id'        => 'custom_settings_overview'
        ),
    );
    return $settings;
}
Tags:

2

Answers


  1. 0

    You can add the upload field by adding the given code to $settings array.

            array(
            'title'     => __( 'Upload Table Background Image', 'text-domain' ),
            'type'      => 'file',
            'desc'      => __( 'Upload an image for the table background.', 'text-domain' ),
            'id'        => 'koala_bmsm_general_settings[tb_bg_image]',
            'desc_tip'  => false,
        ),

    Please let me know if this helps.

    Login or Signup to reply.
  2. 0

    You need to make some code modifications like below

    1. Add new field in $settings array.

    array(
    'title'     => __( 'Upload Icon', 'text-domain' ),
    'type'      => 'file',
    'desc'      => __( 'Upload an icon to display in the table header.', 'text-domain' ),
    'id'        => 'koala_bmsm_general_settings[table_icon]',
    'css'       => 'min-width:300px;',
    'default'   => ''
),

    2. Create Upload file backend code

    <?php

add_action('woocommerce_admin_field_file', 'koala_custom_upload_field');
function koala_custom_upload_field($value)
{
    $option_name = $value['id'];
    $upload_url = get_option($option_name);
?>
    <tr valign="top">
        <th scope="row" class="titledesc">
            <label for="<?php echo esc_attr($option_name); ?>"><?php echo esc_html($value['title']); ?></label>
        </th>
        <td class="forminp forminp-file">
            <input
                id="<?php echo esc_attr($option_name); ?>"
                type="text"
                name="<?php echo esc_attr($option_name); ?>"
                value="<?php echo esc_attr($upload_url); ?>"
                style="<?php echo esc_attr($value['css']); ?>" />
            <button class="button upload_image_button"><?php _e('Upload', 'text-domain'); ?></button>
            <?php if ($upload_url) : ?>
                <p><img src="<?php echo esc_url($upload_url); ?>" style="max-width:150px;" /></p>
            <?php endif; ?>
            <span class="description"><?php echo esc_html($value['desc']); ?></span>
        </td>
    </tr>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('body').on('click', '.upload_image_button', function(e) {
                e.preventDefault();

                var button = $(this),
                    custom_uploader = wp.media({
                        title: '<?php _e('Insert image', 'text-domain'); ?>',
                        library: {
                            type: 'image'
                        },
                        button: {
                            text: '<?php _e('Use this image', 'text-domain'); ?>'
                        },
                        multiple: false
                    }).on('select', function() {
                        var attachment = custom_uploader.state().get('selection').first().toJSON();
                        $(button).prev().val(attachment.url);
                    })
                    .open();
            });
        });
    </script>
<?php
}

add_action('woocommerce_settings_save_my_custom', 'koala_save_custom_upload_field');
function koala_save_custom_upload_field()
{
    $settings = get_option('koala_bmsm_general_settings', array());
    if (isset($_POST['koala_bmsm_general_settings'])) {
        foreach ($_POST['koala_bmsm_general_settings'] as $key => $value) {
            $settings[$key] = sanitize_text_field($value);
        }
    }
    update_option('koala_bmsm_general_settings', $settings);
}

    Please let me know if this could help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search