Checkmark

Thank you for your feedback

Hide the Price field

Learn how to add CSS to mask the display of the cost of your products.

Article ID: SLN18922

Note: The steps below will only work with Design Wizard-based templates. They will not work for Theme Manager-based templates.

When you use quantity pricing (e.g. 1 for $10, 2 for $18, 3 for $21.75) your pricing will appear in one line (e.g. $10 2/$18 3/$21.75). While it is not possible to disable the Price or Sale-price fields on item pages by changing a variable, you can make edits to your CSS files to hide the Price and or Sale-price fields from being displayed.

Note: This tip work best with a generic template, and shouldn't be used with a pre-designed or custom template.

  • Example store item page showing the Price field.
    Example store product (item) page showing the Price field.
  • Example store item page with the Price field not displayed. Note the price has been added to the Caption field.
    Example store product (item) page with the Price field not displayed. Note the price has been added to the Caption field.

In order to not display the field, you will need to add a few rules to the css-edits file that will instruct the browser not to display the Price or Sale-price fields.

Note: Editing CSS files other than css-edits may result in issues with your store's appearance.

Edit your CSS to hide the Price or Sale Price field

  1. Sign in to your My Services page.
  2. Click the Store link.
    The Store link is under Control Panels.
  3. Go to Store Editor.
    Click the Store Editor link in the Edit column.
  4. In the Advanced Editor toolbar, click the Contents button.
    The Contents button
  5. Click the edit icon next to css-edits.
    The css-edits edit icon.
  6. Locate the Css-text field and place the following lines into the file depending on the type of template you have (side navigation or top navigation)

    /*To hide the price field on product pages for side navigation stores*/
    #itemtype .itemform .price {display:none;}
    #itemtype .itemform .price-bold {display:none;}

    /*To hide the sale-price field on product pages for side navigation stores*/,
    #itemtype .itemform .sale-price, #itemtype .itemform .sale-price-bold {display:none;}
    #itemtype .itemform .sale-price-bold {display:none;}
    #itemtype .itemform .sale-price-bold em {display:none;}
    #itemtype .itemform .sale-price em {display:none;}

    /*To hide the price and sale-price field on product pages for top navigation stores*/,
    #bodyContent .itemContainer .regPrice, #bodyContent .itemContainer .salePrice, #bodyContent .itemContainer .priceBold{display:none;}

     
    The Css-text field
  7. Click Update. The Price and/or Sale-price fields should no longer appear on your item pages.
    The Update button
  8. Publish when ready.
    The Publish Options button