WooCommerce: Ajax Add to Cart Quantity @ Shop

As you know, you can tick the “Enable AJAX add to cart buttons on archives” checkbox in the WooCommerce settings in order to add products to cart from the Shop / Category / Tag / loop pages without refreshing the page.

This is great for certain businesses, especially those who sell in bulk and where customers know exactly what they need to buy without the need of checking the single product page.

The bad news is that the Ajax Add to Cart button only allows you to add 1 item to the cart i.e. there is no quantity input field. The other bad news is that the Ajax Add to Cart button only works for simple products, while for variable ones it will turn into a “Select options” link without the possibility of adding a variation to cart from there.

In this tutorial, we will see how to turn the WooCommerce shop into an… Ajax cart with quantity inputs. Enjoy!

Continue reading WooCommerce: Ajax Add to Cart Quantity @ Shop

WooCommerce: Display Product ACF Value @ Shop Page

We already talked about displaying an ACF field on the single product page. This time around, we’ll do the exact same but for the product loop pages (shop, category, tag, etc.). ACF (Advanced Custom Fields) is an awesome plugin to create and manage custom fields, so this is definitely a tutorial that will help many WooCommerce developers.

Please note that if ACF is not active, the snippet will break the site. There is a way to make it trigger only when ACF plugin is active, just so you know. Anyway, let’s see how we can display the value of a product ACF inside the loop. Enjoy!

Continue reading WooCommerce: Display Product ACF Value @ Shop Page

WooCommerce: Switch Shop Columns Responsively

Ok, I may need an English language refresher… But the point I was trying to make was that yes, there is a way to switch the number of columns in the WooCommerce shop page, however that’s static.

What if I wanted to show 5 columns of products on large desktops, 4 columns on desktops, 3 on tablets and 2 on smaller devices? Well, this “dynamic” behavior is – this time around – managed by CSS. Let’s see how it’s done!

Continue reading WooCommerce: Switch Shop Columns Responsively

WooCommerce: Display Product Categories @ Shop

We already saw how to show product categories in the Cart, how to display a category in the Shop page, but we never talked about showing ALL the product’s categories in the Shop / Category / Tag / Loop pages.

On top of that, we’ll also study the wc_get_product_category_list() function again, which is a super useful shortcut to get all the categories for a given product. Enjoy!

Continue reading WooCommerce: Display Product Categories @ Shop

WooCommerce: Top Product Filter Plugins For Your Store

As your WooCommerce store grows – so do its product variants. On average, a WooCommerce store owns hundreds of inventory items and product variants for sale. 

While your goal might be to offer maximum product options to your visitors, with such a wide range of product variations – it can get challenging for your customers to find the exact product they’re looking for. 

This is where product filters come into play. Statista suggests that 61% of buyers consider the ease of finding products the most important aspect of an online shopping experience.  

No one has time to browse through the long product listings as it’s easier for customers to switch to another store that facilitates product discovery. Thus, product filter options enable your customers to browse through products of their preferences – positively impacting the user experience and increasing the chances of sales. 

This article shares the top product filter solutions for your WooCommerce store. But first, let’s learn more about their benefits and how this simple option can affect your store’s bottom line. 

Continue reading WooCommerce: Top Product Filter Plugins For Your Store

WooCommerce: Display Prices Inc + Ex Tax

The WooCommerce settings allow you to show prices including OR excluding tax. But what if we want to show both at the same time e.g. “$100 inc. tax – $89 ex. tax”?

Well, by combining the snippet below with the snippet I already coded for variable products price range, you can achieve exactly that.

Yes, in theory you could add a WooCommerce suffix via the settings, but unfortunately WooCommerce wraps such suffix in a “small” HTML tag and therefore the whole content is smaller in size, including the second price.

In this tutorial, we’ll see how to add a suffix via PHP instead, and specifically at how to add the price including tax if your store displays prices excluding tax. Enjoy!

Continue reading WooCommerce: Display Prices Inc + Ex Tax

WooCommerce: Split Shop Page By Category

Well, this is gonna be a big one for you. When you start having lots of products and lots of product categories, the shop page becomes either messy or unrepresentative, because it may show just the latest 16 products on page 1 when you have dozens of categories and a much wider range of products…

As usual, there are plugins for that – first one that comes to mind is Nested Category Layout by Skyverge – but today I wanted to see how doable it was to code it, and how many lines of PHP were required.

So, if you wish to switch the WooCommerce shop page display from “products” to “a given number of products for each parent category”, here’s the fix. Enjoy!

Continue reading WooCommerce: Split Shop Page By Category

WooCommerce: How To Flip Product Images On Hover

Product images on your WooCommerce website play a significant role in increasing clicks and conversions. In fact, research suggests that 87.6% of customers consider the product image as the key component of their shopping experience.      

Naturally, any consumer who clicks on the product card first sees and goes through the product image. After that, they check for the size availability and read the product description, customer ratings, reviews, or technical specifications. 

While installing WooCommerce will help you with the basic setup of your eCommerce store – with minimal image settings and a simple product gallery, you’ll need to look for better ways to boost your product images. 

So, considering the effective role product images play in eCommerce sales, the question is – how can you maximize their potential and deliver an excellent customer experience? 

One way to do this is through the WooCommerce image swap / flip plugins. These plugins let you add a hover effect on your product images to flip or change them. By doing this, you’ll be able to display additional variations of your products, allow customers to preview products right from the category page and keep customers in your store longer by offering them an enjoyable browsing experience.

The product image swap/flip plugins for WooCommerce help stores in several other ways. But first, let’s understand their importance and get a clear picture of their functionality. 

Continue reading WooCommerce: How To Flip Product Images On Hover

WooCommerce: Top Quick View Plugins

Imagine if your customers didn’t have to visit a separate product page every time they wanted to check out a product. They could see product details right from the page they’re on and avoid going back and forth between the store and product pages

Sounds convenient, right?

This is exactly what a quick view feature on your WooCommerce store can do. 

It allows shoppers to view product images, features, and prices from the shop page through a popup window. This way, they can see if they like the product and add it to their cart or simply close the popup and continue browsing items. 

That’s not it. By making product surfing and shopping fast and hassle-free, the quick view feature can also help you improve customer experience and increase your store sales and revenue. 

Although a pretty useful feature, WooCommerce doesn’t have any default settings to enable a quick view button in your store. 

The good news is that there are some great quick view plugins you can use to add this functionality to your shop and optimize it for sales. 

We’ve done the legwork and compiled a list of seven of the best WooCommerce quick view plugins you can use for your online store. Let’s dive in!

Continue reading WooCommerce: Top Quick View Plugins

WooCommerce: Rename “Read more” To “Out of stock” @ Shop

There is an unfortunate (IMO) add to cart button naming on the WooCommerce shop page / category pages / product loops. When an item is out of stock, the “Add to cart” (or “Select options” for a variable product type) button label will turn into “Read more”.

To be honest, that doesn’t really say much to the end customer. It’s quite confusing and doesn’t make much sense.

Today, we’ll see how to change that “Read more” label into something more comprehensible: “Out of stock”. A super easy trick. Enjoy!

Continue reading WooCommerce: Rename “Read more” To “Out of stock” @ Shop

WooCommerce: Product Category Price Range

WooCommerce variable products display a price range by default, which goes something like this: $MIN-$MAX. Now, wouldn’t it be nice, on the Shop page or Category Widget, to show the price range for each category?

Well, as usual this is a customization that can apply to certain online businesses only, so hopefully you’re one of them. Either way, this is yet another chance for you to learn PHP applied to WooCommerce. Enjoy!

Continue reading WooCommerce: Product Category Price Range

WooCommerce: Check If Product Belongs to Category / Tag

We’ve studied “conditional logic” extensively over the previous Business Bloomer posts. In today’s spin-off, I want to clarify how you can check if a given product belongs to a category, tag or custom taxonomy because this is one of the most used conditional logic scenarios.

It’s important to know that a product can be inside the “loop” (e.g. the shop page or a list of products), alternatively you may be on the single product page or have the product unique ID, or even you can check if a product category is inside the Cart. Finally, you can even run the product category check within an Order or an Order Email.

Either way, the function is always the same. You simply need to understand how to use it. Enjoy!

Continue reading WooCommerce: Check If Product Belongs to Category / Tag

WooCommerce: Hide Add to Cart If Already Purchased

We already saw how to hide add to cart for logged out users and how to find out if a user has already bought a given product – so I said why not combine the two snippets and figure out how to hide the add to cart button if a logged in customer has already purchased a product?

After that, however, I realized that the “woocommerce_is_purchasable” filter offered by the WooCommerce plugin makes the task much easier than just combining the two mini-plugins above.

So, here’s how it’s done – enjoy!

Continue reading WooCommerce: Hide Add to Cart If Already Purchased

WooCommerce: Rename “Select Options” Button @ Shop Page

The WooCommerce shop page displays variable products with a “Select Options” button by default. However, if you’re looking to change it to something else (such as “View Product“) then I’ve got a useful snippet you can put to use.

Of course you can change the text to anything you like, by simply replacing the relevant string inside the snippet below. Enjoy!

Continue reading WooCommerce: Rename “Select Options” Button @ Shop Page

WooCommerce: Products With Equal Height @ Shop Page

You know, that’s one of the biggest WooCommerce display issues. Products have images of different proportions, different title lengths, some have review stars and some don’t, making the “product grid” layout a big mess in regard to height. You’d be very familiar with the below screenshot I guess.

So, here are a few steps you can take to make the display consistent. Enjoy!

Continue reading WooCommerce: Products With Equal Height @ Shop Page

WooCommerce: Hide Category Images @ Shop

If your Appearance > Customize > WooCommerce > Product Catalog > Shop page display is set to “Show categories and products“, parent product categories will show in the “products loop” as the very first elements (see screenshot below). They really take up a lot of space and this could be annoying at times, mostly when you don’t use product category images.

Thankfully, if this makes sense to you and your customers, you can remove them easily (it’s one line of code). Also, this works really well when the number of parent product categories is proportional to the number of shop display columns (e.g. you have 6 parent categories and you have 3 products per row under Appearance > Customize > WooCommerce > Product Catalog > Shop page > “Products per row”). Enjoy!

Continue reading WooCommerce: Hide Category Images @ Shop

WooCommerce: One Product Per Row @ Shop Page

By default, WooCommerce displays 4 products per row in the shop page. This is nice for almost any ecommerce website, however in certain cases you might want to change this setting in order to show full-width products (a.k.a. one product per row).

In this post we’ll look at the alternatives you have in regard to changing this setting, and also some CSS adjustments to make the 1-product-per-row shop page look better. Enjoy!

Continue reading WooCommerce: One Product Per Row @ Shop Page

WooCommerce: Show Empty Product Categories

By default, empty WooCommerce product categories (i.e. categories which have no published products) will not display on your Shop page.

This makes a lot of sense and avoids that customers land on empty pages… BUT sometimes you might have different needs and require that users still see these categories when the shop display is set to “Show Categories”.

Thankfully there is a quick one-line fix that you can copy / paste in your functions.php to show empty categories… enjoy!

Continue reading WooCommerce: Show Empty Product Categories

WooCommerce: Hide “No products were found matching your selection”

When your WooCommerce store has no published products the shop page will not display anything. A message “No products were found matching your selection” will show instead. The same applies to empty categories or when you decide to completely hide the shop page products for some reason, especially for custom built layouts.

So, how do we hide this notice? Thankfully, and once again, one line of PHP is sufficient to achieve the result! Enjoy 🙂

Continue reading WooCommerce: Hide “No products were found matching your selection”