loading...

29 May 2022

Create and remove tabs in single product

Sometimes it is necessary to remove or change the order of tabs displayed on the product card or simply add a new one. Today I will show you how to remove such a tab, change the order or add your own – of course, in two ways – class and function

Remove tab in WooCommerce

Class approach

<?php


namespace Example\WooCommerce\Tabs;


class Remove
{
  public function __construct()
  {
    add_filter( 'woocommerce_product_tabs', [$this, 'removeTabs'], 98 );
  }

  /**
   * @param $tabs
   * @return array
   */
  public function removeTabs( $tabs ) : array
  {
    unset( $tabs['description'] );
    unset( $tabs['reviews'] );
    unset( $tabs['additional_information'] );

    return $tabs;
  }
}

Functional approach

<?php

/**
 * @param $tabs
 * @return array
*/
removeTabs( $tabs ) : array
{
  unset( $tabs['description'] );
  unset( $tabs['reviews'] );
  unset( $tabs['additional_information'] );

  return $tabs;
}
 
add_filter( 'woocommerce_product_tabs', [$this, 'removeTabs'], 98 );

See how easy it is to remove the default tabs in WooCommerce?

Now let’s add something new

Class approach

<?php

namespace Example\WooCommerce\Tabs;

class Sizes
{

  /**
   * Sizes constructor.
   */
  public function __construct()
  {
    add_filter( 'woocommerce_product_tabs', [$this, 'generationTab'] );
  }

  public function generationTab( $tabs ) : array
  {
    $tabs['sizes'] = array(
      'title' 	        => 'Sizes', // Title tab
      'priority' 	=> 40, // Priority tab - check out the different variants 
      'callback' 	=> [new Sizes(), 'content']
    );

    return $tabs;
  }

  public function content() : void
  {
    wc_get_template( 'single-product/tabs/sizes.php' ); // The path to the file where you define your table with sizes 
  }
}

Functional approach

<?php

function generationTab( $tabs ) : array
{
  $tabs['sizes'] = array(
    'title' 	  => 'Sizes', // Title tab
    'priority' 	  => 40, // Priority tab - check out the different variants 
    'callback' 	  => 'sizesContent'
    );

    return $tabs;
}

function sizesContent() : void
{
  wc_get_template( 'single-product/tabs/sizes.php' ); // The path to the file where you define your table with sizes 
}


add_filter( 'woocommerce_product_tabs', 'generationTab' );

The last thing we have left is to change the label or priority

Class approach

<?php

namespace Example\WooCommerce\Tabs;

class Sizes
{

  /**
   * Sizes constructor.
   */
  public function __construct()
  {
    add_filter( 'woocommerce_product_tabs', [$this, 'generationTab'] );
  }

  public function generationTab( $tabs ) : array
  {
    $tabs['sizes'] = array(
      'title' 	  => "Größe", // Change of title to German 
      'priority'  => 50, // The higher it is, the overlap will be more to the left
      'callback'  => [new Sizes(), 'content']
    );
  }

  public function content() : void
  {
    wc_get_template( 'single-product/tabs/sizes.php' ); 
  }
}

Functional approach

<?php 
// ...

function generationTab( $tabs ) : array
  {
    $tabs['sizes'] = array(
      'title' 	  => "Größe", // Change of title to German 
      'priority'  => 50, // The higher it is, the overlap will be more to the left
      'callback'  => 'sizesContent'
    );
  }

add_filter( 'woocommerce_product_tabs', 'generationTab' );

Summary

As you can see – managing tabs in WooCommerce is very simple. All you need to do is use one hook that WooCommerce provides, and that’s it. From now on, you are an expert at removing, adding or editing bookmarks. If you have any problem or any question. Write to me – I will be happy to help you

Posted in woocommerce