Shop Page Archives - Business Bloomer

WooCommerce: Hide “Private” Products From The Shop Page

WooCommerce admins and store managers can set the product visibility to “Private“. This is helpful if they need to hide certain products from the public, while keeping them available for manual invoicing or other purposes.

The problem, however, is that if admins or store managers are logged in, private WooCommerce products (as well as private WordPress posts, private WordPress pages, etc.) are actually visible on the Shop, Category and product loop pages.

The “Private: ” prefix is added to the product title (see screenshot), but there is usually no need to alter the frontend with products that are not going to be added to the cart anyway!

So, let’s hide private products for WooCommerce administrators from the frontend. Enjoy!

WooCommerce: Add to Cart Form @ Shop Page

We’ve already covered a similar customization on Business Bloomer: how to display Ajax quantity selectors on the WooCommerce Shop page. The problem there was that that only works for simple products, and only when Ajax add to cart is activated via the WooCommerce settings.

Today I’d like to experiment a little, and see what happens when we include the “add to cart template” (i.e. the one you see on the WooCommerce Single Product page) under each product on the WooCommerce Shop page.

This *should* work with all product types – especially variable products – because you will see the attribute dropdown selectors in such a case, as if you were on the single product page.

I haven’t tested this with grouped, bundle, and special product types, so feel free to share your findings in the comments below. Enjoy!

WooCommerce: Capitalize All Product Names

When you deal with WooCommerce websites, you also need to look into design, readability, and accessibility. And if you have hundreds or thousands of products, you probably need to set some global rules so that you don’t need to worry about editing each product manually.

One rule could be the way product titles are displayed. Maybe you have a mix of capitalized product names (“Red Square Table”), non-capitalized ones (“White round chair”) and all caps ones (“GREEN COUCH”), and therefore you’re looking for a PHP shortcut to fix this automatically.

So, here’s a super simple solution to capitalize all product titles. Enjoy!

WooCommerce: Get 10+ New Widgets With This Elementor Add-on

Already using Elementor to build your one-of-a-kind WooCommerce website?

Great, because you can now take your powered-by-Elementor WooCommerce store to the next level with a new third-party extension.

Think of product tables, grids, and carousels; of product page widgets such as toggles, improved star ratings, sale countdowns, and add to cart plus and minus buttons.

Also, category grid and carousel views. With plenty of layout and styling options, you can create a unique look and feel for your WooCommerce store.

Developed by Consortia, a company with a track record of creating popular plugins for WooCommerce like Bulk Table Editor, Cost & Reports and Bulk Category Editor, the new Consortia Addons plugins is the perfect fit for those who want to step up their Elementor game and take advantage of new features.

WooCommerce: Search Products By SKU (Frontend)

The frontend WooCommerce product search, for some reason, doesn’t work for SKU values. If it does, then your theme developers were smart enough to include this in their code, because this is a big problem especially for B2B stores.

Today, we’ll study how to alter the product search query, as well as the wc_get_product_id_by_sku() function, which is super helpful to determine the product ID for a given SKU. Enjoy!

WooCommerce: Hide Products Based On Custom Field / ACF Value

We’ve already seen how to hide products based on IP addresses, hide products belonging to a specific category and even hide all products from the Shop page.

Today I want to publish another version of those, but this time we’ll use a custom field / ACF in our conditional logic, so that we can toggle the product visibility based on its value. Enjoy!

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!

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!

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!

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!

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!

Join 75,000+ Monthly Readers & 17,000+ Subscribers.

Become a Business Bloomer Supporter.