Product Tabs Archives - Business Bloomer

WooCommerce: Add New Tab @ Single Product Page

I find it unusual that after years of sharing tutorials on Business Bloomer there is no snippet for creating a custom product tab on the single product page!

I mean, we’ve seen an example on Related Products in a Custom Tab snippet a while ago, but here I want to concentrate on the actual functionality of adding a custom tab, giving a name and a heading to it, showing it conditionally (e.g. only for a specific product category), and making sure the “scroll to tab” works when the URL contains its anchor tag.

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: Hide Specific “Additional Information” Tab Attribute @ Single Product

WooCommerce variable products display the list of attributes and their terms in the “Additional Information” tab on the single product page. For example, it will display “Color: red, yellow” and “Size: large, small” if your variable product uses those attribute terms to generate variations.

Yes, you could completely remove the “Additional Information” tab all together, but sometimes you may need to just hide a specific attribute in this table, for whatever reason. Especially when you want to avoid your customers getting confused and abandoning your website.

So, here’s the fix. Enjoy!

WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

If you’re familiar with WooCommerce variable products, variations are generated from product attribute terms (color: yellow & size: large for example). All possible attribute terms are displayed in the “Additional Information” tab of the single product page, so that the customer has an idea of all the possible product options.

However, as you can see from the screenshot below, this information is static i.e. does not change when you select a variation. It would be much more helpful if the attribute information changed from e.g. “Color: red – yellow – green” to the currently selected variation attribute term e.g. “Color: red“.

In today’s quick snippet, we’ll show just that: a combination of PHP and jQuery to make sure that “Additional Information” tab is always updated based on the selected variation. 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!

WooCommerce: “Explode” Product Tabs

If you like the Amazon single product page layout, you probably dislike the default WooCommerce single product page tabs layout. This is the section where, by default, “Description”, “Reviews”, “Additional Information” and other custom content show… as tabs below the image & short description.

Thankfully, there is a super easy way to remove such tabs and display each tab on top of each other, without hiding any content. If it’s good for your users, then I recommend you make use of this super simple snippet.

In this tutorial, you will learn about “pluggable functions”. Basically, where provided, you can simply redeclare a custom plugin (WooCommerce) function without having to use hooks or overrides. WordPress will just “listen” to your new version and not the original one any longer.

So, enjoy!

WooCommerce: Product Attachment Plugin Review

While running an eCommerce store makes the operational part of your business a lot smoother, it does not give the facilities, such as asking dozens of questions about the product, seeing it physically, etc. to your customers. This could become a disadvantage if your online shop does not render sufficient information – text and visual – about the products you are selling. So, how will you prevent this situation?

Well, we have a quick and reliable solution.

Adding the relevant and crisp information on the product page, alongside the product, should solve your concern in some cases. However, when there is a lot of detail to be specified, just do not render it all on the page. Using attachments will keep your shop user-friendly and performance-oriented.

To do so, you can install Product Attachment for WooCommerce Plugin on your store.

In this article, we are going to review this WooCommerce plugin bit by bit.

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!

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: Rename “Description” Title @ Single Product Page Tabs

For once, this is a PHP snippet I use on my own website 🙂 In here, I’ll show you how to change the “Description” H2 Heading in the description tab on the single product page. Enjoy! Continue reading WooCommerce: Rename “Description” Title @ Single Product Page Tabs

WooCommerce: Remove Product Tabs, Show Long Description

Today we take a look at the WooCommerce Single Product page and specifically at how to remove the whole Product Tabs Section, and re-add the Long Description on its own (and not inside a tab).

WooCommerce: Remove a Tab @ Single Product Page

There are ways to completely remove the WooCommerce Single Product page tabs, but in case you wish to remove only one of them, these easy snippets will teach you how to do just that.

For example, you may want to hide the “Reviews“ tab because you don’t want to enable product feedback. Or maybe you would like to hide the “Additional Information” tab, because you don’t need that information to be seen.

Either way, it’s super easy – enjoy!

WooCommerce: Move Product Tabs Under the Short Description

Mostly when the long description and additional information are short, you may want to move this block of content to the right hand side of the product image – as opposed to “waste” a lot of space underneath it. Here’s how you move the product tabs to the right!

Join 75,000+ Monthly Readers & 17,000+ Subscribers.

Become a Business Bloomer Supporter.