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!
A North European client told me they’re really strict about billing and shipping addresses over there. Couriers usually require a separate “House Number” in order to dispatch packages within those countries.
This must be therefore placed on the checkout, BESIDE the “Address_1” field and made required. Also, it’s a good idea to make this show in the Admin Order, thank you page and notification Emails.
Continue reading WooCommerce: Add House Number Field @ Checkout
Unlike your WordPress theme, you can’t just add CSS to your style.css in order to customize the look of the WooCommerce emails.
This handy PHP snippet is therefore the only viable solution. It’s a little tricky but once you get the idea, adding CSS to Order Emails is a breeze.
Continue reading WooCommerce: Add CSS to Order Emails
WooCommerce customizers: the Visual Hook Guide is back!
Here’s a visual HTML hook guide for the WooCommerce Emails. 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.
Let me know in the comments if this resource is helpful and how. Enjoy!
Continue reading WooCommerce Visual Hook Guide: Emails
A very nice client 🙂 had a very nice challenge the other day, so I thought of “donating” this valuable snippet to all of you!
After researching the internet high and low and not finding anything simple that also worked (in particular this snippet on StackOverflow and this Gist on Github), I decided to DIY!
Here’s what I came up with – enjoy! Continue reading WooCommerce: Add Next/Previous @ Single Product Page
Let’s imagine you want to add a custom checkout field (and not an additional billing or shipping field) on the WooCommerce Checkout page. For example, it might be a customer licence number – this has got nothing to do with billing and nothing to do with shipping.
Ideally, this custom field could show above the Checkout page order notes – right after the shipping form. It will feature a label, an input field, and will be required.
So, here’s how you do it – hope it helps you understand that anything is possible with WooCommerce!
Continue reading WooCommerce: How to Add a Custom Checkout Field
Today’s challenge has been on the top of my to-write list for a while. And thanks to one of Business Bloomer’s subscribers, I finally decided to post a quick tutorial. Here’s how to align the “Product Gallery” thumbnails to the side of the main Single Product Page image, no matter the device. Continue reading WooCommerce: Display Product Gallery Vertically (Single Product Page)
In my opinion, the WooCommerce Cart table is somewhat confusing. Why isn’t the “sale price” displayed there? Well, this is a mystery!
I’m pretty confident that showing the “slashed” price would actually help your conversion rate.
So, what about 10 PHP lines in exchange for an increase in sales? Great! Here’s the snippet 🙂
Continue reading WooCommerce: Display Regular & Sale Price @ Cart Table
Today’s snippet has been widely requested by many readers, clients and WooCommerce fans. We already saw in the past how to Limit State Dropdowns to One State Only (for both Shipping & Billing) and How to Sell to one State only (Billing).
However, we never covered a much more common setting: what happens when Billing is allowed to every state but Shipping is limited?
In order to get a little help, I’ve reached out to Diego Zanella, a WooCommerce genius who is also the author of the Aelia Currency Switcher plugin for WooCommerce.
Continue reading WooCommerce: Limit Shipping to Only One State
This week’s snippet is about the Cart Page (perfect timing, as in a few days I will run a free class on “How to Customize the WooCommerce Cart Page“).
Today we’ll focus on the “You may be interested In…” section, also called the “Cross-Sells” area. If a product that is in the cart has cross-sells (Edit Product > Product Data > Linked Products), this section will appear by default. Problem is – it is pretty ugly where it is now and distracts the user from identifying the “Proceed to Checkout” button, the most important CTA (Call To Action) of the Cart page.
So, how can me move it UNDER the Cart Totals, and make the design a little cleaner? Continue reading WooCommerce: Move & Change Number of Cross-Sells @ Cart Page
If you love Ecommerce as much as I do, and are passionate about Sales Conversion Rate and reducing Shopping Cart Abandonment, today’s snippet will come in handy.
Besides, this is officially the first guest blog on Business Bloomer (have ideas? Send me your proposal here)… so let me officially introduce you to today’s author: Jamie Gill, a WordPress & WooCommerce enthusiast from Bradford, UK.
Jamie managed to code a handy snippet to display inside Cart and Checkout totals the total amount of money a customer saved (sale prices plus coupon discounts). Over the years this snippet went through several revisions, but it’s still working smoothly – enjoy!
Continue reading WooCommerce: Display Total Discount / Savings @ Cart & Checkout
Here’s a visual hook guide for Storefront Theme by WooCommerce.
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. Also, you can copy & paste in seconds and speed up your customization time.
Let me know in the comments what you think about this resource! Enjoy!
Continue reading Storefront Theme Visual Hook Guide
Hey WooCustomizers, the Visual Hook Guide is back 🙂
In this episode, I’ve created a visual HTML hook guide for the WooCommerce Account Pages (there are multiple pages such as the My Account as logged in user, My Account as logged out, etc). 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 in seconds unlike other “hook sniffer plugins” out there. Let me know in the comments what you think about this resource!
Enjoy!
Continue reading WooCommerce Visual Hook Guide: My Account Pages
An annoying thing for sellers based in Ireland (for example), is that we still don’t use post codes (they recently introduced them, but nobody’s using them). So, in today’s task, I want to show you how to disable the “REQUIRED” feature of the postcode on the checkout page.
We already saw how to completely remove the PostCode/ZIP field… but this time we wish to leave it on the checkout, and just avoid a validation error if we don’t enter anything. Continue reading WooCommerce: Disable Postcode/ZIP Validation @ Checkout
Hello WooCommerce Customizers!
Today is episode #18 of my “18 snippets in 18 days” challenge… yes, I’ve made it! In the last 18 days I’ve added a good amount of WooCommerce code tutorials and I hope you appreciate the effort!
If you haven’t shared on social media or left a comment yet, it is time to spread the word and share the WooLove right now 🙂
Today’s goal is quite atypical, but I love that. A client needed to see on the frontend, almost in real time, who bought which product and their names. The sell Yoga classes via WooCommerce and simply needed to make sure who’s on what class! Continue reading WooCommerce: Display Sales to Admin @ FrontEnd
How do you add a tracking code to the WooCommerce Thank You Page? Well, with a simple snippet (and no plugin) you can!
No matter whether you’re using Google AdWords, Facebook or other forms of marketing – the Thank You Page is such an important section of an ecommerce store and needs some TLC!
Continue reading WooCommerce: Add Tracking Code / Script @ Thank You Page
Our goal is to check if a Product with a specific Shipping Class is in the Cart, and consequently disabling a shipping rate such as Free Shipping if this is true.
This is super useful when there are multiple items in the cart and you don’t want to give free shipping for certain orders for example.
Continue reading WooCommerce: Hide Shipping Method If Shipping Class Is In The Cart
Today we take a look at the WooCommerce Checkout page and specifically at how to add a Custom Extra Fee for Non-Continental US States.
You can do the exact same thing for a non-US State, as long as customers will feel comfortable in paying extra!
Continue reading WooCommerce: Add Shipping Fee for Non-Continental States
Today we take a look at the WooCommerce Checkout page and our goal is to disallow placing an order to customers that enter a PO BOX address. I don’t remember where I got this snippet from, but either way I’m glad to share it again!
Continue reading WooCommerce: Disallow Shipping to PO BOX Address
Today we take a look at the WooCommerce Minimum Order Amount. This snippet displays an error notification on the Cart Page and an error message on the Checkout Page if the order is below a set threshold.
Of course, it’s also up to you to let customers know there is a minimum before reaching the Cart/Checkout, so this could come as a notification in the single product page, shop page or even the header if it’s a strict business requirement.
Enjoy!
Continue reading WooCommerce: Define a Minimum Order Amount
Today we take a look at the WooCommerce “Add to Cart” buttons. What if you wanted to change the “Add to Cart” text depending on the Product Category? For example, you may want to show “Buy Now” for books and “Add to Basket” for cds.
Continue reading WooCommerce: Edit “Add to Cart” Text by Product Category