Here’s a collection of tips, snippets and articles to answer your biggest WooCommerce customization questions. You can use the search button above to refine your search, or alternatively click on one of these popular WooCommerce customization tags: Checkout page, Single product page, Cart page
You might also want to visualize the WooCommerce “hooks” in case you’re a little more familiar with coding – here’s the link to the popular “Visual Hook Guide Series“, where you can find all the WooCommerce PHP actions in a user-friendly way :)
If you wish to subscribe to our weekly WooCommerce email roundup, click here. Otherwise, enjoy the latest articles on this page!
There are times when the edit product page settings are not enough. Yes, you usually set regular and sale price via the price fields under “Product Data”; however sometimes you may have to override those prices via code, because you’re running a special promotion, you don’t want to manually change thousands of prices or maybe you need to show different values to logged in customers only.
Either way, “setting” the product price programmatically consists of two distinct operations. First, you need to change the “display” of the product price on single and loop pages; second, you actually need to set a “cart item” price, because the previous code does not really alter price values.
As usual, easier coded than said, so let’s see how it’s done. Enjoy!
You could upload 10 images, one for each color of your variable product… or you could be slightly smarter and simply upload 1 “blank” image, and then when the user selects a color trigger a background color change!
Easier to code than to explain, so let’s take a look at the screenshot below (image must be a PNG with transparent background) and the PHP snippet. This could be a time-saver, enjoy!
There are times when you don’t want customers to login and be redirected to the default “My Account” dashboard. Maybe because you have a membership site and you want them to go to a custom “Welcome” page, or maybe you wish to send them straight to their “My Account” > “Downloads” subsection.
No matter the why, for sure figuring out how to achieve a custom redirect once a user logs in from the “My Account” page is quite straightforward. The hook we’ll use is called “woocommerce_login_redirect” and allows us to trigger a safe redirect whenever a customer clicks on the LOGIN button. Enjoy!
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!
I was working on a WooCommerce project recently and I didn’t want to waste time searching through all the hidden product post meta.
Post meta are basically product custom fields that are added via the update_post_meta() WordPress function by WooCommerce itself, a custom plugin, a snippet, a theme. For example, “total_sales” is a default WooCommerce product custom field that updates every time the product is purchased. You can “get” total sales with the get_post_meta() WordPress function.
In the same way, there are dozens of default and third party product custom fields that are stored inside the WooCommerce product meta. If the product custom field “meta key” starts with an underscore (“_”), however, this won’t be visible in the “Custom Fields” section of the edit product page screen. Which is a bummer.
So, today, I’ll show you a quick trick so you can always know what the values for product meta keys are without having to mess with print_r() or error_log() in your PHP functions. In the image below, you see the final outcome. Enjoy!
There is already a widget that allows you to place a “Product Category Dropdown” in your sidebar areas. The problem is that lately, sidebars have become kinda 1990. So, what if you want to place a “Category Select Box” anywhere in your WooCommerce website, and (in this case study), exactly on the Product Category pages, so that you can switch from one category to the other?
Well, in this snippet you will learn a lot of things. For example, the wc_product_dropdown_categories() function magically displays a category dropdown, while the wc_enqueue_js() function allows you to inject jQuery (responsible to trigger the category page redirect).
This snippet will help you synchronize all your cart items’ quantities with a given product ID quantity. When you add a second product to cart, therefore, it will get the same quantity of your product ID. Also, if you update the quantity of product ID, the other cart item quantities will automatically update accordingly.
Applications are quite niche, but it’s great to learn how to programmatically set the quantity of a cart item. As usual, each snippet of this website has got something that sooner or later you may need to use. Enjoy!
A good way to inform online customers and avoid issues is showing the estimated delivery / dispatch time on the single product page, just below the “Add to Cart” button. Yes, you could do that manually by adding shipping info to each product short description, but the goal of Business Bloomer is to learn how to code that instead, so you won’t need to write things manually.
Also, this is great because if you change something in your dispatch rules, you just need to change the short PHP snippet and not all your product descriptions. It’s much more flexible this way.
Finally, in this post we’ll learn how to work with cut-off times (hour of the day) and current day of the week (pure PHP), so that we can show a “dynamic” notice based on current date. So, let’s see how it’s done!
WooCommerce generates shop, category, tag, single product breadcrumbs out of the box. Such breadcrumbs should follow your WooCommerce permalink settings. For example, I use the “Shop base with category” option under WordPress > Permalinks. In my case, by default, a product belonging to category “Uncategorized” has an URL = “https://example.com/shop/uncategorized/product-name/” and its single product page breadcrumbs follow that same rule: “Home / Shop / Uncategorized / Product Name”.
Now, what if I want to rename one of the items? What if I want to replace one of the breadcrumb items with something else? Well, WooCommerce gives us a cool filter called “woocommerce_get_breadcrumb” that we can use to edit the breadcrumb content before displaying it. In this post, we will see how to add a suffix to product categories and also how to replace the product name with the SKU value. Enjoy!
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!
WooCommerce product reviews shows by default in the “Reviews” tab in the single product page. But what if, like me, you’re using custom sales pages and need to show such reviews elsewhere – by using a shortcode?
I’ve spent some time doing this for two Business Bloomer pages, the contact page (beside the request a quote form) and the Bloomer Armada sales page (just above the pricing table), so I thought it would have been great sharing the snippet with you. Enjoy!
The standard layout for the WooCommerce single product page features the main/featured product image on the left and the title/add to cart on the right. But what if you need to turn that image into a hero one i.e. a full width featured image, and push the title and add to cart button under it?
Well, for once, we’ll take a look at a CSS-only snippet. Sometimes the easiest things are also the ones that work brilliantly. Enjoy!
If you sell no downloadable products, the Downloads section of the WooCommerce My Account page will always be empty (in this case, you should completely hide the My Account Download tab). Besides, if you do sell downloadable products but customers never purchased such items, the same will happen.
So, what if you wanted to grant at least a default download file to all your customers? Well, the “woocommerce_customer_get_downloadable_products” WooCommerce filter allows us to add files to the list (empty or non empty) of customer downloadable files. Here’s how it’s done!
Basically, in this article, you will see how to write custom content for your WooCommerce Thank You page as a separate WordPress Page, so that you can use WYSIWYG, Gutenberg or a page builder to create something unique, and then ask WooCommerce to “get it” and “include” such page inside the default order-received endpoint.
If you’re not sure what I mean, try taking a look at the two screenshots below. Then, copy the simple snippet and see the result!
If you wish to mark paid orders as “Completed” automatically (i.e. without having to manually login to the site and “check” processing orders one by one), you can use the code below.
What is more, this snippet will completely skip the “Processing” order status transition, which means no “Order Processing” email notification will trigger either. Once again, these 4 lines of code could save you millions of hours… hope this helps!
We already studied how to set min/max WooCommerce add to cart quantity programmatically. That was an easy one. This time, I want to expand on the topic, and define a “minimum order amount on a per-product basis”.
Which, translated in plain English, would be something along the lines of “set the minimum purchase amount for product XYZ to $50”. And once we do that, I expect that the add to cart quantity does non start from 1 – instead it defaults to “$50 divided by product price”. If product price is $10, I would want to set the minimum add to cart quantity to “5” on the single product and cart pages.
SKU, Category list and Tag list on the WooCommerce single product page are called “product meta”. We already saw how to hide just the SKU (while leaving Cats and Tags there), so in this “episode” we will study how to do the opposite i.e. keeping the SKU there while hiding Cats and/or Tags.
If you are a developer, you’d think there were a specific WooCommerce “filter” for this, but there is not. So, we have to first remove the whole “product meta” block and then add back the info we want (just the Cats, for example). If you’re not a dev – not to worry – just copy paste one of the snippets below in your functions.php and magic will happen. Enjoy!
The WooCommerce Email Settings allow you to add custom recipients only for New Order, Cancelled Order, Failed Order and all admin-only emails.
But what if you want to add an email recipient to a customer email e.g. the Completed Order one? For example, you need to send it to your dropshipper. Also, you might want to add a To: recipient, or instead a cleaner Cc: or safer Bcc:.
Either way, a simple snippet allows you to achieve that (and more, if you consider WooCommerce conditional logic). Enjoy!
You could install a free WordPress plugin to enable “LOGIN / LOGOUT” menu links – or you could use a super simple snippet. Once again, the less plugins you use the better, especially if you can substitute them with a few lines of code.
In this case study, I have added the “My Account” page to the navigation menu and renamed it to “ACCOUNT” in the menu settings. However, I want that label to change to “LOGIN” if the user is logged out. Enjoy!