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

WooCommerce: Rename “Add to Cart” Button if Product Already @ Cart

When talking about UX, or for very specific WooCommerce shops, you might need to “communicate” to the user a product is already in the Cart before re-adding it or increasing its quantity from the Shop/Category/Loop and Single Product pages.

The “Add to Cart” button label comes with a filter (actually 2 filters, one for the Single Product page and another for the other pages such as Shop), so all we need to do is targeting those two, “filter” the label text in case the product is already in the Cart, and return that back to WooCommerce. If this looks like Japanese to you don’t worry – simply copy/paste the snippet below! Continue reading WooCommerce: Rename “Add to Cart” Button if Product Already @ Cart

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

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?

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

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

WooCommerce: Add “Quantity” Label in front of Add to Cart Button

Here’s another little WooCommerce tweak for your website user experience: let’s add a string just in front of the Add to Cart button that says “Quantity: “. As usual, the biggest thing is looking for the right “hook”… but thankfully WooCommerce plugin is full of them and adding a string where we want is so easy πŸ™‚ Continue reading WooCommerce: Add “Quantity” Label in front of Add to Cart Button

WooCommerce Custom “Add to Cart” URLs – The Ultimate Guide

Here’s how to create custom WooCommerce Add to Cart links / buttons and make them add products to cart, redirect to specific pages. This tutorial includes also variable and grouped products, as well as quantities >1.

With this guide it’s much easier to place Add to Cart buttons on custom landing pages, pricing tables, blog posts and so on. Enjoy!

Continue reading WooCommerce Custom “Add to Cart” URLs – The Ultimate Guide

WooCommerce: Edit “Add to Cart” Text by Product Category

Hello WooCommerce Customizers!

Today is episode #12Β of my “18 snippets in 18 days” challenge. With 6 days to go, I hope you’ve enjoyed the snippets so far and that your WooCommerce code snippet library has been growing steadily πŸ™‚

I ask you to kindly share on social media and leave blog comments to support my marathon, a lot of work is going into this and feel free to share some love πŸ™‚

Today we take a look at the WooCommerce “Add to Cart” buttons. What if you wanted to change the “Add to Cart” text depending on the Product Category? For example, you may want to show “Buy Now” for books and “Add to Basket” for cds. Continue reading WooCommerce: Edit “Add to Cart” Text by Product Category

WooCommerce: Hide Price & Add to Cart for Logged Out Users

You may want to force users to login in order to see prices and add products to cart.

All you need is pasting the following code in your functions.php (please note: your theme may have overwritten some default WooCommerce functions, hence the code below may not work. Contact me if you need custom code). Enjoy!

Continue reading WooCommerce: Hide Price & Add to Cart for Logged Out Users

WooCommerce: Add Product to Cart When Visiting a Specific Page

We’ve already seen how to add a product to cart automatically when a user enters your website. However, I needed a different functionality on this same website, and specifically I wanted a product added to cart only when a user like you visits a specific WordPress page ID.

If you wish to test, go to my free video tutorial page called “How to Customize the WooCommerce Single Product Page“. As soon as the page loads a product is magically added to cart, so that the WooCommerce Checkout on that same page is populated with the hidden item. If you go to my Cart page right after visiting that landing page, you can verify there is a product in there.

So, how did I do it? Continue reading WooCommerce: Add Product to Cart When Visiting a Specific Page

WooCommerce: Add Product to Cart Programmatically

Quite an interesting functionality! a WooCommerce client required to have the cart pre-filled with one product as soon as the customer accessed the website. I don’t remember the exact reason, but this could be useful when you want to give them a free product by default, or you want to send your visitors straight to checkout with a product already in the cart. Let’s see how this snippet works! Continue reading WooCommerce: Add Product to Cart Programmatically

WooCommerce: Remove Product From Cart Programmatically

We already saw how to add a product to cart automatically, for example if you visit a specific page or if there are no products in the cart – but today we want to find out how to do the opposite: if a certain condition is met, we want to remove a product ID from the cart.

This becomes a little complex – while adding an item to cart requires just its product ID, removing it from the cart forces you to know the “cart item key”. Japanese, I know, but just copy the snippet and you’re done!

Continue reading WooCommerce: Remove Product From Cart Programmatically

WooCommerce: Add Upsell Area @ Checkout Page

If you want to increase your AOV (Average Order Value), you can definitely start from the WooCommerce Checkout page.

A client asked me to place a “Donation Area” close to the “Place Order” button (so at the bottom of the page, once customers are ready to pay) to drive more awareness around this add-on. All I had to do was creating hidden products with a donation value, use my own “Custom Add to Cart URL” guide to create add to cart links and print an HTML box right above the checkout button by using my WooCommerce Visual Hook Guide for the Checkout Page. Enjoy!

Continue reading WooCommerce: Add Upsell Area @ Checkout Page