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: 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

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: 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: 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: 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

Posted on

WooCommerce: Redirect to Checkout on Add to Cart

A Business Bloomer fan asked me a specific question via the blog comments, so I had to make a new snippet of course πŸ™‚

Here’s how you force redirection to the checkout every time a product is added to cart, no matter if you do so from the loop/shop pages or the single product page. Continue reading WooCommerce: Redirect to Checkout on Add to Cart

Posted on

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

Posted on

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

Posted on

WooCommerce: Display Content Above Add to Cart @ Single Product Page

A client of mine decided to add a little notice (“30-day return policy offered”) just above the Add to Cart button on the WooCommerce single product page. There is no need to say this will allow her to increase the click-through rate and her sales conversion rate. Continue reading WooCommerce: Display Content Above Add to Cart @ Single Product Page

Posted on

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

You may want to force users to login in order to see the 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 original WooCommerce hooks and filters, hence the code below may not work. Contact me if you need custom code) Continue reading WooCommerce: Hide Price & Add to Cart for Logged Out Users

Posted on

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

Posted on

WooCommerce: Add Content to Empty Cart Page

A Business Bloomer fan asked me a great question: “I’m using your visual hook guide to add content above the cart, however I notice that it doesn’t work if the cart is empty. Are there hooks specifically for empty carts?“.

Well, let’s take a look if we have anything available… (hint: of course we do!). Continue reading WooCommerce: Add Content to Empty Cart Page

Posted on

WooCommerce: Remove Add Cart, Add View Product @ Loop

A fan requested an interesting edit on the Shop/Category page (or “loop”). Instead of having the default “Add to Cart” button, they wanted to remove that and substitute with a “View Product” button link to the single product page. Here’s the simple snippet. Continue reading WooCommerce: Remove Add Cart, Add View Product @ Loop

Posted on

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

Posted on

WooCommerce: Remove / Edit “X has been added to your cart” Message

A client asked me to completely remove the message that appears after you add a product to the cart from the product page.

This is simply done by using a PHP snippet, so here’s the quick fix for you! Continue reading WooCommerce: Remove / Edit “X has been added to your cart” Message

Posted on

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

Posted on

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