Shop Page Archives - Business Bloomer

WooCommerce: Hide “View Cart” Button Upon Ajax Add to Cart

WooCommerce has a built-in AJAX functionality for adding products to the cart on archive pages (Shop page, product category pages, tag pages, etc.). Once you add a product, WooCommerce displays a “View Cart” button beside the “Add to Cart” one.

The “View Cart” button is a way to improve user experience, so that customers can quickly access their cart after adding a product. However, I’ve noticed on some client websites that this can mess up the product grid layout, confuse users and – sometimes – hurt the overall UX instead of improving it!

With the snippet below you’ll learn how to remove this button – surely you’re familiar with the CSS display:none method, so we will see a different approach here, so that the button doesn’t even load. Enjoy!

WooCommerce Without Product Images

This is an edge case, however it may happen that a B2B business requires no product images and doesn’t want to use the WooCommerce image placeholder either (this shows on shop/category pages and the single product page when no featured image is added).

This interesting question was asked by a Club member in our private Slack channel, so I didn’t hesitate for a second and looked for a quick fix (2 lines of code). Enjoy!

WooCommerce: Hide Sale! Badge If Product Is Out Of Stock

If a product cannot be purchased because it is out of stock, why would you want to tell people that it’s on sale – only because it has a sale price?

That would probably clutter your shop and maybe get the customer to click on the wrong item just because it was standing out, only to find out they can’t purchase it!

So, let’s fix this little “design bug” in WooCommerce – let’s make sure the Sale! badge gets hidden in case the product is out of stock. Enjoy!

WooCommerce: Sort By Featured Products @ Shop

The “Default sorting” dropdown sorts products by menu_order and then title on the WooCommerce Shop, Category and Tag pages.

But what if you want to place the featured products first in the list (I mean, why would anyone set products as featured if you can’t really “promote” them on the Shop page)?

In today’s case study, we will replace the “Default sorting” option with a workaround, create a new one with the same label (so that customers won’t notice it), set it as the default sorting option, and make sure it sorts by featured products first, and then by menu_order and title. Enjoy!

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!