Hide hidden box properties on your cart page
Easily hide box properties starting with "_" on your cart page using Liquid filters—no CSS or JS needed.
-
Navigate to your Shopify admin dashboard, then go to the Online Store > Themes section.
-
Click on the "Actions" dropdown menu for the active theme, then choose "Edit code."
-
Open the "cart-template.liquid" or "cart.liquid" file (it depends on your theme) located in the "sections" or "templates" folder.
-
Locate the part of the code where the line item properties are being rendered. It typically looks like this:
{% for p in item.properties %} {% unless p.last %} <div class="line-item-property"> <span class="line-item-property__name">#{{ p.first }}:</span> <span class="line-item-property__value">#{{ p.last }}</span> </div> {% endunless %}{% endfor %}
-
Modify the code to check if the property name starts with an "_". If it does, skip rendering that property:
{% for p in item.properties %} {% unless p.last %} {% assign first_char = p.first | slice: 0 %} {% unless first_char == "_" %} <div class="line-item-property"> <span class="line-item-property__name">#{{ p.first }}:</span> <span class="line-item-property__value">#{{ p.last }}</span> </div> {% endunless %} {% endunless %}{% endfor %}
In this modified code, we use the slice filter to extract the first character of the property name and store it in the first_char variable. Then, we use an unless tag to check if first_char is equal to "_". If it's not equal, the property is rendered. If it is equal, the code inside the unless block will be skipped, effectively hiding the property.
-
Save the changes. Line item properties that start with an "_" should now be hidden in the cart.
Updated over 1 year ago