Shop Page Archives - Page 2 of 5

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.

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, or by installing our Mini/Plugin, 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!

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!

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.

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!

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!

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!

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!

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!

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!

WooCommerce: Products With Equal Height @ Shop Page

You know, that’s one of the biggest WooCommerce display issues.

Products may have images of different proportions, different title lengths, some have review stars and some don’t, making the “product grid” layout (product archive template) a big mess. You’d be very familiar with the below screenshot I guess.

So, here are a few options you have to make the display consistent. Enjoy!

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!

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

Tag: Shop Page