Posted on

WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

Here’s a quick snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page.

This snippet comes with a jQuery script as well, as we need to detect whether the plus or minus are clicked and consequently update the quantity input. jQuery might look difficult to many, but the beauty of this is that you don’t need to have a degree in jQuery – just copy/paste and see the magic happen.

Note: you will probably also require some additional CSS, as your theme might give a “float” to the quantity DIV while by default HTML buttons take inline-block. I’ve added some CSS valid for the Storefront theme below. Continue reading WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

Posted on

WooCommerce: Show Custom Short Description When Empty

The WooCommerce product short description is that piece of content that appears on the right hand side of the featured image above the add to cart button. This is, of course, unless you forgot to enter the short description under Product > Edit Product!

But in case you forgot to enter it, or alternatively want to display a global short description, here’s a quick PHP snippet for you. Enjoy! Continue reading WooCommerce: Show Custom Short Description When Empty

Posted on

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. And here’s how! Continue reading WooCommerce: Get Currently Selected Variation ID

Posted on

WooCommerce: Add Content Below the Single Product Page Images

One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…

If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.

In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only). Continue reading WooCommerce: Add Content Below the Single Product Page Images

Posted on

WooCommerce: How to Sell Product Customizations & Add-Ons

Product customization has been revolutionizing ecommerce in the last 5 years. And WooCommerce store owners, if possible, should look into offering additional product options, add-ons, personalizations, custom text and whatever can make a mass product unique to each single customer.

You can now pick your shoe colors, engrave a message on jewelry, upload your own graphics on t-shirts, pick your own ingredients, select custom materials and so on. Correct, some very smart marketer found out a way to sell the same exact product to a bunch of very different, demanding people and make them all 100% happy – while also increasing average order value (AOV), margins, profits, return business and decreasing returns, bad feedback and churn rate.

Most of us rely on WooCommerce product variations to sell the same product in different “sizes” or “colors”… but this has got nothing to do with product “add-ons”. With a product add-ons plugin, you can sell additional options and personalizations on top of the existing product attributes.

Good news is there are free and premium plugins that can help you implement product options, customization and add-ons… and eventually increase your profit. Continue reading WooCommerce: How to Sell Product Customizations & Add-Ons

Posted on

WooCommerce: Hide Related Products @ Single Product Page

Adding content to the WooCommerce Single Product Page is super easy – but what if you wish to remove / hide a default element?

Well, in this case it gets even easier. All you need to know is the default hook used by WooCommerce – so that you can remove it with one line of PHP in your functions.php. You can find a list of default hooks here: (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/)

For example, how do we hide the Related Products? Well, here’s one line of code that will help you! Continue reading WooCommerce: Hide Related Products @ Single Product Page

Posted on

WooCommerce: Display Custom Product Badge (Conditionally)

There are many plugins out there to show custom badges, notices, messages… but as usual a few lines of PHP can help you achieve the same result!

Today we take a look at how to add a checkbox to the product edit page, so that you can display a conditional badge based on whether the checkbox is checked or not.

Have fun ๐Ÿ™‚ Continue reading WooCommerce: Display Custom Product Badge (Conditionally)

Posted on

WooCommerce: Add Custom Field to Each Product Variation

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 products without variations (or the parent product only if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation? Continue reading WooCommerce: Add Custom Field to Each Product Variation

Posted on

WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

A client of mine asked me to code a checkbox on the single product page called “Is this a gift?”. They noticed that their customers who want to gift the product to a friend get confused with the “Shipping to a different address” form in the WooCommerce checkout.

So, what about renaming “Shipping to a different address” into “Who is this gift for?” if a “gift” is in the cart? Well, this snippet does just that and you can adapt it / customize it to your specific case. Continue reading WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page

Posted on

How to Display WooCommerce 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! Continue reading How to Display WooCommerce Variations with Color / Size Buttons?

Posted on

WooCommerce: Add an Icon to the Add to Cart Buttons

Ecommerce is all about user experience, and making it easier for people to add to cart and checkout smoothly. Reducing the number of checkout fields is a great idea for example – as well as graphically communicating your number 1 objective: “please add to cart now!”.

So, how do you add an icon (or an HTML symbol) to the add to cart buttons in WooCommerce? This can be done in two ways – via CSS if you want to show Fontawesome Icons or via PHP if you prefer to use a simple HTML unicode symbol.

Let’s take a look at both methods! Continue reading WooCommerce: Add an Icon to the Add to Cart Buttons

Posted on

How Can You Add to Cart Multiple Variations at Once?

This is a very common issue for B2B / Wholesale WooCommerce website managers.

In these case scenarios, customers usually wish to add to cart multiple variations to cart on the same page, without refreshing it each time. For example, a clothing wholesale customer wishes to order 10 Medium, 15 Large and 5 Small t-shirts from the same product page – without having to do this 3 times.

Thankfully, there are plugins for that. And today I give you two choices – the first where each variation is displayed in a table and has its own add to cart button, and another where there is a single add to cart button for all variations. Continue reading How Can You Add to Cart Multiple Variations at Once?

Posted on

WooCommerce: Disable Zoom, Gallery Slider & Lightbox @ Single Product

Sometimes, cool things don’t apply to certain businesses. Also, keeping the default WooCommerce behaviour might slow down your website, should you not need to use a specific functionality.

For example, I’m talking about the new “Featured Image Zoom”, introduced by WooCommerce a couple of updates ago. What if your customers don’t need this? How can you disable it?

Well, as usual, this can be done with a few PHP lines! Now go and disable all the stuff you don’t need ๐Ÿ™‚ Continue reading WooCommerce: Disable Zoom, Gallery Slider & Lightbox @ Single Product

Posted on

WooCommerce: Order a “Free Sample” @ Single Product Page

Recently I was on a coaching call with a client and the “Free Sample” challenge came up. Client has 400+ products on the website and had no intention of adding a free variation to each product manually.

So, I promised to myself I was going to study a different approach. And today you get it completely free. Needless to say, a comment and a social media share are much appreciated ๐Ÿ™‚ Continue reading WooCommerce: Order a “Free Sample” @ Single Product Page

Posted on

WooCommerce: “Continue Shopping” Button @ Single Product Page

A freelance client hired me a while ago to display a “Continue Shopping” button on the Single Product Page, next to the Add to Cart. A simple way to send their users back to where they were coming from without clicking the “previous” button on the browser ๐Ÿ™‚

Here’s how it’s done, featuring an awesome WordPress function called “wp_get_referer()”! Continue reading WooCommerce: “Continue Shopping” Button @ Single Product Page

Posted on

WooCommerce: Change Add to Cart “Quantity” into a Drop-down

The default WooCommerce Add to Cart “Quantity Input” is a simple input field where you can enter the number of items or click on the “+” and “-” to increase/reduce the quantity.

A freelance client hired me to turn that input into a “Select” drop-down. For their audience and UX requirements, it makes sense to let their customers choose the quantity from a drop-down instead of having to manually input the number.

Online there are complex snippets, but I decided to make things easier. The WooCommerce function responsible to generate the quantity input is called “woocommerce_quantity_input“. Luckily, it’s a pluggable function – which means we can simply add this exact same function name to our child theme’s functions.php to completely override it. Continue reading WooCommerce: Change Add to Cart “Quantity” into a Drop-down

Posted on

WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object

I’ve been wanting to publish this guide for a long while. As a freelancer, every day I repeat many operations that make me waste time – and one of them is indeed “How to get ____ if I have the $product variable/object?”.

For example, “How can I get the product SKU”? Or “How can I get the product short description”? Or maybe the product stock level, shipping class, tax class, price, regular price, sale price, and so on… hopefully this article will save you time ๐Ÿ™‚ Continue reading WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object

Posted on

WooCommerce: Show Video Instead of Featured Image

This week’s snippet is a very easy – yet helpful – one. Many ecommerce entrepreneurs prefer to display an interactive video instead of a static, boring, featured image.

So, let’s see how to work this out for a specific product ID! Continue reading WooCommerce: Show Video Instead of Featured Image

Posted on

WooCommerce: Define Add to Cart Min, Max & Step Quantity

Yes, there are many plugins that already achieve this. But my goal at Business Bloomer is to save you from plugin conflicts, delicate updates and to make you learn some PHP ๐Ÿ™‚

So, here’s how you can add, with a few lines of PHP, a minimum, maximum, increment and starting value to your Add to Cart quantities. Who knew it was this easy? Continue reading WooCommerce: Define Add to Cart Min, Max & Step Quantity

Posted on

WooCommerce: Change No. of Thumbnails per Row @ Product Gallery

WooCommerce 3.0 completely revolutionized the single product page featured and product gallery images, including their PHP. If, in the past, a simple filter from WooCommerce was able to change the number of thumbnails per row (https://docs.woocommerce.com/document/change-number-of-thumbnails-per-row-in-product-galleries/), this does not exists anymore ๐Ÿ™

So, let’s see how we can achieve this in WooCommerce 3.0 and above. For this example we’ll use two themes – in fact some theme-specific CSS is also needed together with the PHP. Continue reading WooCommerce: Change No. of Thumbnails per Row @ Product Gallery