Instead of creating a variation for every possible attribute combination on a product, they created one variation for the “any” of each attribute. They add a price to the variation and set it to be in stock. This sets the “default” state for our product.

Now when one of their variations goes out of stock, they create a variation for it. They enable the “manage stock” option and set the stock quantity to 0.

Now when customers go to this product, they can purchase any of the attributes except for the one they just created. When that combination is available again, they can remove it from the product or set it to be in stock again.

One catch I discovered is this currently only works when the option to hide out of stock items is disabled. When that is enabled, this currently does not work. There’s an open issue about this.

This is not an option for all stores but it could make inventory management easier for some stores so I wanted to make sure to share it.

Let me know if you have any questions in the comments.

Add this snippet to your site either in the theme’s functions.php file or with the Code Snippets plugin.

function ijab_usps_flat_rate_boxes( $boxes ) {
	
	$boxes = [];
	
	$boxes = 	array(
		// Priority Mail Express.
		'd13'  => array(
			'id'       => 'FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Express Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'express',
		),
		'd30'  => array(
			'id'       => 'LEGAL FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Express Legal Flat Rate Envelope',
			'length'   => '9.5',
			'width'    => '15',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'express',
		),
		'd63'  => array(
			'id'       => 'PADDED FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Express Padded Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'express',
		),

		// Priority Mail.
		'd16'  => array(
			'id'       => 'FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'd17'  => array(
			'id'       => 'MD FLAT RATE BOX',
			'name'     => 'Priority Mail Flat Rate Medium Box - 2',
			'length'   => '13.625',
			'width'    => '11.875',
			'height'   => '3.375',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'd17b' => array(
			'id'       => 'MD FLAT RATE BOX',
			'name'     => 'Priority Mail Flat Rate Medium Box - 1',
			'length'   => '11',
			'width'    => '8.5',
			'height'   => '5.5',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'd22'  => array(
			'id'       => 'LG FLAT RATE BOX',
			'name'     => 'Priority Mail Flat Rate Large Box',
			'length'   => '12',
			'width'    => '12',
			'height'   => '5.5',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'd22a' => array(
			'id'       => 'LG FLAT RATE BOX',
			'name'     => 'Priority Mail Large Flat Rate Board Game Box',
			'length'   => '23.69',
			'width'    => '11.75',
			'height'   => '3',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'd28'  => array(
			'id'       => 'SM FLAT RATE BOX',
			'name'     => 'Priority Mail Flat Rate Small Box',
			'length'   => '5.375',
			'width'    => '8.625',
			'height'   => '1.625',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'd29'  => array(
			'id'       => 'PADDED FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Padded Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'd38'  => array(
			'id'       => 'GIFT CARD FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Gift Card Flat Rate Envelope',
			'length'   => '10',
			'width'    => '7',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'd40'  => array(
			'id'       => 'WINDOW FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Window Flat Rate Envelope',
			'length'   => '5',
			'width'    => '10',
			'height'   => '0.25',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'd42'  => array(
			'id'       => 'SM FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Small Flat Rate Envelope',
			'length'   => '6',
			'width'    => '10',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'd44'  => array(
			'id'       => 'LEGAL FLAT RATE ENVELOPE',
			'name'     => 'Priority Mail Legal Flat Rate Envelope',
			'length'   => '9.5',
			'width'    => '15',
			'height'   => '0.5',
			'weight'   => '70',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),

		// International Priority Mail Express.
		'i13'  => array(
			'id'       => '10',
			'name'     => 'Priority Mail Express Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '4',
			'type'     => 'envelope',
			'box_type' => 'express',
		),
		'i30'  => array(
			'id'       => '17',
			'name'     => 'Priority Mail Express Legal Flat Rate Envelope',
			'length'   => '9.5',
			'width'    => '15',
			'height'   => '0.5',
			'weight'   => '4',
			'type'     => 'envelope',
			'box_type' => 'express',
		),
		'i63'  => array(
			'id'       => '27',
			'name'     => 'Priority Mail Express Padded Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '4',
			'type'     => 'envelope',
			'box_type' => 'express',
		),

		// International Priority Mail.
		'i8'   => array(
			'id'       => '8',
			'name'     => 'Priority Mail Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '4',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'i29'  => array(
			'id'       => '23',
			'name'     => 'Priority Mail Padded Flat Rate Envelope',
			'length'   => '12.5',
			'width'    => '9.5',
			'height'   => '0.5',
			'weight'   => '4',
			'type'     => 'envelope',
			'box_type' => 'priority',
		),
		'i16'  => array(
			'id'       => '16',
			'name'     => 'Priority Mail Flat Rate Small Box',
			'length'   => '5.375',
			'width'    => '8.625',
			'height'   => '1.625',
			'weight'   => '4',
			'box_type' => 'priority',
		),
		'i9'   => array(
			'id'       => '9',
			'name'     => 'Priority Mail Flat Rate Medium Box',
			'length'   => '13.625',
			'width'    => '11.875',
			'height'   => '3.375',
			'weight'   => '20',
			'box_type' => 'priority',
		),
		'i9b'  => array(
			'id'       => '9',
			'name'     => 'Priority Mail Flat Rate Medium Box',
			'length'   => '11',
			'width'    => '8.5',
			'height'   => '5.5',
			'weight'   => '70',
			'box_type' => 'priority',
		),
		'i11'  => array(
			'id'       => '11',
			'name'     => 'Priority Mail Flat Rate Large Box',
			'length'   => '12',
			'width'    => '12',
			'height'   => '5.5',
			'weight'   => '20',
			'box_type' => 'priority',
		),
		'i11a' => array(
			'id'       => '11',
			'name'     => 'Priority Mail Large Flat Rate Board Game Box',
			'length'   => '23.69',
			'width'    => '11.75',
			'height'   => '3',
			'weight'   => '70',
			'box_type' => 'priority',
		),
	);

	return $boxes;
}
add_filter( 'wc_usps_flat_rate_boxes', 'ijab_usps_flat_rate_boxes' );

That copies the list of packages directly from the extension. Now you can remove any of them that you don’t use. Say we don’t want to handle the Priority Mail Large Flat Rate Board Game Box. Just delete this block from the snippet above and that box will be removed from the set of available boxes.

		'i11a' => array(
			'id'       => '11',
			'name'     => 'Priority Mail Large Flat Rate Board Game Box',
			'length'   => '23.69',
			'width'    => '11.75',
			'height'   => '3',
			'weight'   => '70',
			'box_type' => 'priority',
		),

You can leave only one or two boxes if you want or just remove a few. It’s totally up to you. Feel free to post any questions in the comments.

It turns out we can do this with a simple filter. Add this to the theme’s functions.php file or use the Code Snippets plugin.

function ijab_redirect_single_add_to_cart() {
	return '/cart/';
}
add_filter( 'woocommerce_add_to_cart_form_action', 'ijab_redirect_single_add_to_cart' );

That should redirect simple and variable products to the cart when added from the single product page but leave product archives alone. I’m just posting it in case it helps someone out.

Since we don’t have an off-the-shelf shortcode for this, we’ll need to cook one up. To start out, let’s grab the sample product loop from the WooCommerce documentation.

That will return a list of the 12 most recent products. By default wp_query returns objects in descending order so the latest items will be first. First we need to make a few changes to the arguments. We need a pool of twenty products, so we’ll change that. I’m also adding in the date as the orderby parameter so that’ll be clear in case we ever have to come back and edit this code.

	$args = array(
		'post_type'			=> 'product',
		'posts_per_page'	=> 20,
		'orderby'			=> 'date',
		'order'				=> 'DESC',
		'no_found_rows'		=> true,
	);

The kicker here is we only want to show six of these twenty products. We can add a couple of variables here to handle that. We’ll have one for the count and another one for the maximum number of products. We’ll increment the $counter variable at the end of each loop so that it’ll keep track of where we are in the list. From there, we can add them to the while loop so it only runs six times.

	$counter = 1;
	$max = 6;
	...
	while ( ($loop->have_posts()) && ($counter <= $max) ) : $loop->the_post();
	...
		$counter++;
	endwhile;

The next part is getting the six products to be random ones from our pool of twenty. We can use PHP’s built-in shuffle function to reorder the posts. We don’t apply it to $loop directly since it has more data than just the product content. We need to add it to the posts array that’s nested inside this multidimensional array. That’ll look like this:

	$loop = new WP_Query( $args );
	shuffle($loop->posts);

We can wrap this up in a function and add it to a shortcode. Then all we’ll need to do is insert [randomproducts] into the content of a page/post and we’ll have a list of six random products out of our most recent twenty.

function ijab_random_products() {
	?>

<ul class="products columns-3">
	<?php
	$args = array(
		'post_type'			=> 'product',
		'posts_per_page'	=> 20,
		'orderby'			=> 'date',
		'order'				=> 'DESC',
		'no_found_rows'		=> true,
	);
	$counter = 1;
	$max = 6;
	$loop = new WP_Query( $args );
	shuffle($loop->posts);
	if ( $loop->have_posts() ) {
		while ( ($loop->have_posts()) && ($counter <= $max) ) : $loop->the_post();
			wc_get_template_part( 'content', 'product' );
			$counter++;
		endwhile;
	} else {
		echo __( 'No products found' );
	}
	wp_reset_postdata();
	?>
</ul>

	<?php
}
add_shortcode( 'randomproducts', 'ijab_random_products' );

That’ll display the products in two rows of three columns. You can change the columns-3 in the UL element in that snippet to a different number to adjust the columns. Have fun!

The tricky part comes in when we try to find the source of “Product” right before color. If I look at the attributes in my dashboard, it only shows color. “Product” is not part of the title. So where is this coming from?

After digging through the code a bit, I found this function that creates the part of the breadcrumbs for taxonomies:

protected function add_crumbs_tax() {
	$this_term = $GLOBALS['wp_query']->get_queried_object();
	$taxonomy  = get_taxonomy( $this_term->taxonomy );

	$this->add_crumb( $taxonomy->labels->name );  

	if ( 0 !== intval( $this_term->parent ) ) {
		$this->term_ancestors( $this_term->term_id, $this_term->taxonomy );
	}

	$this->add_crumb( single_term_title( '', false ), get_term_link( $this_term->term_id, $this_term->taxonomy ) );
}

Looking at it we don’t see “Product” in here at all, but there is a hidden reference to it. This line points us to the taxonomy label name.

$this->add_crumb( $taxonomy->labels->name );

What this tells us the “Product” is actually part of the label for this taxonomy. Indeed if we open up class-wc-post-types.php we’ll see the attribute taxonomies registered. This line defines the label for our attributes:

/* translators: %s: attribute name */
'name' => sprintf( _x( 'Product %s', 'Product Attribute', 'woocommerce' ), $label ),

With this, we can change the text using a translation plugin like Loco Translate or Say What. You’ll want to find this string:

Product %s

and replace it with this:

%s

Here’s what this looks like with Say What.

Results

Now that we have our changes in place, we can see how this works on the front end of the site. As you can see instead of it saying “Product Color” now it simply says “Color” like we wanted.

That one was a bit tricky to find so I wanted to document it in case someone else is looking for this. If you have any questions, ask away in the comments.

WooCommerce has just what we need in the woocommerce_payment_complete hook. This is triggered once the order has been paid for. When we add this to the snippet, this is what we end up with.

add_action( 'woocommerce_payment_complete', 'ijab_autocomplete_paid_orders' );
function ijab_autocomplete_paid_orders( $order_id ) { 
    if ( ! $order_id ) {
        return;
    }

    $order = wc_get_order( $order_id );
    $order->update_status( 'completed' );
}

Now this snippet will autocomplete orders even if the thank you page isn’t triggered like with subscription renewals.

$search_fields = array_map(
	'wc_clean',
	apply_filters(
		'woocommerce_shop_order_search_fields',
		array(
			'_billing_address_index',
			'_shipping_address_index',
			'_billing_last_name',
			'_billing_email',
		)
	)
);
$order_ids     = array();

What this means is WooCommerce will search though all of this extra information to find an order. While that can be helpful, it may take a long time if the site has an extremely large number of orders.

Notice that in the filters, the order number search isn’t mentioned. What we can do is create a function that removes these search options so that only order numbers are searched. Here’s a snippet that can do that for you.

add_filter( 'woocommerce_shop_order_search_fields', '__return_false' );

Now when I search in the order admin, I can still search for orders by order number, but with the other criteria removed, searching is much faster.

Here’s what a typical search by last name looks like:

We can also add additional search criteria with this filter. Say we wanted to be able to search by the order total. To do that we need to add _order_total to the filter. Here’s one way to do that.

function ijab_woo_extra_order_meta_search($args) {
    
	$args[] = '_order_total';
	
	return $args;
}
add_filter( 'woocommerce_shop_order_search_fields', 'ijab_woo_extra_order_meta_search' );

With that you can search by the order total amount and have it show matching orders.

So now you know how to modify the built-in order search for WooCommerce. If you have any other creative uses for this or questions, let me know in the comments.

The only downside is the default appearance of the file type input is its styling. It often doesn’t really match the rest of the site. Here’s an example of what it looks like by default.

What makes this tricky to work with is how the “Choose File” button is set up in the HTML. Often we can pick out a specific element in the HTML and then target it with CSS. In this case, the input covers that entire section so our normal bag of tricks probably won’t work the way we envision.

The alternative is to actually hide the button and use a “pseudo element” in the CSS to create a new one. Here’s a snippet you can use to do this.

.wc-pao-addon-file-upload::-webkit-file-upload-button {
  visibility: hidden;
  width: 0;
}

.wc-pao-addon-file-upload::before {
  content: 'Select files';
  display: inline-block;
  border: none;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  color: #fff;
  background-color: #1392eb;
}

.wc-pao-addon-file-upload:hover::before {
  background-color: #000;
}

The top style hides the original button and makes it so it doesn’t take up any horizontal space. That way we don’t end up smushing the “No file chosen” text.

The second style sets what our button looks like. For best results, you’ll want to adjust these to match the buttons on your site in terms of color and size. The last style sets the hover color of the button.

Once this has been added to the site, we’ll end up with something that looks like this.

It’s not a radical departure, but it can make the file upload feel like it’s better integrated into the site.

Add this snippet to your theme’s functions.php file or via the Code Snippets plugin.

add_action( 'wp_footer', function () { ?>

<script>
jQuery(document).ready(function(){
	function showCheckout() {
		jQuery('#place_order').hide();
		jQuery('#terms').change(function(){
			if(this.checked)
				jQuery('#place_order').fadeIn('slow');
			else
				jQuery('#place_order').fadeOut('slow');
		});
	}
	setTimeout(showCheckout, 500)
});
</script>
<?php } );

This will hide the payment button once the page has finished loading. Then the user will have to check the box to accept terms and conditions to have the button appear again.

Here’s an example so you can see what I mean. A user wants to move the Amazon Pay section from down at the bottom of the checkout page to the top.

Using CSS positioning we could do that, but it would be tricky to have it look right across screen sizes.

Fortunately, we can use JavaScript to make the move for us. Since WordPress comes bundled with jQuery we’ll use this library’s built-in functions to handle it.

What you need to do is find out the class or ID of the item that you want to move and then the class/ID of an element right after where you want it to go. In our example, the Amazon Pay has a class wc-amazon-payments-advanced-info we can use to grab it. Now to move it to the top of the page, we can use these classes form-row and place-order.

jQuery comes with a function called prependTo which takes the specified element and adds it right before whatever other element you specify. Using it and our classes, we can write one quick line of JavaScript to move this.

jQuery(".wc-amazon-payments-advanced-info").prependTo(".form-row.place-order");

When I apply that to the page, the Amazon Pay button is moved from the area where the other payment methods are to the very top of the checkout form.

Also, as far as the browser is concerned, the element is really in that position. So the other items on the page will react as if it’s always been there.

It’s a simple solution that you can use when CSS positioning just isn’t enough. Even if someone has JavaScript disabled, the worst that will happen is the element won’t be moved.

So now you have a new way to rearrange elements on a page. Enjoy!