You searched for Cart - Page 3 of 18

WooCommerce: Add to Cart Quantity Plus & Minus Buttons

Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page.

The custom code 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 the code or install the lightweight plugin and see the magic happen.

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 Checkout 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 remove the coupon form in the Cart page and how to move the same to the bottom of the Checkout page? Well, as usual, a bit of PHP can help us. Here’s how it’s done!

WooCommerce: Remove Product Links @ 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 Product Links @ Cart Page

WooCommerce: Cart and Checkout on the Same Page

This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page.

But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than one product per order), if you want to save an additional step (two steps convert better than three: “Add to Cart” > ~~“Cart Page”~~ > “Checkout Page” – and this is not rocket science), if your custom workflow and ecommerce objectives require you to manage Cart and Checkout all together, well, this tutorial is for you.

There is a mix of shortcodes, settings and PHP snippets you can use to make this work out of the box. And trust me, this is easier than you think.

While many developers decide to turn the checkout process into a “Multi-Step Checkout” (ehm, not sure why – the more steps the more likely it is to have a cart abandonment), in here we’ll see the exact opposite.

So, how do they do it?

Here’s the complete, easy, step by step guide to put Cart & Checkout on the same page. Give it a go, do some WooCommerce testing and tracking, and see if it converts better 🙂

WooCommerce: Exclude Hidden Products from Mini-Cart Counter

When you add a hidden product to Cart, either manually or programmatically, this will be displayed in the Cart, Checkout and Order details pages (I’m not sure why a hidden product behaves like that… but thankfully you can hide hidden products from the Cart/Checkout/Order page with this snippet).

Problem is, even if you hide hidden products from the Cart page, the “Mini-Cart” product counter icon or text (it depends on your theme) will still count them as products (see the screenshot below). So the question is: in conjunction with the snippet aforementioned, how do I exclude hidden products from being counted in the “menu cart” (also called Mini-Cart Widget)? Continue reading WooCommerce: Exclude Hidden Products from Mini-Cart Counter

WooCommerce: Hide Checkout Fields if Virtual Product @ Cart

If you sell downloadable/virtual products and need to simplify your WooCommerce checkout when such product type is in the Cart, you’ve come to the right place!

Here’s a simple snippet, as well as a handy mini-plugin, that checks if there are only “virtual” products in the Cart and hides all the billing fields and order notes (except name and email).

The mini-plugin also allows you to enable this for free virtual orders only, and to move the relevant billing fields under a toggle instead of removing them all together.

Enjoy!

WooCommerce: Remove Mini-Cart Widget Dropdown

Less is more (sometimes). On this same website, I’m already forcing max 1 product in the Cart and automatically redirecting users to Checkout upon add to Cart. On top of that, I’ve disabled WooCommerce cart fragments for performance reasons.

As a result, I definitely don’t need the whole “Mini-Cart Widget Dropdown Content”. 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!

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: How to Hide “Shipping Calculator” Fields @ Cart

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).

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

When talking about UX, or for very specific WooCommerce shops, you might need to tell 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 hooks. We will “filter” the label text in case the product is already in the Cart, and return that back to WooCommerce. If this sounds like Japanese to you (hey, unless you’re from Japan!) don’t worry – simply copy/paste the snippet below as per below instructions.

Enjoy!

WooCommerce: Sort Cart Items Alphabetically A>Z

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 🙂

WooCommerce: Automatically Update Cart on Quantity Change

There is a lot of literature online that solves this UX problem – so in this article let’s see if I can give you a simplified, working, updated version.

So, do you hate the “Update Cart” button too? Yes, the one you have to click after you update the quantity of a product in the cart…

Well, you’re in the right place: a simple PHP function, two lines of JQuery, one line of CSS (or a mini-plugin) and the result is pretty straight forward!

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!

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, clients usually need to add to cart multiple variations to cart on the same page, without refreshing it each time.

For example, a clothing wholesale client wishes to order 100 Medium, 150 Large and 50 Small t-shirts without having to switch dropdown/swatch choice, click on 3 add to cart buttons and wasting time.

Thankfully, there are WooCommerce plugins for that. And today I give you a few premium choices.

No matter whether each variation is displayed in a table and has its own add to cart button or there is a single add to cart button for all variations – ordering more products at the same is a breeze!

WooCommerce: Check if Product Category is in the Cart

We already studied how to detect if a product ID is in the cart – but if you take a look at the comments many of you were asking how to detect product categories.

So, today we’ll do exactly that. You can disable shipping rates, payment gateways, you can print messages, you can apply coupon programmatically… there are lots of things you can do “conditionally”, based on whether a given product category is in the Cart or not.

WooCommerce: Display Cart Item Subtotal With Coupon Discount

This is a nice follow up from last week’s snippet “WooCommerce: Slashed Cart Subtotal if Coupon @ Cart“, where I showed how to display original/discounted cart total on the same totals table row.

This time, I want to let users know the original and discounted cart item (product) amount after a certain coupon is applied. Who knows – this might improve your Cart U/X 🙂 Continue reading WooCommerce: Display Cart Item Subtotal With Coupon Discount

WooCommerce: Slashed Cart Subtotal if Coupon @ Cart

This is a nice snippet to let users know what the original cart amount was by slashing the cart subtotal and showing the cart subtotal after discounts on the same line (Cart totals > subtotal).

You can then hide the coupon code line if you wish!

WooCommerce: Display Product Categories @ Cart & Checkout Pages

While working for a freelance client I had to “detect” the cart item categories in order to apply some PHP customization.

So I thought – why not share with you how to display product categories in the Cart and Checkout? This adds a nice touch to those two vital pages, and prints a list of product categories under each cart item.

Also, I’m glad to introduce you to the amazing world of “wc_get_product_category_list“, a very handy WooCommerce PHP function!

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. Enjoy!

WooCommerce: Check if Product ID is in the Cart

Here’s the story: I’m working with one of my freelance clients and I need to show certain content in the Checkout (a product-specific “Terms and Conditions”) if such product is in the Cart.

Now, I’ve always looked for products in the Cart by “looping” through the Cart with a foreach (here, for example: Apply a Coupon Programmatically if a Product is in the Cart). But as I said, after some random research, I found out about another magic WooCommerce function: “find_product_in_cart()“. Which means finding a product in the Cart doesn’t require custom loops or complex PHP… it’s just a “one liner”. Enjoy!