WooCommerce Blog: Tips, PHP Snippets, Q&A, Plugin & Theme Reviews

WooCommerce: Edit User Field @ My Account

Each WordPress user comes with a set of pre-defined fields. These fields store essential information about each user, including the username, name, email, role, website URL, bio, etc.

User fields can be edited in two ways: by the admin, who has access to all user profiles and can edit any user data, including both default and custom fields; and by logged-in users, who can edit their own profile information.

WooCommerce users (customers) can also edit some user data from the My Account page: name, email and password (Account details tab); and also billing and shipping addresses (Addresses tab).

But what if we want to let customers set/edit their bio or their website URL, which are only editable from the WordPress edit profile page? Well, the snippet below will help you display and save data for a default user field, under the Account details tab of the My Account page. Enjoy!

WooCommerce Without Product Images

This is an edge case, however it may happen that a B2B business requires no product images and doesn’t want to use the WooCommerce image placeholder either (this shows on shop/category pages and the single product page when no featured image is added).

This interesting question was asked by a Club member in our private Slack channel, so I didn’t hesitate for a second and looked for a quick fix (2 lines of code). Enjoy!

WooCommerce: “Order Again” Button For Cancelled Status

The WooCommerce “ORDER AGAIN” button allows customers to quickly reorder items they have purchased in the past, which can be a valuable tool for both customers and store owners, offering convenience and encouraging repeat purchases.

The “ORDER AGAIN” button shows on the Thank You page after completing an order and on the individual View Order page within the customer’s My Account page, but only for completed orders.

What if we want to enable this feature for processing orders as well? Or maybe for cancelled ones? Well, let’s see how they do it!

WooCommerce: Send Cancelled Order Email to Customers As Well

As per the WooCommerce settings, “Cancelled order emails are sent to chosen recipient(s) when orders have been marked cancelled (if they were previously processing or on-hold)“.

What’s not 100% clear, however, is that this email notification goes out to admins only (and additional email addresses, if entered in the email settings). Which means, the customer receives no cancelled order notification. So, let’s change this, and let’s add the customer email address to the list of people that receives this WooCommerce email.

WooCommerce: Send Pending Order Email Automatically

The “Customer invoice / Order details” WooCommerce email notification is often used for manually sending payment requests to customers – it’s not automatically triggered like other WooCommerce emails. You can access it from the individual order screen under the “Order Actions” section.

In certain cases, however, you’d want to make it automatic. And I don’t know why it’s not like that by default. So, let’s fix it: if you create a manual order from the backend, set it as pending, add some products to it and “Save”, the email notification will trigger on its own thanks to the snippet below. Enjoy!

WooCommerce: Display Shipping Class @ Single Product Page

In certain cases, you may want to show the name of the current product’s shipping class. This is helpful especially for B2B stores, or when the shipping class name is very descriptive and helps the customer with their shopping choices.

Of all the places where we can print the shipping class, I chose the “Product Meta” section, which already shows the product SKU, Tags and Categories – this code will add another line called “Shipping class”, together with the name of the class (if any, of course). Enjoy!

WooCommerce: Hide Sale! Badge If Product Is Out Of Stock

If a product cannot be purchased because it is out of stock, why would you want to tell people that it’s on sale – only because it has a sale price?

That would probably clutter your shop and maybe get the customer to click on the wrong item just because it was standing out, only to find out they can’t purchase it!

So, let’s fix this little “design bug” in WooCommerce – let’s make sure the Sale! badge gets hidden in case the product is out of stock. Enjoy!

WooCommerce: Populate Billing & Shipping When Adding A New User @ WP Dashboard

If you do a lot of manual work such as creating WordPress users for a B2B WooCommerce site (because they can only shop if they have an account, and you’ve disabled registration on the frontend), you may want to populate some Billing and Shipping fields so that you can save some time.

For example, imagine if all customers are based in Florida, USA; you could automatically populate their billing country, billing state, shipping country and shipping state!

So, let’s see how to approach this. Enjoy!

WooCommerce: Add Shipping Rate Description @ Cart & Checkout Page

Each payment method on the WooCommerce Checkout page comes with a description right below the label. What if we could achieve something similar for the shipping rates, so that we can explain to the customer the difference between each method?

This question came up today in our private Slack channel for Woo developers, and we were able to write a quick snippet that does the trick. Here’s the complete code – enjoy!

WooCommerce: No Default Shipping @ Checkout Page

We already saw how to disable the default payment gateway in the WooCommerce Checkout page, so that users are forced to click on one of the options.

Well, we can do the exact same with the shipping methods!

In this way, customers will be forced to actually click on one of the shipping options. This is helpful when you don’t want to have a default shipping, and when your customers often “forget” to pick the correct one and ask to change it once the order has been placed.

Enjoy!

WooCommerce: No Default Payment @ Checkout Page

When you land on the WooCommerce Checkout page, one payment option (radio button) will be selected by default. this is defined based on the last payment method (logged in customer), or the payment gateway sorting (logged out customer).

Often it happens, however, that customers forget to change their payment selection, and therefore end up checking out with the wrong payment option. Which means, more admin work.

With this simple snippet, we will inject some JS in the Woo Checkout page, so that on load, all payment method radio inputs will be unchecked. Super easy!

WooCommerce: Hide Add To Cart Quantity Input Arrows

Most browsers show “up and down” arrows inside number inputs. The WooCommerce add to cart quantity is a number input also, which means this will get the arrows as well.

But especially when you have add to cart plus minus buttons, the up and down arrows become useless. So, here’s a way to hide them via custom CSS.

Enjoy!

WooCommerce: Read-only Checkout Fields

Especially for B2B sites, it’s likely that customers are managed by the store admin and are not allowed to change their billing/shipping address unless they request to update it.

But even if you’re simply curious, there is a way to turn each checkout field into read-only inputs. In this way, the saved billing and shipping address will load, and the logged in customer won’t be able to change any data before checkout.

A little note: country and state are dropdowns, and this means adding the “readonly” attribute won’t stop you from changing the selected value. However, if we turn all fields to input type “text”, this problem will go away. And this is why you find two statements in the snippet below; first we turn the field into a text input, and then we make it read-only.

Enjoy!

WooCommerce: How to Reuse Zoom/Lightbox Scripts On Non-Product Images

WooCommerce product images on the Single Product page get the default Zoom + Lightbox + Photoswipe behavior. This is super helpful when the images are super important for sales conversion, and less helpful in other cases (in fact, here’s a snippet to disable Zoom etc. from the Woo product pages).

Now, the challenge that I had on this same website was that I wanted blog readers to also enjoy the same WooCommerce zoom / lightbox features on blog post images and screenshots. So, without reinventing the wheel, I’m now loading the WooCommerce scripts on pages like this one (single post), and on image click I trigger the lightbox!

You can test the feature by clicking on the image below. Enjoy!

WooCommerce: Remove “(optional)” From Checkout Field Labels

If a WooCommerce checkout field is set to “not required“, its label will get the “(optional)” suffix. Considering the required fields get the red “*” suffix, you may want to get completely rid of the (optional) string.

Sure, you could be using CSS to hide it… but as usual this is not ideal. With CSS display:none, the string loads and then you hide it; with PHP you avoid the loading in the first place.

So, let’s see how this is done – this snippet is also running on this same website so it should definitely work!