How to Set Description Tab Open By Default In WooCommerce

Are you looking for a way to keep the description tab open by default? You may be using accordions on the product page to display the tabs. An accordion is a neat web design technique, which allows you to display content in collapsible tabs.

Table of Contents

These tabs or accordions allow you to communicate text-heavy information in a stylish and condensed way.

This is a good way to keep your website clutter-free and interactive.

Since they are collapsible, you might want to keep the description tab open, since it is the most important tab.

WooCommerce Description Tab Open by Default

In this brief tutorial, we will show you how it is easy to keep the description tab open by default.

WooCommerce does not have a built-in solution to achieve this. This means that we have to use custom code snippets to keep the description tab open by default.

We recommend using a child theme so that your changes are not lost during an update.

If you do not know how to set up a child theme, we recommend downloading a child theme plugin.

It is also important to note that accordions are by default closed on load. This is why we want to find a custom solution to keep the description tab open by default.

You should also download the Qode plugin that allows you to add custom code snippets.

You can use your preferred code insert plugin.

Steps to Keep the Description Tab by Default

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance > Customize.
Click on the Additional CSS
Add the following CSS code:

.description-always-open {

    display: block !important;

}

Also, add the following code into the Custom JS field found in Qode Options > General > Custom Code:

// single product accordion description always opened

$j('.single-product .q_accordion_holder .title-holder.description_tab').removeClass('ui-state-default ui-corner-bottom').addClass('ui-accordion-header-active ui-state-active');

$j('.single-product .q_accordion_holder .title-holder.description_tab + .accordion_content').addClass('description-always-open');

Conclusion

That is all you need to do to keep the description tab open. By now, you should be able to keep any tab open especially if you use accordions in your WooCommerce store.

You can also use the same method on any tab on the product page.

If you encounter any problems implementing the code above, we recommend consulting a qualified WordPress developer. This will ensure that you will not break down your site.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Keep WooCommerce Description Tab Open by Default

WooCommerce Description Tab Open by Default

Steps to Keep the Description Tab by Default

Conclusion

Similar Articles

Related