Variable Products Archives - Page 2 of 2

WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

A nice way to avoid user frustration is to never let them pick a product / variation that is out of stock, only to realize later they can’t purchase it.

A variable product comes with a “select dropdown” on the single product page, from which customers can pick their favorite variation. Problem is that ONLY after selecting this they will find out about price, stock status and may be able to add to cart.

Today, we’ll completely disable (grey-out) those select dropdown options (variations) that are out of stock, so that users don’t waste time and only pick one of those that are in stock. Enjoy!

WooCommerce: Always Show Single Variation Price @ Single Product

When a variable product has the same price for all variations, a unique price is shown to website users i.e. the one at the top of the page. However, this behaves differently when each variation has its own unique price – in this case the single variation price shows after a variation is selected.

Now, this can be good or this can be bad – it depends. So in this snippet we’ll see a quick fix to make this behavior consistent i.e. showing the variation price after selection every time, no matter the conditions.

Thankfully, it’s literally one line of PHP. Enjoy!

WooCommerce: Get Currently Selected Variation ID

We’ve seen a lot of PHP so far on Business Bloomer – WooCommerce after all is a bunch of PHP files! However, sometimes PHP is just not enough, mostly when you need to work with variable products and the “currently selected variation”.

In fact, WooCommerce uses jQuery (a JavaScript Library) to handle variations on the frontend and show conditional content (variation price, description, add to cart) based on the dropdown selection. So, to detect the current variation ID we must use jQuery as well. Here’s how!

WooCommerce: Add Custom Field to Product Variations

Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.

Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?

WooCommerce: How to Display Variations with Color / Size Buttons?

Displaying product pages nicely is the entrepreneur’s dream.

Good UX means a much higher probability the interested customer is going to add to cart and complete the checkout.

However, WooCommerce variable products come with annoying dropdowns for each attribute (color, size, style, etc. depending on what options you have set up). And as you’ve already got a hint of my personal opinion, dropdowns are UX-killers.

Today, we take a look at handy plugins you can use to display product options (variations) in a user-friendly way. I’ve used these on many websites and they’re pretty reliable. As usual, it’s just the click of a button!

WooCommerce: Display “FREE” Instead of $0.00 Price

In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it?

Well, here’s how you restore the old WooCommerce functionality – as usual it’s as simple as using a PHP filter provided by WooCommerce and overriding the default behavior.

WooCommerce: How to Add to Cart Multiple Variations at Once?

This is a very common issue for B2B / Wholesale WooCommerce website managers. In these case scenarios, clients usually need to add to cart multiple variations to cart on the same page, without refreshing it each time.

For example, a clothing wholesale client wishes to order 100 Medium, 150 Large and 50 Small t-shirts without having to switch dropdown/swatch choice, click on 3 add to cart buttons and wasting time.

Thankfully, there are WooCommerce plugins for that. And today I give you a few premium choices.

No matter whether each variation is displayed in a table and has its own add to cart button or there is a single add to cart button for all variations – ordering more products at the same is a breeze!

WooCommerce: Display Variations’ Stock @ Shop Page

Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages.

Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore the returned string will just say “In stock” or “Out of stock”.

Enjoy!

WooCommerce: Custom Add to Cart URLs – The Ultimate Guide

In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID.

This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add to cart quantity and an optional redirect.

You will be able to see each possible scenario, and also copy/paste the custom URLs so that you only need to replace product IDs and quantities.

I strongly recommend you read through all the post comments in case you’re not sure about something – many people have asked the same questions over and over again e.g. “Is it possible to add more than 1 product to the cart?” (to which the answer is “no”, unless you install a custom plugin) or “Why does my product get added twice?”

With this guide it’s much easier to place WooCommerce add to cart buttons on custom landing pages, pricing tables, blog posts, external websites, and so on. Enjoy!