html-product-csv-import-form.php
<?php
/**
* Admin View: Product import form
*
* @package WooCommerce\Admin
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<form class="wc-progress-form-content woocommerce-importer" enctype="multipart/form-data" method="post">
<header>
<h2><?php esc_html_e( 'Import products from a CSV file', 'woocommerce' ); ?></h2>
<p><?php esc_html_e( 'This tool allows you to import (or merge) product data to your store from a CSV or TXT file.', 'woocommerce' ); ?></p>
</header>
<section>
<table class="form-table woocommerce-importer-options">
<tbody>
<tr>
<th scope="row">
<label for="upload">
<?php esc_html_e( 'Choose a CSV file from your computer:', 'woocommerce' ); ?>
</label>
</th>
<td>
<?php
if ( ! empty( $upload_dir['error'] ) ) {
?>
<div class="inline error">
<p><?php esc_html_e( 'Before you can upload your import file, you will need to fix the following error:', 'woocommerce' ); ?></p>
<p><strong><?php echo esc_html( $upload_dir['error'] ); ?></strong></p>
</div>
<?php
} else {
?>
<input type="file" id="upload" name="import" size="25" />
<input type="hidden" name="action" value="save" />
<input type="hidden" name="max_file_size" value="<?php echo esc_attr( $bytes ); ?>" />
<br>
<small>
<?php
printf(
/* translators: %s: maximum upload size */
esc_html__( 'Maximum size: %s', 'woocommerce' ),
esc_html( $size )
);
?>
</small>
<?php
}
?>
</td>
</tr>
<tr>
<th><label for="woocommerce-importer-update-existing"><?php esc_html_e( 'Update existing products', 'woocommerce' ); ?></label><br/></th>
<td>
<input type="hidden" name="update_existing" value="0" />
<input type="checkbox" id="woocommerce-importer-update-existing" name="update_existing" value="1" />
<label for="woocommerce-importer-update-existing"><?php esc_html_e( 'Existing products that match by ID or SKU will be updated, and new variations of existing variable products will be created. Other products that do not exist will be skipped.', 'woocommerce' ); ?></label>
</td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
<th>
<label for="woocommerce-importer-file-url"><?php esc_html_e( 'Alternatively, enter the path to a CSV file on your server:', 'woocommerce' ); ?></label>
</th>
<td>
<label for="woocommerce-importer-file-url" class="woocommerce-importer-file-url-field-wrapper">
<code><?php echo esc_html( ABSPATH ) . ' '; ?></code><input type="text" id="woocommerce-importer-file-url" name="file_url" />
</label>
</td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
<th><label><?php esc_html_e( 'CSV Delimiter', 'woocommerce' ); ?></label><br/></th>
<td><input type="text" name="delimiter" placeholder="," size="2" /></td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
<th><label><?php esc_html_e( 'Use previous column mapping preferences?', 'woocommerce' ); ?></label><br/></th>
<td><input type="checkbox" id="woocommerce-importer-map-preferences" name="map_preferences" value="1" /></td>
</tr>
<tr class="woocommerce-importer-advanced hidden">
<th><label for="woocommerce-importer-character-encoding"><?php esc_html_e( 'Character encoding of the file', 'woocommerce' ); ?></label><br/></th>
<td>
<?php
if ( function_exists( 'mb_list_encodings' ) ) {
?>
<select id="woocommerce-importer-character-encoding" name="character_encoding">
<option value="" selected><?php esc_html_e( 'Autodetect', 'woocommerce' ); ?></option>
<?php
$encodings = mb_list_encodings();
sort( $encodings, SORT_NATURAL );
foreach ( $encodings as $encoding ) {
echo '<option>' . esc_html( $encoding ) . '</option>';
}
?>
</select>
<?php
} else {
?>
<div class="notice notice-warning inline">
<p><?php esc_html_e( 'Your server does not support the mbstring PHP extension, so the file will be treated as UTF-8. Characters in other encodings may be removed.', 'woocommerce' ); ?></p>
</div>
<?php
}
?>
</td>
</tr>
</tbody>
</table>
</section>
<script type="text/javascript">
jQuery(function() {
jQuery( '.woocommerce-importer-toggle-advanced-options' ).on( 'click', function() {
var elements = jQuery( '.woocommerce-importer-advanced' );
if ( elements.is( '.hidden' ) ) {
elements.removeClass( 'hidden' );
jQuery( this ).text( jQuery( this ).data( 'hidetext' ) );
} else {
elements.addClass( 'hidden' );
jQuery( this ).text( jQuery( this ).data( 'showtext' ) );
}
return false;
} );
const uploadInput = jQuery( '#upload' );
const fileUrlInput = jQuery( '#woocommerce-importer-file-url' );
const submitButton = jQuery( '.woocommerce-importer .button-next' );
function updateSubmitButton() {
const hasFile = uploadInput.length && uploadInput.val().trim().length > 0;
const hasFileUrl = fileUrlInput.length && fileUrlInput.val().trim().length > 0;
submitButton.prop( 'disabled', ! hasFile && ! hasFileUrl );
}
uploadInput.on( 'change', updateSubmitButton );
fileUrlInput.on( 'input', updateSubmitButton );
updateSubmitButton();
});
</script>
<div class="wc-actions">
<a href="#" class="woocommerce-importer-toggle-advanced-options" data-hidetext="<?php esc_attr_e( 'Hide advanced options', 'woocommerce' ); ?>" data-showtext="<?php esc_attr_e( 'Show advanced options', 'woocommerce' ); ?>"><?php esc_html_e( 'Show advanced options', 'woocommerce' ); ?></a>
<button type="submit" class="button button-primary button-next" value="<?php esc_attr_e( 'Continue', 'woocommerce' ); ?>" name="save_step" disabled><?php esc_html_e( 'Continue', 'woocommerce' ); ?></button>
<?php wp_nonce_field( 'woocommerce-csv-importer' ); ?>
</div>
</form>
