Woocommerce hide product description on load

5 Views

I need to hide the product description in the product page. But when the user clicks on the description tab I need to show the content. When the user clicks again, I need to hide the description. It needs to work like toogle.

But I can not complete this. Please help. For to hide description on page load I place the following script on single-product.php

Read More
$('.wc-tab').hide();

It is working. When page load it is hidden and user clicks it is show (description_tab active) automatically.

But I need to show hide every click. Please help

This is HTML structure 

<ul class="tabs wc-tabs">
                            <li class="description_tab active">
                    <a href="#tab-description">Description</a>
                </li>
</ul>

Thank you .

Post Views: 5

Related posts

2 comments

  1. Use the jQuery toggle function when you click the object that should show/hide the description.

    The toggle function will show the element if it is currently hidden, or hide the element if it is currently shown.

    $(".wc-tabs").hide(); //start by hiding element
$("button").click(function() {
  $(".wc-tabs").toggle(); //toggle between hidden/shown when you click the button
})
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me!</button>
<ul class="tabs wc-tabs">
                            <li class="description_tab active">
                    <a href="#tab-description">Description</a>
                </li>
</ul>

  2. You can hide the tab content on page load using Jquery and then you can show it when you click on tab title using Jquery.

    // Remove Empty Tabs
    add_filter( ‘woocommerce_product_tabs’, ‘yikes_woo_remove_empty_tabs’, 20, 1 );

    Here’s a function that will remove any empty tabs:

    add_filter( 'woocommerce_product_tabs', 'rf_woo_remove_empty_tabs', 20, 1 );
    function rf_woo_remove_empty_tabs( $tabs ) {

        if ( ! empty( $tabs ) ) {
            foreach ( $tabs as $title => $tab ) {
                if ( empty( $tab['content'] ) ) {
                    unset( $tabs[ $title ] );
                }
            }
        }
        return $tabs;
    }

    If you want to remove specific tabs, use the below function.

    add_filter( 'woocommerce_product_tabs', 'rf_remove_product_tabs', 98 );

function rf_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );          // Remove the description tab
    unset( $tabs['reviews'] );          // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab

    return $tabs;

}

Comments are closed.