Here is a collection of tips, snippets, customizations, plugin reviews and how-to tutorials to answer your biggest WooCommerce questions, curated by Rodolfo Melogli.
Please remember feedback is vital and that your social media shares, blog comments and WooCommerce Weekly newsletter sign ups help me understand which WooCommerce content works and which not, so that I can fine-tune my writing :)
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!
With the right approach to user experience you can make your WooCommerce website more effective at converting visitors into customers and encouraging existing users to come back to make purchases more regularly.
There are several ways to enhance UX using WooCommerce as a foundation, so here are just a few of the most impactful options available to you.
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!
As a WooCommerce development freelancer, every day I repeat many coding operations that I keep forgetting over and over again!
This means I have to search through the WooCommerce plugin files again and again and waste a lot of precious time.
We’ve already seen how to get $product and $order information from their respective objects , so this time we’ll take a look at the Cart page and answer to: “How to get ____ if I have the $cart variable/object available?“.
For example, “How can I get the cart total“? Or “How can I get the cart items“? Or maybe the cart fees, the applied coupons, the cart contents total, the total weight and so on…
Hopefully this article will help you save time as well! Your feedback via Twitter and the blog comments section is much appreciated. 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!
When a new version of the WooCommerce plugin is released, and the WordPress dashboard starts sending you notifications that it’s time to update, this question comes always to mind: “Should I update WooCommerce right now, wait a little longer, or stay on the same version unless something breaks?“
Well, updating WooCommerce is ALWAYS a big risk – potentially you can break your live website and miss out on traffic and sales. This can happen every time a significant update is released – many store owners don’t update their stores because they feel the hassle is not worth the effort.
But updating WooCommerce is definitely a good idea for the long-term. The main cause of WordPress hacking is because of out-of-date plugins and themes. And this is where staging environments come in.
A staging website is a clone of your existing live store. It’s completely separate and it doesn’t affect your live store in any way. Staging is also called “testing environment” or “sandbox”, while your live site is usually called “production environment”.
Staging gives you the benefit of 1-click-cloning in a few minutes, updating and testing WooCommerce without worrying about breaking your actual live website, and finally “pushing” the changes to the live website (a.k.a. overwriting the live environment), so the functioning is 100% guaranteed.
Running an online store often means coming up with smart ideas that can help you sell your products faster. Some of those ideas might succeed and some may fail.
There are no strategies that work all the time, for all WooCommerce websites. But there is one that is often very effective: offering store credits. The reason for its popularity can be attributed to the awesome flexibility it provides to both store owners and customers.
So, let’s find out more about store credits through this article and how you can enable them in your WooCommerce online store. But first – what are store credits?
Well, with this functionality, customers can purchase store credits (as opposed to buying products) and then they can use their credits to buy products from the store. Buyers can either use it for themselves or gift it to others. It’s an easy and effective way to convert your store visitors into buyers.
Now it’s time to figure it all out. And thankfully, there’s a plugin for that.
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 default WooCommerce shop page layout makes it difficult for wholesale buyers to purchase in bulk.
This is because wholesale stores have different requirements as compared to retail stores. For instance, wholesale products are best displayed in a one-page order form for quick wholesale ordering as opposed to a more visual, image-rich layout.
In this post, we’ll run the rule over some of the best tools available for building a great WooCommerce wholesale store.
Along the way, we’ll share some tips on how each WooCommerce wholesale plugin can help you achieve a specific goal and deliver a better user experience.
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!