• Resolved math1991

    (@math1991)


    Hi,

    Can the tabs be styled into accordion so each tab has its own line and then it can be expanded to show the content?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • @math1991 the tabs that are being added by Custom Product Tabs by WooCommerce is just an extension of the Tabs already provided by WooCommerce and your theme.

    This is 100% possible but our plugin isn’t what would make those changes for you.

    If you’d like to change the actual look of your tabs you’ll have to change the styling done by your theme.

    You can also do this with another plugin. I’ve tested this plugin with my version of Custom Product Tabs and Custom Product Tabs Pro and it seems to allow you to create custom accordions like you’ve described.

    https://ww.wp.xz.cn/plugins/woo-accordions/

    Let me know if this solves your problem, or if you have any more questions.

    Cheers,

    Freddie

    Thread Starter math1991

    (@math1991)

    Thanks that’s just what I am after!

    What hook do I use in the functions.php file to add the custom tabs to sit just under the product description ?

    Regards

    Mat

    @math1991,

    You can use the same hook that we use in this plugin if you want to edit the default WooCommerce tabs. In your functions.php this is how you could edit the description tabs.

    
    /**
     * Rename product data tabs
     */
    add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
    function woo_rename_tabs( $tabs ) {
    
    	$tabs['description']['title'] = __( 'More Information' );		// Rename the description tab
    $tabs['description']['callback'] = 'woo_custom_description_tab_content';
    
    	return $tabs;
    
    }
    
    function woo_custom_description_tab_content() {
    	echo '<h2>Custom Description</h2>';
    	echo '<p>Here\'s a custom description</p>';
    }
    

    With this hook each product walks into your function with its product tabs. You can see each tab and change their order, content, or title.

    If you want to remove tabs you’d just unset them from the each product. So when your product walks into that hook we’re going to tell it to unset those tabs and move on.

    
    /**
     * Remove product data tabs
     */
    add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
    
    function woo_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;
    }
    

    If you’d like to learn more these examples and more are available in the WooCommerce documentation: https://docs.woocommerce.com/document/editing-product-data-tabs/

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Accordion Tabs’ is closed to new replies.