Single Product Page Archives - Page 2 of 9

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.

WooCommerce: Get Product Parent Categories

Whenever we need to do custom WooCommerce work, remembering how to get “things” is the most time-consuming task. So, a Google search often helps us find the right and quickest solution.

For example, it’s easy to “get the current product’s categories“, but how can we get the “parent product categories” only? In today’s snippet we will see how this can be achieved in 7 lines of PHP. Enjoy!

WooCommerce: Add to Cart Quantity Suffix

On a default WooCommerce install, we add X products to cart by defining the add to cart quantity on the single product page.

But what if your shop sells spices? It’s likely that those quantities are actually pounds / kilograms / or whatever weight unit you require. And what if your WooCommerce business is entirely focused around Italian extra virgin olive oil (asking for a friend!), that you’d sell per liter?

In such custom cases, it’s nice to specify the unit beside the add to cart quantity, so that customers know how much and what they are buying. So, let’s see how to add an add to cart quantity suffix beside the quantity input field on the single product page. Enjoy!

WooCommerce: View Stock History @ Product Admin

When questions such as “How do you save the product stock inventory history?” pop up in our private Business Bloomer Club slack channel for WooCommerce developers, I can’t really do without thinking of coding it myself!

This neat customization saves the stock quantity of a simple product or a variable product variation before there is a stock change, due to a manual stock quantity edit or a customer order.

Please bear in mind that if you have hundreds of stock movements per product this may slow down your backend and/or database, so the snippet may need some sort of optimization or limitation (“last 10 movements”).

So, let’s see how it works. Enjoy!

WooCommerce: Hide Weight & Dimensions From Additional Information Tab @ Single Product

If a WooCommerce product comes with weight and/or height / length / width values, these will be displayed by default in the Single Product page, under the “Additional Information” tab.

Should you need to hide them completely from the frontend while keeping the list of attributes below them, thankfully there’s a PHP one-liner you can use. Enjoy!

Tag: Single Product Page