Skip to main content
All CollectionsAdvanced Design
Removing Attributes from Product Specifications
Removing Attributes from Product Specifications

Remove specifications you don't want to show on your product page

Ricardo Santos avatar
Written by Ricardo Santos
Updated over a week ago

Some Attributes can be removed using User Roles

A lot of fields such as SKU, Inventory, Rating, Image, Brand, Page number, Pack Size, Tax, Sell Price (and more), can be hidden using our Roles features.  To use this feature just click on our article on managing user roles here.

Hiding any Attribute in the Specification List

In addition to user roles you can choose to hide any product attribute from the specifications list on your product page with a simple javascript snippet.

How?

Each line has a dedicated CSS class to identify it.

Example: Hiding the Same Attribute on ALL Products

Step 1

TLDR; You have an animation showing all these steps below.

a) Right click over the line you wish to remove and click Inspect (screen shots taken on Google Chrome)

A panel with many tabs gets open and the element you clicked gets highlighted (in the example below it was the span Manufacturer).

Each line item is a div element identified by a class 'item' and the class you will need. 

Looking into the parent elements you will find a div element containing the class that will identify this line we want to remove. The whole line gets also highlighted in the page. See the image in the step below.

b) Copy the name of the class as shown below.
You can copy the text by double clicking over class="item attr_100748" in the elements panel.

See the whole Step 1 in this animation

attr_100748 is the css class identifying the line for Manufacturer.

Step 2

In Appearance > Theme Options add in your footer block this snippet of Javascript

<script>
$(document).ready(function(){
   $('.tech-specs .attr_100748').remove();
});
</script>

You can remove more than just one line if you wish

<script>
$(document).ready(function(){
   $('.tech-specs .attr_100748').remove();
   $('.tech-specs .attr_100720').remove();
   $('.tech-specs .attr_unspsc_code').remove();
});
</script>


Please note:
The removal of this line will only happen after the page finishes loading. A more attentive user can see it happening. If you wish to prevent this, you can hide these elements with CSS in the CSS Block:

.tech-specs .attr_100748 { display: none; }
.tech-specs .attr_100720 { display: none; }
.tech-specs .attr_unspsc_code { display: none; }

Or ideally loading this widget collapsed

You can find this option on Appearance > Layouts > Product > widget Product Specs.

Did this answer your question?