Allow menu_order sorting like in 2.3

Also allow setting manually to allow sorting between pages.

Fixes #8690

assets/css/admin.scss

@@ -2735,6 +2735,40 @@ img.help_tip {
 		}
 	}
 }
+.woocommerce_variation {
+	h3 {
+		.sort {
+			cursor: move;
+			text-align: center;
+			vertical-align: middle;
+			float: right;
+			height: 26px;
+			width: 17px;
+			display: none;
+			vertical-align: middle;
+			margin-right: .5em;
+			color: #a0a5aa;
+			&:before {
+				content: "\e032";
+				font-family: 'WooCommerce';
+				text-align: center;
+				cursor: move;
+				line-height: 1;
+				display: block;
+				width: 17px;
+				line-height: 28px;
+			}
+			&:hover {
+				color: #777;
+			}
+		}
+	}
+	h3:hover, &.ui-sortable-helper {
+		.sort {
+			display: block;
+		}
+	}
+}
 
 .woocommerce_options_panel {
 	box-sizing: border-box;
@@ -3057,7 +3091,7 @@ img.help_tip {
 			cursor: pointer;
 		}
 
-		h3:hover {
+		h3:hover, &.ui-sortable-helper {
 			a.delete, .handlediv {
 				display: block;
 			}

assets/js/admin/meta-boxes-product-variation.js

@@ -14,7 +14,8 @@ jQuery( function( $ ) {
 				.on( 'change', 'input.variable_is_downloadable', this.variable_is_downloadable )
 				.on( 'change', 'input.variable_is_virtual', this.variable_is_virtual )
 				.on( 'change', 'input.variable_manage_stock', this.variable_manage_stock )
-				.on( 'click', 'button.notice-dismiss', this.notice_dismiss );
+				.on( 'click', 'button.notice-dismiss', this.notice_dismiss )
+				.on( 'click', 'h3 .sort', this.set_menu_order );
 
 			$( 'input.variable_is_downloadable, input.variable_is_virtual, input.variable_manage_stock' ).change();
 
@@ -117,6 +118,21 @@ jQuery( function( $ ) {
 				});
 			});
 
+			// Allow sorting
+			jQuery( '.woocommerce_variations' ).sortable({
+				items               : '.woocommerce_variation',
+				cursor              : 'move',
+				axis                : 'y',
+				handle              : '.sort',
+				scrollSensitivity   : 40,
+				forcePlaceholderSize: true,
+				helper              : 'clone',
+				opacity             : 0.65,
+				stop                : function () {
+				    wc_meta_boxes_product_variations_actions.variation_row_indexes();
+				}
+			});
+
 			$( document.body ).trigger( 'wc-enhanced-select-init' );
 		},
 
@@ -130,6 +146,34 @@ jQuery( function( $ ) {
 			if ( 1 === qty ) {
 				wc_meta_boxes_product_variations_actions.variations_loaded();
 			}
+		},
+
+		/**
+		 * Lets the user manually input menu order to move items around pages
+		 */
+		set_menu_order: function( event ) {
+			event.preventDefault();
+			var $menu_order  = $( this ).closest( '.woocommerce_variation' ).find('.variation_menu_order');
+			var value        = window.prompt( woocommerce_admin_meta_boxes_variations.i18n_enter_menu_order, $menu_order.val() );
+
+			if ( value != null ) {
+				// Set value, save changes and reload view
+				$menu_order.val( parseInt( value, 10 ) ).change();
+				wc_meta_boxes_product_variations_ajax.save_variations();
+			}
+		},
+
+		/**
+		 * Set menu order
+		 */
+		variation_row_indexes: function() {
+			var wrapper      = $( '#variable_product_options .woocommerce_variations' ),
+				current_page = parseInt( wrapper.attr( 'data-page' ), 10 ),
+				offset       = parseInt( ( current_page - 1 ) * woocommerce_admin_meta_boxes_variations.variations_per_page, 10 );
+
+			$( '.woocommerce_variations .woocommerce_variation' ).each( function ( index, el ) {
+				$( '.variation_menu_order', el ).val( parseInt( $( el ).index( '.woocommerce_variations .woocommerce_variation' ), 10 ) + 1 + offset ).change();
+			});
 		}
 	};
 

assets/js/admin/meta-boxes.js

@@ -61,7 +61,7 @@ jQuery( function ( $ ) {
 	// Meta-Boxes - Open/close
 	$( '.wc-metaboxes-wrapper' ).on( 'click', '.wc-metabox h3', function( event ) {
 		// If the user clicks on some form input inside the h3, like a select list (for variations), the box should not be toggled
-		if ( $( event.target ).filter( ':input, option' ).length ) {
+		if ( $( event.target ).filter( ':input, option, .sort' ).length ) {
 			return;
 		}
 

includes/admin/class-wc-admin-assets.php

@@ -175,6 +175,7 @@ public function admin_scripts() {
 				'bulk_edit_variations_nonce'          => wp_create_nonce( 'bulk-edit-variations' ),
 				'i18n_link_all_variations'            => esc_js( __( 'Are you sure you want to link all variations? This will create a new variation for each and every possible combination of variation attributes (max 50 per run).', 'woocommerce' ) ),
 				'i18n_enter_a_value'                  => esc_js( __( 'Enter a value', 'woocommerce' ) ),
+				'i18n_enter_menu_order'               => esc_js( __( 'Set variation sort-order priority', 'woocommerce' ) ),
 				'i18n_enter_a_value_fixed_or_percent' => esc_js( __( 'Enter a value (fixed or %)', 'woocommerce' ) ),
 				'i18n_delete_all_variations'          => esc_js( __( 'Are you sure you want to delete all variations? This cannot be undone.', 'woocommerce' ) ),
 				'i18n_last_warning'                   => esc_js( __( 'Last warning, are you sure?', 'woocommerce' ) ),
@@ -185,7 +186,7 @@ public function admin_scripts() {
 				'i18n_no_variations_added'            => esc_js( __( "No variations added", 'woocommerce' ) ),
 				'i18n_remove_variation'               => esc_js( __( 'Are you sure you want to remove this variation?', 'woocommerce' ) ),
 				'i18n_scheduled_sale_start'           => esc_js( __( 'Sale start date (YYYY-MM-DD format or leave blank)', 'woocommerce' ) ),
-				'i18n_scheduled_sale_end'             => esc_js( __( 'Sale end date  (YYYY-MM-DD format or leave blank)', 'woocommerce' ) ),
+				'i18n_scheduled_sale_end'             => esc_js( __( 'Sale end date (YYYY-MM-DD format or leave blank)', 'woocommerce' ) ),
 				'i18n_edited_variations'              => esc_js( __( 'Save changes before changing page?', 'woocommerce' ) ),
 				'i18n_variation_count_single'         => esc_js( __( '%qty% variation', 'woocommerce' ) ),
 				'i18n_variation_count_plural'         => esc_js( __( '%qty% variations', 'woocommerce' ) ),

includes/admin/meta-boxes/views/html-variation-admin.php

@@ -16,6 +16,7 @@
 	<h3>
 		<a href="#" class="remove_variation delete" rel="<?php echo esc_attr( $variation_id ); ?>"><?php _e( 'Remove', 'woocommerce' ); ?></a>
 		<div class="handlediv" title="<?php _e( 'Click to toggle', 'woocommerce' ); ?>"></div>
+		<div class="sort" title="<?php _e( 'Click to set menu order, or drag and drop', 'woocommerce' ); ?>"></div>
 		<strong>#<?php echo esc_html( $variation_id ); ?>: </strong>
 		<?php
 			foreach ( $parent_data['attributes'] as $attribute ) {
@@ -55,7 +56,7 @@
 			}
 		?>
 		<input type="hidden" name="variable_post_id[<?php echo $loop; ?>]" value="<?php echo esc_attr( $variation_id ); ?>" />
-		<input type="hidden" class="variation_menu_order" name="variation_menu_order[<?php echo $loop; ?>]" value="<?php echo $loop; ?>" />
+		<input type="hidden" class="variation_menu_order" name="variation_menu_order[<?php echo $loop; ?>]" value="<?php echo absint( $menu_order ); ?>" />
 	</h3>
 	<div class="woocommerce_variable_attributes wc-metabox-content" style="display: none;">
 		<div class="data">

includes/class-wc-ajax.php

@@ -749,7 +749,8 @@ public static function add_variation() {
 			'post_status'  => 'publish',
 			'post_author'  => get_current_user_id(),
 			'post_parent'  => $post_id,
-			'post_type'    => 'product_variation'
+			'post_type'    => 'product_variation',
+			'menu_order'   => -1
 		);
 
 		$variation_id = wp_insert_post( $variation );
@@ -2486,8 +2487,8 @@ public static function load_variations() {
 			'post_status'    => array( 'private', 'publish' ),
 			'posts_per_page' => $per_page,
 			'paged'          => $page,
-			'orderby'        => 'ID',
-			'order'          => 'DESC',
+			'orderby'        => 'menu_order',
+			'order'          => 'ASC',
 			'post_parent'    => $product_id
 		), $product_id );
 
@@ -2542,6 +2543,7 @@ public static function load_variations() {
 				$variation_data['_thumbnail_id']  = absint( $variation_data['_thumbnail_id'] );
 				$variation_data['image']          = $variation_data['_thumbnail_id'] ? wp_get_attachment_thumb_url( $variation_data['_thumbnail_id'] ) : '';
 				$variation_data['shipping_class'] = $shipping_classes && ! is_wp_error( $shipping_classes ) ? current( $shipping_classes )->term_id : '';
+				$variation_data['menu_order']     = $variation->menu_order;
 
 				// Stock BW compat
 				if ( '' !== $variation_data['_stock'] ) {