The product tabs are a collection of the description, attributes, and reviews of a product.

<aside> ℹ️ Usually, styling this element takes from-to: 5-8h

</aside>

Where this element can be seen?

Product tabs can be found on the Product Page, in the tabs section.

How should this element be designed?

The product tabs should be displayed accounting for the following:

• Expanded and collapsed view
• Representation of each tab expanded with an overview of content design specifications
• Hover effects

By default, product details are just an output of the product description

<aside> ➡️ If outputting any other attributes (but description) in this element, please note it.

</aside>

The product attributes should be displayed accounting for the following:

• Product attributes may be of the following types:
  • Boolean (true or false)
  • Text
  • Select
  • Image

Design example #1

Design example #2

Design example #3

Design example #4

How to develop styles for this element?

You will have to override the ProductTabs component.

Depending on your task, you might also need to override:

• ExpandableContent - by default, the following components render their contents inside this, with the expanding button having display: none. Keep in mind, this component is used elsewhere as well, so make sure your changes don’t affect those. A good example of why you would need to change this component is, for example, to pass an extra prop.

• ProductInformation

  

• ProductAttributes

  

• ProductReviews

  

The default behavior for rendering individual tabs is to render only the selected one on desktop and render all of them on mobile, but it’s easy to render all at once on desktop too - the functionality is already implemented:

ProductTabs.component.js

renderTabs() { // Render all tabs without conditions
    return this.renderAllTabs();
}

Component hierarchy:

ProductPage → ProductTabs → ProductInformation, ProductAttributes, ProductReviews

This is an example of an overridden ProductInformation component, to change the title of the tab and to pass additional props to ExpandableContent.

ProductInformation.component.js

renderContent() {
    const { areDetailsLoaded } = this.props;

    // Change the title of the tab
    const heading = areDetailsLoaded ? __('Product Description') : '';

    return (
        <ExpandableContent
          heading={ heading }
          mix={ { block: 'ProductInformation', elem: 'Content' } }
          isArrow       // New prop
          isIconForced  // New prop
        >
            { this.renderDescription() }
        </ExpandableContent>
    );
}

The styling is usually simple:

ProductInformation.override.style.scss

.ProductInformation {
    &-Content {
        margin-block-end: 0;
    }

    &-Description {
        p,
        li,
        div,
        span {
            font-size: 14px;
            line-height: 20px;

            @include mobile {
                font-size: 12px;
                line-height: 18px;
            }
        }
    }
}

Product Attributes

Theme the ProductAttributes component.

The contents are wrapped in the ExpandableContent component, you can also change that if you need to. In this case, consider that this component is used by other components as well.

Mostly, you just need to add simple styling and possibly some extra props.

ProductAttributes.override.style.scss

.ProductAttributes {
    &-AttributeBlock {
        margin-block-start: 10px;    
    }

    &-ValueLabel, 
    &-AttributeLabel {
        @include mobile {
            font-size: 12px;
            line-height: 18px;
            padding: 10px;
        }

        &:nth-of-type(2n) { // Every second row has a different background color
            background-color: var(--color-white);
        }
    }

Implementation example #1

Implementation example #2