WooCommerce: Truncate Tag List @ Single Product Page

If you use WooCommerce product tags, it’s possible that a product may belong to 10 or more of them. When that happens, the single product page displays a long list of tag links, which may take too much space (see the below screenshot to visualize this).

Today’s snippet is indeed a way to truncate that list to – say – 3 tags only, and add a “+” to show the rest upon click. In this way if the customer is really interested in that they can expand the view, otherwise tags will take up a single line only. Enjoy!

Continue reading WooCommerce: Truncate Tag List @ Single Product Page

WooCommerce: Split Shop Page By Category

Well, this is gonna be a big one for you. When you start having lots of products and lots of product categories, the shop page becomes either messy or unrepresentative, because it may show just the latest 16 products on page 1 when you have dozens of categories and a much wider range of products…

As usual, there are plugins for that – first one that comes to mind is Nested Category Layout by Skyverge – but today I wanted to see how doable it was to code it, and how many lines of PHP were required.

So, if you wish to switch the WooCommerce shop page display from “products” to “a given number of products for each parent category”, here’s the fix. Enjoy!

Continue reading WooCommerce: Split Shop Page By Category

WooCommerce: Display Variations’ SKU @ Product Admin

I find it quite annoying that variable products display an empty SKU cell in the WordPress > Products admin page even if their variations may have one available.

Today, we go fix that. With this simple snippet, your variable products will display the SKU of each variation, and if there is none, empty brackets (so, it’s easy to identify if any variation is missing its SKU).

So, let’s see how it’s done. Enjoy!

Continue reading WooCommerce: Display Variations’ SKU @ Product Admin

WooCommerce: Add Custom Field to “Quick Edit”

WooCommerce product custom fields are possibly the most used customization from what I’ve seen over the years on clients’ websites.

Adding custom fields to the product backend is pretty straight forward (including the input fields to be used for editing their values), however there are two additional areas where you need to do more work in order to allow for custom field editing: the “Quick Edit” and the “Bulk Edit” sections (WordPress Dashboard > Products).

We already saw how to allow a new custom field to appear in the Bulk Edit section, so this time we’ll talk about the Quick Edit window. So, how do we add a custom field in there (WordPress Dashboard > Products > Hover on a given product > Quick Edit)?

Well, here’s a fully working snippet for you. Enjoy!

Continue reading WooCommerce: Add Custom Field to “Quick Edit”

WooCommerce: Hide Price If Product Out of Stock @ Frontend

Sometimes, the nature of ecommerce businesses requires some extra features. Thankfully, WooCommerce allows to customize pretty much everything based on whatever condition.

Today, we’ll see how to hide prices for out of stock items, on the shop, categories, archives, loops and single product page.

Think of an art gallery which sells unique art pieces, and doesn’t want to let users know for what price sold an item. Or maybe an online business that often runs discounts – why reveal at which price sold an item that is now out of stock? Of course, there are way more case scenarios – I’d be curious if you shared yours in the comment area.

But for now, copy and paste the snippet and that’s it, you’re good to go. Enjoy!

Continue reading WooCommerce: Hide Price If Product Out of Stock @ Frontend

WooCommerce: Remaining Stock @ Order Emails

This is a neat customization, directly requested by a WooWeekly subscriber who needed to literally show the remaining stock quantity for each ordered item to store managers, in order to have an immediate idea of low/zero stock quantities after each order.

If that’s not clear, simply take a look at the screenshot. In my dev site, I ordered a product that originally had stock quantity = 1. In the “New Order” email (thanks to the snippet below), beside the order item quantity of 1, there is also a “(0 remaining)” notice that clearly displays the item’s current stock level.

Cool, ha? So, let’s see how that’s coded. Enjoy!

Continue reading WooCommerce: Remaining Stock @ Order Emails

WooCommerce: Stock Quantity Suffix e.g. “sq. in.”, “Kg”, “boxes”, etc.

Each WooCommerce business is different, which means customization is required to adapt the store to unique specifications.

A clear example is the stock quantity. Not all stores can display the standard notice “11 in stock”. The display could change to “11 Kg in stock” if stock is based on weight. Or maybe “11 boxes in stock” or “11 pairs in stock” in case the package description is useful UX-wise. Also, “11 m3 in stock” if the business sells volumes.

Either way, this is a nice trick to display a “stock quantity suffix” in your WooCommerce Single Product Page. Enjoy!

Continue reading WooCommerce: Stock Quantity Suffix e.g. “sq. in.”, “Kg”, “boxes”, etc.

WooCommerce: Display Selected Variation Info (price, weight, etc.) @ Single Product Page

We already saw how to get the “Variation ID” from the single product page once product attributes dropdown are selected. In that tutorial, we ran a jQuery “change” event once “input.variation_id” got updated.

However, that only gives us access to the variation ID. What if I need to read the variation price, stock quantity, SKU, weight, and so on? Well, in such case, we need different code. Enjoy!

Continue reading WooCommerce: Display Selected Variation Info (price, weight, etc.) @ Single Product Page

WooCommerce: Get All Shipping Zones & Rates

As an advanced WooCommerce developer, at some stage you’re really going to need this PHP function, the same way you often browse through Business Bloomer’s WooCommerce visual hook guides or the product / order / cart getters.

This time we go study how to “get” the shipping zones and rates, because it’s likely that you will need to loop through them when you need to display shipping rates somewhere, or for other custom functionalities. Enjoy!

Continue reading WooCommerce: Get All Shipping Zones & Rates

WooCommerce: Define Product Settings Programmatically e.g. Enable Reviews, Sold Individually

In WooCommerce, everything is easy until you have a dozen products to manage. But once you start scaling, and maybe need to import hundreds of items, right then is when you go looking for shortcuts.

Problem is – there are single product settings that you must enter manually for each product (or do it in bulk anyway) such as tax status, tax class, shipping class, sold individually, enable reviews and more; you could keep repeating your manual setup operations or fine-tune your bulk editor system to get that done, but what if there were a few lines of code that would simply “set” whatever option you need for ALL products, without worrying whether that specific option is set or not set in the single product edit page?

For example, it happened to a client of mine that we forgot to “enable reviews” on 10,000 imported products so we were left with two choices: re-run the product import, or find something smarter. And the latter is what we’ll cover today.

So, how do you “override” or “force” a specific WooCommerce single product setting without worrying about its actual per-product value, so that products do behave all the same? Here are a couple of ideas. Enjoy!

Continue reading WooCommerce: Define Product Settings Programmatically e.g. Enable Reviews, Sold Individually

WooCommerce: Rename “Read more” To “Out of stock” @ Shop

There is an unfortunate (IMO) add to cart button naming on the WooCommerce shop page / category pages / product loops. When an item is out of stock, the “Add to cart” (or “Select options” for a variable product type) button label will turn into “Read more”.

To be honest, that doesn’t really say much to the end customer. It’s quite confusing and doesn’t make much sense.

Today, we’ll see how to change that “Read more” label into something more comprehensible: “Out of stock”. A super easy trick. Enjoy!

Continue reading WooCommerce: Rename “Read more” To “Out of stock” @ Shop

WooCommerce: Fix “Sorry, This File Type Is Not Permitted for Security Reasons” For Downloadable Products

In WordPress, you get the “Sorry, This File Type Is Not Permitted for Security Reasons” error when you try to upload certain files to the Media library. Similarly, in WooCommerce you may get the same error when you try to upload a downloadable product download files.

Why is that? Well, by default WordPress only allows certain file extensions to be uploaded to the site. For example PNG, JPG, PDF, PPT, DOC, MP3 and MP4 are within the allowed file types – the reason being they are “safe” and won’t contain malicious code that could create problems within a WordPress install.

The thing is – I’ve started selling my first downloadable product (a mini-plugin) here on Business Bloomer and I needed to upload a ZIP file (the mini-plugin), a JSON file (a Code Snippet export file for those who don’t like plugins) and a TXT file (the plugin’s raw code for those who like to play with PHP). All went smoothly for the ZIP upload, but as soon as I tried uploading the JSON and TXT files I got the “Sorry, This File Type Is Not Permitted for Security Reasons” error.

Panic? Not really. It’s only a matter of finding the right code to change this default WordPress behavior. So, say hello to the “upload_mimes” filter, which allows us to do just that. Enjoy!

Continue reading WooCommerce: Fix “Sorry, This File Type Is Not Permitted for Security Reasons” For Downloadable Products

WooCommerce: Phone Input Mask @ Checkout

The WooCommerce checkout page has a default phone input field that gets validated upon checkout (for HTML geeks, it’s actually an input type = “tel”). Usually, if such phone number contains letters, it will fail and checkout will stop.

But that’s not the problem. Let’s suppose you only have US customers, or that you want to force customer to enter a certain format (e.g. “+” or “01” as prefix)… well, there is no way to achieve that out of the box within the WooCommerce settings.

However, anything is possible in regard to customization, so all we need are 3 small changes: force the billing phone input to stay within a “maxlength“, set the phone input placeholder so that users know what the format should be before typing in, and finally add some JavaScript to provide an input “mask”, so that the final output is exactly what we want (123-456-7890 in this case scenario, but it could be anything).

Enjoy!

Continue reading WooCommerce: Phone Input Mask @ Checkout

WooCommerce: “Hide Out of Stock Items” Exception

WooCommerce stores with large inventory often decide to hide out of stock products from the website. As you all know, there is a WooCommerce setting for that, right under Settings > Products > Inventory called “Out of stock visibility“. With the tick of a checkbox you can toggle the visibility of products that ran out of stock and immediately return a clean shop page with no unpurchasable items.

The story is, it could be you may want to still show out of stock items on a specific page via a custom shortcode, or limit the out of stock visibility setting only to certain categories.

Well, today we will learn a cool WordPress hook called “pre_option_option“, that basically allows us to override whatever settings we have in the WordPress admin, and assign our own value on a specific page or condition. Enjoy!

Continue reading WooCommerce: “Hide Out of Stock Items” Exception

WooCommerce: Create Product Programmatically

No matter if this snippet suits your needs or not, it’s still interesting to see how you can create a brand new WooCommerce product programmatically / automatically when a certain even triggers.

In this case studio, we’ll see how to generate a brand new product, set its featured image, price, category, title and a download file as soon as an image is uploaded in the WordPress backend Media section. This would be super useful for photographers for example – simply upload a new image to the WordPress Media Library, and a new product is automatically created.

Of course, you can customize the code and use it with different triggers. For example, you may need to create a new product automatically when each phone product needs always a matching case product, just with a different title. Or maybe you want to tie product creation once an order is placed.

Either way, enjoy!

Continue reading WooCommerce: Create Product Programmatically

WooCommerce: Sort Products By Stock @ Admin Dashboard

We’ve already seen how to sort frontend products by in stock first and out of stock last, but what about doing the exact same for administrators and shop managers in the backend?

Sometimes shops have to deal with a lot of “sold” products and the products table becomes messy, so this is a way to sort by stock status (In stock -> Out of stock) on load. You can then use the column headers to sort by other data as usual, so this will only work once you access /wp-admin/edit.php?post_type=product page.

So, here’s a very simple snippet for you. Enjoy!

Continue reading WooCommerce: Sort Products By Stock @ Admin Dashboard

WooCommerce: Product Category Price Range

WooCommerce variable products display a price range by default, which goes something like this: $MIN-$MAX. Now, wouldn’t it be nice, on the Shop page or Category Widget, to show the price range for each category?

Well, as usual this is a customization that can apply to certain online businesses only, so hopefully you’re one of them. Either way, this is yet another chance for you to learn PHP applied to WooCommerce. Enjoy!

Continue reading WooCommerce: Product Category Price Range

WooCommerce: Disable Attribute Select Unless Previous Is Selected (Variable Products)

On the single product page for a variable product, multiple dropdowns display so that users can select their desired attribute choice.

In certain cases, you’d want them to follow the exact top-to-bottom attribute order while they’re selecting a specific variation. With that I mean that you want them to select the first attribute first, then the second, then the third… basically you want to disable the “next attribute select dropdowns” unless the previous select changes to a value that is not null.

Better shown in an image than said, so here’s the GIF, and with that the PHP/jQuery snippet. Enjoy!

Continue reading WooCommerce: Disable Attribute Select Unless Previous Is Selected (Variable Products)

WooCommerce: Show Product Images @ Checkout Page

Show WooCommerce Product Images @ Checkout

The Order Review section of the WooCommerce Checkout Page shows the product name, quantity and subtotal. No sign of the product image, which can be very useful to identify/differentiate between similar products or product variations.

This simple snippet will help you display just that: the featured image beside the product name inside the order review table. Easy peasy. Enjoy!

Continue reading WooCommerce: Show Product Images @ Checkout Page