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 buttons – and make their link add products to cart, redirect to specific pages, include variable and grouped products and so on. You will see that with this guide it’s much easier to place Add to Cart buttons on any page you like such as custom landing pages, or even create custom buttons in your pricing tables – 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: 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: Move / Remove Coupon Form @ Cart & Checkout

Coupons: the good, the bad and the ugly. WooCommerce coupon codes are great to convert more sales – but sometimes they get users to pause / stop placing the order until they find a coupon code online (you did it too, I know).

One good workaround that the internet giants such as Amazon and eBay have implemented is to hide the coupon form until an email is entered, or alternatively to move the coupon code to the bottom of the Cart page. This is a very smart move, and gets the user to concentrate on the Cart / Checkout details before entering or searching for a coupon.

So the question is – how to move the coupon code form in the Cart page and remove it from the Checkout page? Well, as usual, a bit of PHP can help us. Here’s how it’s done! Continue reading WooCommerce: Move / Remove Coupon Form @ Cart & Checkout

WooCommerce: Remove Cart Product Link @ Cart Page

We’ve already seen how to remove the product permalink from the “order table” (the one you see on the Thank you page, My account pages and emails). Thsi time, we’re looking at doing the same thing on the Cart page, which uses different “hooks” than the order pages and therefore requires its own snippet.

Here’s how it’s done – as usual 1 PHP line is sufficient! Continue reading WooCommerce: Remove Cart Product Link @ Cart Page