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 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! Continue reading WooCommerce: Display Product Reviews @ Custom Page (Shortcode)
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! Continue reading WooCommerce: Full Width Featured Image @ Single Product Page
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! Continue reading WooCommerce: Add a Custom Download File @ My Account
Yes, you can redirect users to a custom thank you page (but please note all your ecommerce Google Analytics tracking will be skipped…). Yes, you can add content to the default thank you page, for example a Twitter “share your purchase” box. And yes, you can even “include” content from another WordPress page!
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! Continue reading WooCommerce: Include Custom WP Page @ Thank You Page
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! Continue reading WooCommerce: Automatically Complete Processing Orders
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.
Makes sense? Great – here’s how it’s done. Continue reading WooCommerce: Set Min Purchase Amount for Specific Product
We’ve already seen how to open the External Product “Buy Product” button in a new browser tab – and now it’s time to complete the full picture for External/Affiliate WooCommerce Products: how do we also link the “featured” image to the same external URL? Continue reading WooCommerce: Edit External Product Image URL
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! Continue reading WooCommerce: Hide Category & Tag @ Single Product Page
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! Continue reading WooCommerce: Add To, Cc, Bcc Order Email Recipients
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! Continue reading WooCommerce: Rename “My Account” Menu Label If Logged Out
We already saw a lot of examples e.g. hiding checkout fields if a product is virtual or hiding checkout fields if a checkbox is manually checked… but this time I want to hide a field dynamically – automatically – based on whether another checkout field is empty or no value is entered in it.
In this example, I will demonstrate how to hide the “billing phone” if “billing company” is empty or no information is entered. Of course, you also have to disable the mandatory attribute for the billing phone from the Customizer settings, otherwise checkout validation will fail. You can readapt this snippet to any other checkout field combo – just identify the IDs and change jQuery accordingly. Enjoy! Continue reading WooCommerce: Dynamically Hide / Show Checkout Field
There are many plugins that would allow you to do this in bulk or that would give you advanced features… but what if you just need to hide one product ID for users who are visiting your WooCommerce website from a specific country code?
This is also called “geolocation” – remember this won’t work unless you’ve enabled geolocation inside the WooCommerce general settings. Other than that, get your product ID, find out the target country 2-letter code, and this snippet will do the trick. Enjoy! Continue reading WooCommerce: Hide Product Based on IP Address / Geolocation
A nice way to avoid user frustration is to never let them pick a product / variation that is out of stock, only to realize later they can’t purchase it.
A variable product comes with a “select dropdown” on the single product page, from which customers can pick their favorite variation. Problem is that ONLY after selecting this they will find out about price, stock status and may be able to add to cart.
Today, we’ll completely disable (grey-out) those select dropdown options (variations) that are out of stock, so that users don’t waste time and only pick one of those that are in stock. Enjoy! Continue reading WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown
You can apply this simple jQuery snippet to any piece of WooCommerce content.
In this example we’ll see how to truncate the WooCommerce single product short description and place a “read more” link to reveal the hidden content… however you can also apply this to the long description, a custom product tab, the product gallery, and whatever can be truncated.
Enjoy! Continue reading WooCommerce: Truncate Short Description With “Read More” Toggle
You could use a popular plugin called Widget Logic, or instead you could keep it simple with a few lines of PHP. Here’s a snippet for you in case you need to conditionally hide a certain sidebar widget given a condition e.g. if you’re on the Cart page.
Of course, you can use any of the available WooCommerce conditional tags and make this more complex, but in this example we’ll keep it simple and check if we’re looking at the Cart page (thanks to the is_cart() conditional). Enjoy! Continue reading WooCommerce: Conditionally Hide Widgets
Because “split” might not be the correct term, let me explain this better.
Let’s imagine your WooCommerce cart table is sorted by A>Z (with my WooCommerce cart sorting snippet for example). If your business model and/or UX requires it, then you might need to “add a cart table row” to communicate the fact those items belong to that letter:
- Item 1 Title: “AAA”
- Item 2 Title: “ACC”
- Item 3 Title: “BDD”
- Item 4 Title: “BEE”
Once again, this might sound incomprehensible so you’d better look at the screenshot below. Enjoy! Continue reading WooCommerce: “Split” Cart Table (A>Z Headings)
This time around we’ll take a look at some SQL. As you know, WooCommerce orders (same as WooCommerce products) are stored in the WordPress database.
Instead of using complex PHP loops and conditionals, sometimes knowing a bit of database “SQL SELECT” can help. I took some inspiration (because I don’t know everything by heart) from the “wc_customer_bought_product()” WooCommerce function, which contains some SQL to check if a user has purchased a given product.
I’ve played a little with the same SQL SELECT call, and managed to return the list of user email addresses who have purchased a specific product ID. If you’re ever going to need this, enjoy! Continue reading WooCommerce: Get List of Users Who Purchased a Product ID
When you’re doing custom PHP work, this snippet will come handy. It’s a quick way to get a sublist of product IDs based on product meta criteria – in this case we’ll get a list of products that have “_downloadable” set to “yes” (which, translated in English, means they are “downloadable”).
Of course, you can edit this snippet to get any sublist of product IDs, for example in stock products, custom field value products, below/above sales number, and so on. Whatever is stored as a custom field can be used. Enjoy! Continue reading WooCommerce: Get List of Downloadable Products
We already saw how to hide Order Notes on the WooCommerce checkout page. This time around, however, our goal is to “move” them – and specifically remove them from their default position (under the shipping form) and add them back under the billing form.
As you can imagine, this is a combo snippet: (1) we remove them (and we’ll use the snippet as per the link above) and (2) we create a new billing field. Finally, (3) we also need to “save” this new field value into the original order notes custom field meta.
If this is difficult to understand don’t worry – just copy/paste the snippet into your functions.php and see magic happen. Enjoy! Continue reading WooCommerce: Move Order Notes @ Checkout