Categories
WooCommerce

Increase the default number limit of variations for a product in WooCommerce

In WooCommerce, you can add as many variations as you want! However, if you have over 30 of them, WooCommerce will make an AJAX call (an extra request to the backend) to fetch the details for each variation.

Why is the limit even there?

While it can be annoying, I think it’s a good idea to have a general limit. The general idea is that if you have too many variations, it’s going to make it really difficult for a customer to choose what to buy. If you have over 30 variations, you might want to think of splitting it up into more products so it’s not so confusing for people.

However, in some use cases, 30 variations is not a lot! For example, shoes and clothing items can easily have more than 30 variations and still be totally acceptable. That’s because it’s less of a choice for the customer and more of figuring out what size they need.

Lets change the default limit

To change the limit, we’re going to use a filter!

WooCommerce: 4.5.2
Filter: woocommerce_ajax_variation_threshold
Source: https://github.com/woocommerce/woocommerce/blob/4.5.2/includes/wc-template-functions.php#L1660

The code:

<?php // leave this line out unless you're starting a new PHP file

add_filter( 'woocommerce_ajax_variation_threshold', function( $quantity, $product ) {
	return 50;
 }, 10, 2 );

In that code, we’re just returning a new quantity of 50 for the maximum value allowed for variations.

If you wanted to do this for just a single product, here’s what that would look like:

<?php // leave this line out unless you're starting a new PHP file

add_filter( 'woocommerce_ajax_variation_threshold', function( $quantity, $product ) {
	// If you want change the default limit for just one product, set the ID here:
	if ( 401 === $product->get_id() ) {
		return 100;
	}
 }, 10, 2 );

If you have any questions or suggestions for improvements, let me know!

Categories
WooCommerce

Add a Custom Placeholder Image for WooCommerce Products

WooCommerce has a default placeholder for all products that don’t have images set. Here’s what it currently is set to:

Default WooCommerce Placeholder Image

I actually like it quite a lot, but it might not always be the most useful thing to show for your specific store.

If you want to change the default placeholder for your WooCommerce store, it’s not too complicated. Let’s walk through what has to happen:

The Source

I like to cover what code we’re working with first. If you do this regularly you’ll eventually be able to do this on your own 🙂

WooCommerce: 4.5.2
Filter: woocommerce_placeholder_img_src
Source: https://github.com/woocommerce/woocommerce/blob/4.5.2/includes/wc-product-functions.php#L303

Working through the logic

The function, wc_placeholder_img is where the placeholder images are loaded from, so looking at that function, we can see that it checks for:

  • The woocommerce_placeholder_image option being set to a specific image ID
  • If that option is not set, it calls the wc_placeholder_img_src
  • wc_placeholder_img_src function then calls the filter, woocommerce_placeholder_img_src, that lets us change the image source for the placeholder!

Our code should then:

  • Set the ID for the image we want to be the new placeholder
  • Make sure we set the option to the right image if we need to
  • Return the right image source only if the option is not set

Here’s the code:

<?php // only add this first line if your file already does not have it

/**
 * Change the default placeholder image
 */
add_filter('woocommerce_placeholder_img_src', 'custom_woocommerce_placeholder_img_src', 10);

function custom_woocommerce_placeholder_img_src( $src ) {
	
	// Set your new Placeholder Image ID here
	$new_image_id = 400;

	// Update the woocommerce_placeholder_image option
	$current_placeholder_id = get_option( 'woocommerce_placeholder_image' );
	if ( $current_placeholder_id !== 0 || $current_placeholder_id !== $new_image_id ) {
		update_option( 'woocommerce_placeholder_image', $new_image_id );
	} else {
		// Set the Image SRC
		$src = wp_get_attachment_url( $new_image_id );

	}
	return $src;
}

Make sure you upload the Image and grab the ID for that image for that code to work. If you’re not what the Image ID is, go to the Media Library and click on the image. Then, in the address bar you should see the ID like this:

The ID is 400 for this image

Tested on

WooCommerce 4.5.2 ✔
Storefront 2.7.0 ✔

That’s it! If you have any questions or suggestions for how to improve this, please leave a comment.

Categories
WooCommerce

Limit quantity of products per order for WooCommerce

There are times when you might want to put a limit on the quantity of a product a customer can have on an order. Maybe you have a product that has low stock and you want to make sure many people get to purchase it, or maybe it’s a product that really does not need to be bought in multiples (like a digital product maybe?).

In this code example, I’m going to work through the process of limiting product quantities for simple products only. I might do a variations example later 🙂

What do we need to account for?

First, let’s think through when we might need to check for a product limit. Here’s what I came up with that I think should cover most cases:

  1. When customers click “Add to Cart” on the product page
  2. When customers click “Add to Cart” from the Shop page
  3. In the cart itself, a customer could increase the quantity and update the cart
  4. We should also make sure Checkout is not possible if you exceed the maximum quantity we set

Our code example needs to account for all of these so that we have something that will work on a real store.

What hooks does WooCommerce provide?

There are two main hooks we want to use for this implementation.

Action: woocommerce_check_cart_items

Cart validation: https://github.com/woocommerce/woocommerce/blob/4.5.1/includes/shortcodes/class-wc-shortcode-cart.php#L91

Checkout validation: https://github.com/woocommerce/woocommerce/blob/4.5.1/includes/shortcodes/class-wc-shortcode-checkout.php#L272

The woocommerce_check_cart_items action runs when outputting the cart and it also runs when validating the checkout. This action lets us loop through the cart items and check if a specific product is over the quantity. If its quantity is higher than we set, we output an error and the checkout process is blocked.

Here’s an example for how you might use this:
(I add in a lot of code comments explaining what the code does!)

<?php // only add this line if it's at the top of a new PHP file

add_action( 'woocommerce_check_cart_items', 'set_max_for_cart_item' );

function set_max_for_cart_item() {
	// Set the product ID for the product you want to limit
	$check_product_id = 121;
	// Set the maximum quantity
	$maximum_quantity = 2;

	// Loop through the Cart items
	foreach ( WC()->cart->get_cart() as $key => $values ) {
		$_product = $values['data'];
		// Check for the speicifc product
		if ( $check_product_id === $values['product_id'] && $values['quantity'] > $maximum_quantity ) {	
			// If we match the product, we set an error message
			$message = sprintf( __( 'You can only have a maximum of %d for the product "%s".' ), $maximum_quantity, $_product->get_title() );

			wc_add_notice( $message, 'error' );
			return;
		}
	}
}

Ok, now to the next hook!

Filter: woocommerce_add_to_cart_validation

Source: https://github.com/woocommerce/woocommerce/blob/4.5.1/includes/class-wc-form-handler.php#L804

The woocommerce_add_to_cart_validation filter lets us filter the product, quantity, and whether or not it’s a valid action being performed. For example, if the total quantity is higher than our desired amount, we would set the valid argument as being false so that the action would not be allowed.

One interesting thing is that we also need to account for items currently in the cart, because the total is not just from what’s currently being added but what the total will be once we’ve added something to the cart.

Here’s an example of how this could be done:

<?php // only add this line if it's at the top of a new PHP file

add_filter( 'woocommerce_add_to_cart_validation', 'validate_add_to_cart_action', 10, 3 );

function validate_add_to_cart_action( $valid, $product_id, $quantity ) {
	// Set the product ID for the product you want to limit
	$check_product_id = 121;
	// We want to check two quantities, the current cart and how many you are currently adding.  We're going to be adding them together into one variable called total_quantity.
	$total_quantity = $quantity;
	$maximum_quantity = 2;
	
	// Setting the default to valid
	$valid = true;

	// Checking if it's the product ID we want to target
	if ( $check_product_id === $product_id ) {
		// Loop through the items in the cart first
		foreach ( WC()->cart->get_cart() as $cart_item_key => $values ) {
			// If the item in the cart matches our product id, we'll add the current cart quantity to our total quantity
			if ( $values['product_id'] === $check_product_id ) {
				$total_quantity += $values['quantity'];
			}
		}
		// Let's check our total quantity now and see if it's above our maximum - if so, we'll display an error message
		if ( $total_quantity > 0 && $total_quantity > $maximum_quantity ) {
			// Grab the product object so we can output which product has the issue
			$_product = wc_get_product( $product_id );

			$message = sprintf( 'You can only have a maximum quantity of %d for the %s product (you currently have %d in your cart).', $maximum_quantity, $_product->get_title(), $total_quantity - $quantity );

			wc_add_notice( $message, 'error' );
	
			$valid = false;
		}
	}
	return $valid;
}

Tested on

WooCommerce 4.5.1 ✔
Storefront 2.7.0 ✔

Can I do this with a plugin?

My example here covers a very basic implementation where we’re only dealing with one simple product and one quantity. If that’s all you need, great! If you need more, there are some plugins that might help:

WooCommerce Min/Max Quantities ($29)

Disclaimer: I am not paid to recommend this and I make no money on suggesting this.

Aren’t they great at naming things? It does exactly that but also a lot more that I didn’t even think about. The plugin can set min/max quantites per:

  • Product
  • Variation
  • Category
  • Total of combined items at checkout
  • Cost (you can set a min/max cart cost)

And you can also:

  • Add exclusions from rules
  • Set groups/multiple rules (You need to buy product in groups of 3, etc)

Updated: Very often 🏅
Developer: (WooCommerce) Trusted 🏅

WooCommerce Max Quantity (Free)

This plugin does one thing – it lets you set a Maximum Quantity per product! It supports simple products, and it might support variable products but not individual variations. It appears to be updated about yearly and the code appears to be written well for what it does.

Updated: About yearly
Developer: Single Contributor

Final thoughts

If you need something simple, my code will work! If you need something that will be updated frequently and have customer support, go for the WooCommerce plugin.

You can see the full source of my example here:
https://gist.github.com/mikeyarce/f19d4b8601644212f734608d9bbf72a9

Categories
Storefront WooCommerce

Add a Slider to Storefront

This is going to be a step-by-step tutorial on how to add a Slider to the Storefront theme.  In this example I’m using <a href=”https://en-ca.wordpress.org/plugins/ml-slider/”>Meta Slider</a> but really you can use any slider of choice!  Why Meta Slider? It’s free and it works.

Categories
Storefront WooCommerce

Storefront: Change the basket icon to a cart icon

Someone asked me today, why does the shopping cart had an icon of a basket instead of a cart?  It’s called the “cart” after all, right?  The URL says cart, and WooCommerce says cart, but there’s an icon of a basket.