Hiding price on the Product page without affecting totals on the track your order page

Store Design

Topic summary

Goal: Hide prices on product pages without breaking order totals on a custom “track your order” page.

Current setup: Price is hidden via HTML in currency formatting (store settings), which applies globally and causes totals to disappear on the tracking page (images show missing totals).

Recommended approach:

  • Scope price-hiding to product pages using CSS classes, not global currency formatting.
    • Add a class and rule in theme or global custom CSS: .price_hide { display: none; }
    • Apply this class only to product price elements.
  • If the tracking page is affected by a global “hide” class, override it on that page with custom CSS:
    • .hide { display: block !important; }
    • The !important flag forces visibility, counteracting a global display: none.

Notes: Using a class named “hide” to show content indicates the current setup is misconfigured and should be refactored.

Status: No resolution confirmed; user needs to implement scoped CSS or page-level overrides to restore tracking totals while keeping product prices hidden.

Summarized with AI on January 14. AI used: gpt-5.
1

Hi All,

I am trying to hide prices on my product page and at the same time show order totals on my track your page, page. This is a page that was created.

Currently price on my product page is hidden with this html code under store settings>>currency formatting.

IanIan26_0-1699001085160.png
IanIan26_0-1699001085160.png789×346 25.9 KB

However this is causing the order totals on my track your order page not to show.

IanIan26_1-1699001367003.png
IanIan26_1-1699001367003.png1160×256 13.1 KB

How can I make the price not show on the product page without it affecting the track order page

2

You either need to make a class and CSS for prices to only hide on products pages then add it to themes css or a global custom-css setting. https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

i.e.

.price_hide { display: none; }

Or for the specific page force override the global behavior issue that html css class creates in that pages templates custom-css setting.

If it’s that page allows a custom-css setting just use the following CSS:

.hide { display: block !important; }

Note how “hide” is completely contrary what the display effect is this is a general clue that things are setup badly when the code required reads nonsensically.