Single Product Page Archives - Business Bloomer

WooCommerce: Sale End Date Countdown Timer

Are you tired of the same old “Sale!” badge on your WooCommerce products? Want to create a more engaging and dynamic shopping experience for your customers?

In this blog post, we’ll guide you through a simple PHP/JS customization that replaces the static “Sale!” badge on the WooCommerce Single Product page with a captivating countdown timer. This will not only add excitement to your product page but also encourage customers to make a purchase before the sale ends.

Get ready to elevate your WooCommerce store and boost your sales with this effective customization. Enjoy!

WooCommerce: Replace “Ask a Quote” With a Product Configurator

The old process of asking for a quote on the WooCommerce Single Product page is as slow as molasses.

This is because endless emails are sent and received, as some clients fail to include important information in their quotes.

Enter the WooCommerce product configurator world. This crucial tool automates the quoting process. It’s like upgrading from a typewriter to a laptop but for your quoting game.

With a WooCommerce product configurator, you’ll wonder how you survived without it.

WooCommerce: Set Product Upsells Programmatically

Looking to boost your WooCommerce store’s average order value?

Upsells are a powerful tool, but manually entering them via the Edit Product page can be tedious.

This tutorial dives into the world of programmatic WooCommerce product upsells, empowering you to leverage code for a dynamic and data-driven upsell strategy.

In under 5 lines of PHP, we’ll guide you through the process of setting up upsells using code, unlocking greater control and personalization for a seamless customer experience that maximizes your sales potential. Enjoy!

WooCommerce: Set Default Shipping Class For All Products

Manually assigning a shipping class to each product can be tedious and time-consuming. Here’s where default product shipping classes come to the rescue!

This code tutorial will show you how to set a default shipping class for your products in WooCommerce without the need to access the “edit product” WordPress admin page to pick an option from the shipping class dropdown.

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: 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: Decrease Product ‘Total Sales’ Upon Refund

Every time an order is placed on your WooCommerce website, the purchased products’ total_sales counter increases thanks to a core function. It’s then easy to retrieve the value and maybe show the number of sales on the single product page, which is great for social proof and sales conversion rate optimization.

The big problem – and don’t ask me why this is not into core – is that if you need to refund an order (or cancel it), the total_sales counter will not reset / decrease, which is odd.

Today we’ll fix this, so that your products are always up to date with their sales counter and you can be more confident in showing the correct values. Enjoy!

WooCommerce: Product Title Shortcode

WordPress shortcodes allow you to save time. For example, on my WooCommerce product pages I found myself typing the product title at least three times: in the product name input field, ok, but also again in the product long description and in a custom product tab inside a text link.

So, while finding ways to save time and reduce errors and typos, I coded the shortcode below so that I could avoid writing the title 3 times (and they’re very long!).

How does it work? Simply use [post_title] in a WooCommerce product, WordPress page, WordPress post or custom post and this will magically turn into the current post title. Simple!

WooCommerce: Redirect Specific Category To Product Page

Especially when you have many WooCommerce product categories, it may happen some of them have a single product. Although this is a rare scenario, let’s see how easy it is to redirect customers directly to the single product page in case you don’t want them to see the category page first. Enjoy!

WooCommerce: Easily Get Cart, Checkout, Account, Product URLs

Just so you know, there is no need to hardcode WooCommerce URLs in your custom code! In fact, WooCommerce gives us helpful shortcut functions that we can reuse in our code to get cart, checkout, account and product URLs without wondering if they have been modified by the website owner e.g. example.com/cart to example.com/basket.

In this way, you can always make sure you’re getting the correct URLs without wasting time looking for page/product slugs. Enjoy!

WooCommerce: Get Draft Product URL

Now, this is a bit of a niche tutorial, but it may come useful you need to get a product permalink when it’s still a draft. As you can see from the screenshot below, this is helpful when the product URL is very long – in such a case WordPress truncates the “Permalink” string and you can’t really copy/paste.

For example, you may need the product URL for a scheduled blog post, a future newsletter, an email; in whatever case, this is a cool way to “get” the product URL and print it in the “Publish” meta box of the single product edit page. Enjoy!

WooCommerce: Move Sale Badge Beside Price @ Single Product Page

On a default theme, such as Storefront, the single product page template is laid out so that the SALE badge comes first, on its own line, then comes the product title, the product price on its own line, the short description, the product’s stock availability and the add to cart button.

As you can see from the screenshot below, there is lots of white space on the right hand side, so for my new business line (WooCommerce Mini-Plugins, you somewhat guessed it, right?) I wanted to improve the single product page layout and move the SALE badge right beside the price, so that I could achieve two objectives: save some space, and also focus the customer attention on the product price as opposed on to the badge.

So, let’s see how I did it. Enjoy!

WooCommerce: Add Content To Additional Information Tab @ Single Product Page

The Additional Information tab on the WooCommerce Single Product Page displays information about product dimensions, weight, and possible attribute terms.

There are hooks, thankfully, that can help us display additional content in there, either above or below the attributes table. Enjoy!

WooCommerce: Upsells Custom Heading & Subheading @ Single Product Page

We’ve already seen how to edit the “Related Products” title and how to add a subheading below it; this time, we’ll do the exact same but for the upsells section, which shows on the Single Product Page once an admin manually defines some “linked products” in the product settings / upsells.

Once again, we’ll take a look at a snippet to edit the title (“You may also like…“), and another one to add some HTML content below it. Enjoy!

WooCommerce: Capitalize All Product Names

When you deal with WooCommerce websites, you also need to look into design, readability, and accessibility. And if you have hundreds or thousands of products, you probably need to set some global rules so that you don’t need to worry about editing each product manually.

One rule could be the way product titles are displayed. Maybe you have a mix of capitalized product names (“Red Square Table”), non-capitalized ones (“White round chair”) and all caps ones (“GREEN COUCH”), and therefore you’re looking for a PHP shortcut to fix this automatically.

So, here’s a super simple solution to capitalize all product titles. Enjoy!

WooCommerce: Add a Third Description @ Single Product Page

There are times when the “long description” and the “short description” are not enough on the WooCommerce Single Product page. What if you need to add another HTML content section – say – at the very bottom of the page (and maybe, because of the longer page, add another add to cart button there as well)?

In this simple snippet, we will add another “WYSIWYG” text editor in the Edit Product page, and display the output at the bottom of the single product page. Enjoy!

WooCommerce: Duplicate Add to Cart Button @ Single Product Page

In case you have very long single product pages, it may be helpful to show the Add to Cart form at the bottom of the page or even inside the description tab.

Thankfully this is pretty easy and only requires one line of code. The only thing that you may want to change is the hook name, which defines the position of the button, and the priority, which defines the relative position of the element in case there are other ones “hooked” onto the same hook.

In this example, we will place the button at the very bottom of the page, below tabs, upsells and related products. Enjoy!

WooCommerce: Get 10+ New Widgets With This Elementor Add-on

Already using Elementor to build your one-of-a-kind WooCommerce website?

Great, because you can now take your powered-by-Elementor WooCommerce store to the next level with a new third-party extension.

Think of product tables, grids, and carousels; of product page widgets such as toggles, improved star ratings, sale countdowns, and add to cart plus and minus buttons.

Also, category grid and carousel views. With plenty of layout and styling options, you can create a unique look and feel for your WooCommerce store.

Developed by Consortia, a company with a track record of creating popular plugins for WooCommerce like Bulk Table Editor, Cost & Reports and Bulk Category Editor, the new Consortia Addons plugins is the perfect fit for those who want to step up their Elementor game and take advantage of new features.