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

WooCommerce: How to 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 WooCommerce: How to Add to Cart Multiple Variations at Once?

WooCommerce: Change Add to Cart Quantity into a Select 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 Select Drop-down

WooCommerce: Edit 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 on the single product and cart pages. Who knew it was this easy?

Continue reading WooCommerce: Edit 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: “Split” Cart Table (A>Z Headings)

Because “split” might not be the correct term, let me explain this better.

Let’s imagine your WooCommerce cart table is sorted by A>Z (with my WooCommerce cart sorting snippet for example). If your business model and/or UX requires it, then you might need to “add a cart table row” to communicate the fact those items belong to that letter:

  • A
    • Item 1 Title: “AAA”
    • Item 2 Title: “ACC”
  • B
    • Item 3 Title: “BDD”
    • Item 4 Title: “BEE”

Once again, this might sound incomprehensible so you’d better look at the screenshot below. Enjoy!

Continue reading WooCommerce: “Split” Cart Table (A>Z Headings)

WooCommerce: Show Checkout Even If Cart Is Empty

By default, the WooCommerce Checkout page redirects you back to the (empty) Cart page in case there are no products in the Cart.

Now, there are times when you still need users to see the Checkout page and avoid this redirect. And thankfully, WooCommerce provides us with two filters that we can use to immediately disable this default behavior. Enjoy!

Continue reading WooCommerce: Show Checkout Even If Cart Is Empty