Click here to close this tab and return to the app.

How to hide Custom Fields from BigCommerce product pages

BigCommerce Custom Fields provide an easy way to store arbitrary product data in your product catalog. The problem is that by default, each custom field you add will also display on the product page for the item.

To prevent Custom Fields from appearing on product pages in BigCommerce, add the CSS below to your theme:

// Hide first custom field
dl.productView-info dt:nth-child(1) {
    display: none; visibility: hidden;
}
dl.productView-info dd:nth-child(2) {
    display: none; visibility: hidden;
}
// Hide second custom field
dl.productView-info dt:nth-child(3) {
    display: none; visibility: hidden;
}
dl.productView-info dd:nth-child(4) {
    display: none; visibility: hidden;
}
// Repeat for additional custom fields ...

The CSS code above will remove the Custom Fields from your product page.

Using Custom Fields is the preferred way to store additional product details, as opposed to using unused fields.