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.

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”

WooCommerce: Display “NEW” Badge on Recent Products

We already have a nice “SALE” badge by default with WooCommerce (as well as the “OUT OF STOCK”) one. These show on the shop page once certain conditions are met.

Now, what if we wanted to show a “NEW” badge for products added in the last 30 days? This would certainly grab the customer attention, and also communicate the fact your shop is constantly updating with new products and content (well, good for Google too, right?).

So, how do they do it? (Sounds like one of those Discovery Channel shows…)

Well, here’s a simple snippet for you; simply copy/paste into your functions.php and magically a “NEW” badge will show (note: CSS is not provided, you’ll need to adjust it based on your current theme and custom styles). Continue reading WooCommerce: Display “NEW” Badge on Recent Products

WooCommerce: Change Product Permalinks @ Shop / Loop Pages

A BloomerArmada fan asked me a very interesting question: how can I link each product in the shop page to its own custom landing page as opposed to the default permalink?

Of course this applies when you don’t want to use the default single product page for all or some products. Clearly, you could set up a 301 redirect from the single product page to the landing page – that will help for SEO as well. But if this is temporary, or you need to still give access to the single product page later on, then a redirect is no good.

So, here’s how you can override the default permalink.

Continue reading WooCommerce: Change Product Permalinks @ Shop / Loop Pages

WooCommerce: Display “In Stock” Products First @ Shop

We’ve already seen how to add a custom “Product Sorting” option to the “Default Sorting” dropdown in the WooCommerce Shop page.

The task I was presented with, however, was to display items based on a custom “meta key”. Now, if you have no idea what a “meta key” is, don’t worry too much. For example, “_stock_status” is one of these keys, and therefore you can sort products by that key as opposed to product name, date, price, etc.

Anyway, let’s get into coding – as usual, simply copy/paste this little plugin in your functions.php and you’ll get the wanted result ๐Ÿ™‚

Continue reading WooCommerce: Display “In Stock” Products First @ Shop

WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

You would know by now ecommerce customers buy products for different reasons. Your store products might be cheaper than your competitors, maybe you offer better shipping rates, possibly you restock products more quickly than anyone else – or simply you’ve got a great product people keep buying.

One way to display your product features and benefits on the Shop page is by using “product badges”, a series of display messages that are able to communicate with the user immediately.

You’re probably already familiar with the “SALE!” badge that WooCommerce gives us by default. What if you wanted to show the exact percentage amount of that offer?

You’re also aware of the “Featured” option for WooCommerce products. Yes, they show in the “Featured” product shortcode, but what if you wanted the shop to display these special products in a different way, i.e. by using a special badge?

Well, there are millions of examples on how you could improve your products page (and single product page) by making the most of product badges. Thankfully there are snippets and plugins that can help you with that.

A little investment might mean better click-through rates and therefore higher conversion rates!

Continue reading WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

WooCommerce: Remove, Rename, Add “Sorting” Options @ Shop

We’ve seen in the past how to completely remove the “Default Sorting” dropdown that shows in the WooCommerce Shop, Category and Product Archive pages.

Sometimes, however, you might just need to remove one of the default options, rename a sorting option accordingly to your needs or even add a brand new sorting method. As usual, a few lines of PHP are sufficient to achieve anything, thanks to WooCommerce hooks and filters.

Continue reading WooCommerce: Remove, Rename, Add “Sorting” Options @ Shop

WooCommerce: Detect if Current Category Page is a Subcategory

A client of mine had to style a WooCommerce product category page but ONLY if it was a subcategory. So I decided to add a “subcategory” class to the HTML body, so that they could target this in their custom CSS.

As usual, the PHP is quite easy: I check if the current page is a product category, then if the category has “parents” and only in this case add a body class. Pretty easy! Continue reading WooCommerce: Detect if Current Category Page is a Subcategory

WooCommerce: Display YITH Wishlist Buttons @ Shop Page

This week’s snippet is about one of the most popular WooCommerce plugins on the WordPress repository: YITH WooCommerce Wishlist developed by YITHEMES.

With over 500,000+ active installations, you can probably understand why this is extremely on demand. Having a “wishlist” on your WooCommerce website is a great idea: customers can save their desired products and get back later to complete the purchase.

One of the most requested customizations of such plugin is to display the wishlist buttons on the shop (also called product archive or product loop) pages, under each product’s add to cart button. And the fix is extremely simple! Continue reading WooCommerce: Display YITH Wishlist Buttons @ Shop Page

WooCommerce: Display Height, Length, Width @ Shop Page

Another interesting snippet that could come very handy. How do we show the product dimensions (height, width, length) in the shop / category / tag / loop pages? This could be a handy trick for shops that calculate shipping rates based on volume, or when the volume is a vital piece of data customers need to know before proceeding further. Either way, enjoy!

Continue reading WooCommerce: Display Height, Length, Width @ Shop Page

WooCommerce: Display Stock Status/Quantity @ Shop Page

In this tutorial, my goal is to show the “stock quantity or status” under each product in the shop, category and archive pages.

This follows exactly the same settings as the stock display of the single product page. Go to /wp-admin/admin.php?page=wc-settings&tab=products&section=inventory to manage “Stock display format”. Enjoy!

Continue reading WooCommerce: Display Stock Status/Quantity @ Shop Page

WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can also copy/paste). If you like this guide and it is helpful to you, let me know in the comments!

Thanks to this WooCommerce Archive Visual Hooks Guide, you can now go to your template’s functions.php file and use “add_action(‘place-hook-here’,’your-PHP-function-here’);” – you can then place your custom functions exactly where you like them to be. Enjoy!

Continue reading WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

WooCommerce: Show Product Custom Field in the Category Pages

A client asked me to show a given custom field in the loop (i.e. Shop page, Category pages, Tag pages = anywhere woocommerce products are returned). Interestingly enough, she didn’t want to show the product short description (see “show product short description on the homepage only” snippet) but a custom field, so here’s how you do it! Continue reading WooCommerce: Show Product Custom Field in the Category Pages