Customizing WooCommerce Checkout Fields
Author:
Rodolfo Melogli
Description:
The Importance of Customizing WooCommerce Checkout Fields
This week I’ll send you straight to a “tag” page, so that you can see all my tutorials related to “checkout fields”: https://www.businessbloomer.com/tag/checkout-fields/
The most important skill for a WooCommerce developer is being able to add, hide, edit and move checkout fields. There’s no doubt that adding a checkout field without a plugin is a must know customization.
You can either add a “custom checkout field” that has got nothing to do with billing/shipping (https://www.businessbloomer.com/woocommerce-add-custom-checkout-field-php/), or add an extra billing/shipping field (the easiest customization, e.g. https://www.businessbloomer.com/woocommerce-add-shipping-phone-checkout/). While the former requires to save, store and print the result, the latter (billing/shipping) is saved and stored by default, so you only need to print it where needed. It’s much easier.
Also, you can rename field labels (https://www.businessbloomer.com/woocommerce-rename-state-label-checkout/), edit placeholder values, or even remove fields (e.g. https://www.businessbloomer.com/woocommerce-hide-checkout-billing-fields-if-virtual-product-cart/).
You should also get familiar with WooCommerce docs: https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/#section-2
Finally, you can change the order of billing/shipping fields with https://www.businessbloomer.com/woocommerce-move-reorder-fields-checkout-page/
Either way, if you get familiar with editing checkout fields, you can void using annoying and slow plugins that do add 1000 features to WooCommerce when you usually only need one (removing 1 field, adding 1 field, moving 1 field).
Hope this helps 🙂
ICYMI WooCommerce Tutorials
WooCommerce: How to Customize Checkout For Conversions
I had the honor to speak at WCEU 2020 thanks to WooCommerce, who hosted me in their Sponsor track. It was a short and sweet lightning talk on the first day (Friday), called “Customizing The WooCommerce Checkout To Improve Conversions“, followed by a live coding session on Saturday. Here’s the video recording of the lightning talk, as well as a few PHP and CSS snippets you can copy/paste to improve your WooCommerce Checkout and immediately expect an increase in conversion rate. So, enjoy the video and then go test the snippets you find below: https://businessbloomer.com/woocommerce-how-to-customize-checkout-for-conversions/
WooCommerce B2B: How to Set Up a Wholesale Store
The ecommerce sector is seeing incredible growth, year after year, with no foreseeable end in sight. The same is true for B2B ecommerce, yet there aren’t many good platform choices available for small-to-medium businesses that want to sell wholesale. There are several SaaS solutions on the market, but these are costly, closed-source, and mostly oriented towards larger businesses. If you are a business owner or developer, WooCommerce is a solution that’s free, versatile and powerful: https://businessbloomer.com/woocommerce-b2b-wholesale-store/
WooCommerce: Show SKU @ Cart Page
When SKU matters to the end users, then displaying it in the Cart page under each item’s name is a must. Ideal for B2B businesses and international brands, this simple edit can actually help you learn how to add any sort of content under the Cart item names. Simply use the same hook and maybe try to get something different than SKU with this guide. Enjoy: https://businessbloomer.com/woocommerce-show-sku-cart-page/
WooCommerce: Calculate Subtotal On Quantity Increment @ Single Product
From a UX point of view, ecommerce customers may enjoy a little improvement on the WooCommerce single product page. As soon as they increase the add to cart quantity, it’d be nice if product price could be recalculated or maybe if a “TOTAL” line could appear so that users always know how much they are about to add to cart. Honestly, this is hard to explain it this way, so the best is if you look at the screenshot. Enjoy: https://businessbloomer.com/woocommerce-calculate-subtotal-on-quantity-increment-single-product/
WooCommerce: Set / Override Product Price Programmatically
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: https://businessbloomer.com/woocommerce-set-override-product-price-programmatically/
How to Make an Online Course Website with Elementor
Almost any blogger who wants to scale his personal brand (and revenue) is simply obliged to look at online courses. The Elementor Page Builder plugin is attractive because it does not require knowledge of the code or additional programming languages. This article is a brief tutorial on how to create an online courses website using Elementor. We will list the 5 steps required to create a WordPress website for selling online courses. Thanks to the WooCommerce plugin, you can then easily set up an online store, and use different templates to make this store attractive in terms of design. So, if you are going to make your online courses website with Elementor, where do you start? https://businessbloomer.com/how-to-make-an-online-course-website-with-elementor/
WooCommerce: Switch Image Background On Color Variation Selection
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: https://businessbloomer.com/woocommerce-switch-image-background-on-color-variation-selection/
6 WooCommerce Tips to Improve User Experience
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: https://businessbloomer.com/6-woocommerce-tips-improve-user-experience/
WooCommerce: Redirect Customer to URL Upon Login
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: https://businessbloomer.com/woocommerce-redirect-customer-to-url-upon-login/
WooCommerce: Hide Category Images @ Shop
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: https://businessbloomer.com/woocommerce-hide-category-images-shop/
WooCommerce: View Product Hidden Custom Fields (“Protected Meta”)
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: https://businessbloomer.com/woocommerce-view-product-hidden-custom-fields-protected-meta/
WooCommerce: Get Cart Info (total, items, etc) from $cart Object
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: https://businessbloomer.com/woocommerce-get-cart-info-total-items-etc-from-cart-object/
Kind:
woocommerce