WooCommerce: Show Dispatch / Est. Shipping Date @ Single Product

A good way to inform online customers and avoid issues is showing the estimated delivery / dispatch time on the single product page, just below the “Add to Cart” button. Yes, you could do that manually by adding shipping info to each product short description, but the goal of Business Bloomer is to learn how to code that instead, so you won’t need to write things manually.

Also, this is great because if you change something in your dispatch rules, you just need to change the short PHP snippet and not all your product descriptions. It’s much more flexible this way.

Finally, in this post we’ll learn how to work with cut-off times (hour of the day) and current day of the week (pure PHP), so that we can show a “dynamic” notice based on current date. So, let’s see how it’s done!

Continue reading WooCommerce: Show Dispatch / Est. Shipping Date @ Single Product

WooCommerce: Rename a Breadcrumb Item

WooCommerce generates shop, category, tag, single product breadcrumbs out of the box. Such breadcrumbs should follow your WooCommerce permalink settings. For example, I use the “Shop base with category” option under WordPress > Permalinks. In my case, by default, a product belonging to category “Uncategorized” has an URL = “https://example.com/shop/uncategorized/product-name/” and its single product page breadcrumbs follow that same rule: “Home / Shop / Uncategorized / Product Name”.

Now, what if I want to rename one of the items? What if I want to replace one of the breadcrumb items with something else? Well, WooCommerce gives us a cool filter called “woocommerce_get_breadcrumb” that we can use to edit the breadcrumb content before displaying it. In this post, we will see how to add a suffix to product categories and also how to replace the product name with the SKU value. Enjoy!

Continue reading WooCommerce: Rename a Breadcrumb Item

WooCommerce: Full Width Featured Image @ Single Product Page

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

WooCommerce: Set Min Purchase Amount for Specific Product

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

WooCommerce: Hide Category & Tag @ Single Product Page

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

WooCommerce: Truncate Short Description With “Read More” Toggle

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

How to Add Extra Product Options (Add-Ons) to WooCommerce

This is a guest post by Maarten Belmans of Studio Wombat – if you like the article, make sure to thank him in the comments!

If you use WooCommerce for your online business, you may have needed the ability to add extra options.

That functionality allows buyers to personalize their products exactly the way they want – whether they want to add their favorite pizza topping or buy a laptop with extra RAM.

When you provide those options, you optimize the customer experience on your website. But in order to provide those customization options, you’ll need a product add-on plugin.

That type of plugin makes it easy for you to create additional form fields, which in turn allows your visitors to customize the products they want to purchase.

Continue reading How to Add Extra Product Options (Add-Ons) to WooCommerce

WooCommerce: Custom Related Products

WooCommerce picks related products on the Single Product Page based on product categories and/or product tags. Related products are very important to the shopping experience, and sometimes this is not enough – what if you want to automatically show certain products based on different criteria?

So, here’s a quick snippet to e.g. get related products with the same product title of the current one. A very strange example, but you can use this as reference in case you want to get products based on different criteria.

The get_posts() function, in fact, can be customized to get products with a given stock, specific price range, same custom field value, search term, and so on.

Continue reading WooCommerce: Custom Related Products

WooCommerce: Count Product Recent Sales

We already talked about displaying the total number of sales for a given product ID, however what if you just want to calculate sales in the last week?

This is a much better option when you have a busy WooCommerce shop and want to increase your sales conversion rate.

So, here’s the snippet – paste to your functions.php and enjoy!

Continue reading WooCommerce: Count Product Recent Sales

WooCommerce: Single Product Page Redirect for Logged In Customers

If you sell one-off products like online courses, lifetime memberships or unique pieces that can only be purchased once by a given customer, maybe you’d better redirecting the logged in customer who has purchased that product to a custom URL, such as the shop page, the “my courses” page for online courses or another customer-specific section.

With this easy snippet you’ll learn how to see if a user is logged in and has purchased a given product ID and then how to do a safe PHP redirect. Enjoy!

Continue reading WooCommerce: Single Product Page Redirect for Logged In Customers

WooCommerce: Scroll To Product Tab @ Single Product Page

Depending on your theme, just creating an href link anchor to a product tab might or might not work i.e. it might not scroll to it as it’s currently closed.

Here comes a way to create href links that not only scroll to the tab, but also open it in case it’s closed (this will guarantee the anchor scroll to the tab). Also, a little jQuery “animate” will provide the smooth scroll and enhance UX. Hope you enjoy!

Continue reading WooCommerce: Scroll To Product Tab @ Single Product Page

WooCommerce: Move & Customize Upsells @ Single Product

Keeping WooCommerce upsells at the very bottom of the single product page it’s kinda boring. In my view, WooCommerce users want to know there are upsells even before they scroll down (you also might want that: upsell means more profit). Amazon does that too.

In this tutorial, we will see not only how to move them to the top, right below the Add to Cart, but also how to customize the upsells output to show just 2 columns and remove default WooCommerce “loop” elements such as the Add to Cart. Enjoy!

Continue reading WooCommerce: Move & Customize Upsells @ Single Product

WooCommerce: Checkbox to Disable Related Products Conditionally

Here’s how you can display a “checkbox” in the product edit page in order to hide the Related Products section in case this is checked. This is something you can also reuse to hide other sections in the same way – for example you might need to hide product tabs or featured image in certain cases.

I’ve coded this in 15 minutes for a client so why not sharing it with you too? Here’s the full snippet, enjoy!

Continue reading WooCommerce: Checkbox to Disable Related Products Conditionally

WooCommerce: Product Add-Ons (Without a Plugin!)

WooCommerce product add-ons are custom input fields that show on the single product page. They’re called “add-ons” as you can add a product personalization or an upsell (at a cost of course).

For example, you can display a text input to print something on the product. Or radio buttons to select different kinds of product upgrades. Or a checkbox to upsell gift wrapping.

Either way, and of course, there are plugins for that. But first, I want to give you a tutorial to code this by yourself (case study: global custom input text field and no surcharge), so that you can learn something new. Enjoy!

Continue reading WooCommerce: Product Add-Ons (Without a Plugin!)

WooCommerce: 10 Easy Snippets to Increase Your Sales

I had the pleasure to speak at WordCamp Prague 2019. I spoke about “10 PHP Snippets to Increase WooCommerce Sales” and managed to show some simple coding to the audience. Trust me – increasing your WooCommerce sales can also be done with a free, short, easy PHP snippet.

So, given that I want to share all the snippets I talked about, this is a quick recap. Copy them, test them (a must!) and then use them. And let me know if your conversion rate and/or AOV (average order value) increased!

At the bottom of the page you also find my talk slides. Enjoy:) Continue reading WooCommerce: 10 Easy Snippets to Increase Your Sales

WooCommerce: Rename Product Description Tab Label @ Single Product Page

Product tabs show on the single product page, right below the image gallery. Tab labels are “Description”, “Additional Information”, “Reviews” by default – but what if you wish to rename them into something more relevant to your users?

Here’s a simple PHP snippet you can copy/paste into your child theme’s functions.php file to immediately change the “Description” tab name – enjoy 🙂 Continue reading WooCommerce: Rename Product Description Tab Label @ Single Product Page

WooCommerce: Remove “Description” Heading @ Single Product Tabs

When you are on the single product page, and you have a non-empty product long description, a “Description” tab appears below the product images. Unfortunately, not only the tab label is “Description”, but also the tab H2 heading. This sounds and looks horrible, so here’s a way to completely remove it.

Alternatively, you can use this other snippet in order to rename it: https://businessbloomer.com/woocommerce-rename-product-description-single-product-page/ Continue reading WooCommerce: Remove “Description” Heading @ Single Product Tabs

WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

Here’s a quick snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page.

This snippet comes with a jQuery script as well, as we need to detect whether the plus or minus are clicked and consequently update the quantity input. jQuery might look difficult to many, but the beauty of this is that you don’t need to have a degree in jQuery – just copy/paste and see the magic happen.

Note: you will probably also require some additional CSS, as your theme might give a “float” to the quantity DIV while by default HTML buttons take inline-block. I’ve added some CSS valid for the Storefront theme below.

Continue reading WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

WooCommerce: Show Custom Short Description When Empty

The WooCommerce product short description is that piece of content that appears on the right hand side of the featured image above the add to cart button. This is, of course, unless you forgot to enter the short description under Product > Edit Product!

But in case you forgot to enter it, or alternatively want to display a global short description, here’s a quick PHP snippet for you. Enjoy! Continue reading WooCommerce: Show Custom Short Description When Empty