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
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
This is a very common question for B2B WooCommerce website managers. A customer would want to add to cart 10 Medium, 15 Large and 5 Small t-shirts from the same product page – without having to do this 3 times. Continue reading How Can You Add to Cart Multiple Variations at Once?
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
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 & Incremental Quantities
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
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
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
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
Mostly when working with external products in WooCommerce, you may want to not only change “Add to Cart” into something else… but also opening the link in a new tab / window. Here’s how I did it! Continue reading WooCommerce: Add to Cart URL to Open in New Tab
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
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
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
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
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
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
A client asked me to remove the message that appears after you add a product to the cart from the product page. this is very simple and instead of using PHP, we will just stick to CSS this time Continue reading WooCommerce: Remove/Edit “Product was successfully added to cart” message
Less is more (sometimes). On this website, I’m already forcing max 1 product in the Cart and automatically redirecting users to Checkout upon add to Cart.
As a result, I definitely didn’t need the whole “Mini-Cart Widget Dropdown Content” either. To test, try to “hover” onto the shopping cart icon on the top right, and you’ll notice there is no cart dropdown 🙂
Well, this is how it’s done – I love when a complex thing is fixed with one simple line of PHP! Continue reading WooCommerce: Hide Mini-Cart Widget (Dropdown)
The “Shipping Calculator” can be enabled via the WooCommerce settings in order to give the user a way to calculate their shipping fees before getting to the Checkout Page. Usually they fill out the country, state, city and postcode form fields and click on “Update Totals” in order to calculate the shipping.
However, what if you only calculate shipping based on country? Or what if you only charge by zip code / postcode? In this case, you will need to hide the input fields you don’t need, and make UX better.
Well, here are some WooCommerce filters you can use from WooCommerce version 3.4 onwards to hide the fields you like (apart from country, which is mandatory). Continue reading WooCommerce: How to Hide “Shipping Calculator” Fields @ Cart
Your WooCommerce shopping cart might look messy when it contains many products. Your specific business, besides, might require you buy “Part 1” first and “Part 2” after.
A way to tidy up the WooCommerce shopping basket is – for example – to sort products based on their title, from A to Z. As usual, this can be done with a few lines of PHP, even if you have no clue about coding… feel free to copy, paste, and enjoy the snippet 🙂 Continue reading WooCommerce: Sort Cart Items Alphabetically A>Z