Join WooCommerce Weekly

WooCommerce Weekly #302: Dynamic Product Subtotal

[…]

It’s a hot Wednesday here in Sicily, and that seems to help out with the coronavirus pandemic. It also seems this summer will go ahead as planned (well, almost), and from mid June Italy will welcome tourists. We’ll see.

Anyway, welcome back to our WooCommerce Weekly appointment – here comes a series of WooCommerce tutorials put together by yours truly so that you can learn something new.

Stay safe!

New WooCommerce Tips

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/

Revised WooCommerce Tips

WooCommerce: Checkbox to Hide/Show Custom Checkout Field

This snippet could come really handy for several reasons. When you’ll need to do advanced customization of the checkout and its fields, hopefully you’ll thank me then. In today’s snippet, we will add a new checkbox and another new “hidden” field – then, if the checkbox is ticked, the field will show, otherwise it will disappear again: https://businessbloomer.com/woocommerce-add-checkbox-hideshow-checkout-field/

WooCommerce: Translate “You may also like…” Text

Apparently, since WooCommerce 4.1, there is now an easy way to edit the “You may also like…” WooCommerce string thanks to a brand new “PHP filter”. Kudos to Damien Carbery for reporting this new method. So, as usual, simply copy/paste the snippet below in your child theme’s functions.php and it will do what it says on the tin. Enjoy: https://businessbloomer.com/woocommerce-change-may-also-like-text/

WooCommerce: Add Content @ My Account Register / Login Page

A WooCommerce Customization client wanted to add some text above the “Login” and “Register” boxes on the My Account page. Understandably, users may need a bit of an explanation before they take action. Here’s how you do it: https://businessbloomer.com/woocommerce-show-extra-content-my-account-page/

WooCommerce: Apply Coupon Programmatically if Product @ Cart

Users can manually enter a coupon code, refresh the Cart and see their discount apply… or you can do that automatically (or “programmatically” as we say in the dark web) when a user adds a product to the WooCommerce Cart. All you’ve got to do is creating a coupon, and then a PHP function will do the whole work. Automation is the best thing in the world: https://businessbloomer.com/woocommerce-apply-coupon-programmatically-product-cart/

WooCommerce: How to Enable Catalog Mode?

One of the most common WooCommerce questions is: can I use WooCommerce to build a catalog of products (without add to cart, price… basically a product gallery)? Using WooCommerce for this case scenario is indeed very helpful – you can make the most of all the inbuilt features such as single product gallery and carousel, image zoom, product description tabs, attributes, categories, tags and related products. Basically a much better version than a standard image gallery. Another question might be: can I disable the WooCommerce add to cart / cart / checkout functionality until the time I am able to sell my products? This is another common scenario that many WooCommerce store owners require. Besides, certain products in your WooCommerce website might be for sale and others might not. In this case, you’d want to disable the add to cart functionality from specific categories or products. Finally, you might want to restrict the cart / checkout functions to logged in, registered users only. This is if you run a wholesale business for example, and wish to hide your prices to the public. Either way, when the “Add to Cart” button gets hidden, a contact form might be required – this is what I call a “Product Inquiry” form. Good news is there are snippets and plugins that can make your life easier, your admin time more efficient and your product management simpler. And today we’re taking a look at the best options: https://businessbloomer.com/woocommerce-how-to-enable-catalog-mode/

ICYMI WooCommerce Tutorials

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/

WooCommerce: Display a Product Categories Dropdown Select

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). Enjoy: https://businessbloomer.com/woocommerce-display-product-categories-select-list/

[…]