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; }
Jese Leos
August 24, 2024
Verified user
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.
Jese Leos
August 24, 2024
Verified user
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.