Create Custom Tabs/Blocks (or accordion) for Product page

You are here:
Estimated reading time: 1 min

By default WooCommerce adds 3 tabs/blocks:

  • Description – which is the product description;
  • Additional informations (renamed in Rey as Specifications) – automatically filled with product attributes;
  • Reviews – product reviews.

Rey adds a custom tab/block called “Custom Information“, which can contain any content, and can be edited globally (in Customizer eg: https://d.pr/i/mQ8ZlF ) or individually per product (in product backend, Info Block tab eg: https://d.pr/i/RTs3Iz ).

For all of these tabs/blocks, please access Customizer > WooCommerce > Product page – Tabs/Blocks and you can find various options to customize, change order, or rename.

LinkAdd Custom tabs/blocks:

Please access Customizer > WooCommerce > Product page – Tabs/Blocks and scroll at the bottom where you can see the Custom tabs control that lets you add as many as you want eg: https://d.pr/i/17QlJU . You can add a default title and a priority order value.

To actually add content in this tab, navigate to a product page in the backend and open the Custom Tabs tab eg: https://d.pr/i/KgVUDV . You can change its title and its content.

LinkAdd Accordions (or as tabs layout) in product summary:

Simply access Customizer > WooCommerce > Product Page – Tabs/Blocks and scroll at the very bottom where you can choose which tab/block to move into the Product summary accordions block.

Quick video screencast here https://d.pr/v/Dq6SMz (or thos one https://d.pr/v/RVO46r to place a global section, for all products )

To control various parameters, please use this custom php snippet:

add_filter('rey/main_script_params', function( $params ){
	// control accordion animation speed (default 250ms)
	$params['acc_animation'] = 250; 
	
	// scroll to top when clicking on accordion items (default disabled)
	$params['acc_scroll_top'] = false; 
	
	// if scroll to top enabled, specify if only on mobile (default only on mobiles)
	$params['acc_scroll_top_mobile_only'] = true; 
	
	return $params;
}, 20);
Was this article helpful?
Dislike 2
Views: 3362

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!