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 about 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 🙂

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

When the long description is very short, you may want to move the whole block of “product tabs” to the right hand side of the product image – as opposed to wasting a lot of space underneath it.

So, here’s how you can remove the product tabs from their original position, and display them beside the featured image instead.

WooCommerce: Remove Additional Information Tab @ Single Product

The “Additional Information” tab on the single product page is somewhat annoying and, honestly, quite useless.

There are 2 simple methods to “hide” it or delete it completely: a CSS and a PHP solution. In the first case, you can input the code in your style.css; in the second case use your child theme’s functions.php.

However, Always remember that PHP is better than CSS: with CSS you load the element and then hide it, while with PHP you stop the element from loading. Clearly, PHP is a better way to do it!