Hiding “opc-162536267323823” from products in cart

Option Price Calculator must create a new product variant every time a product is added to cart. This is a Shopify requirement for custom products.

If you see “opc-23492349734” or something similar in the product options of a newly added product, it is the new variant title/name that you are seeing.

See Shopify Help docs:
https://shopify.dev/api/liquid/objects#line_item-options_with_values

Option Price Calculator has a few ways of dealing with this.

Method 1: Product Properties Selector and Product Properties Selector (mobile) for Cart (DOM) add to cart method. #

Use the Cart (DOM) method DOM selectors to automatically remove these values.

Settings > Add to Cart Method > Cart (DOM)

Setting the Product Properties Selector and Product Properties Selector (mobile) field as appropriate for your template will allow the app to hide these options for you. In the image below the app would hide “Color: opc-27392739723293”.

It’s important to know you just need to select a parent element holding all the option element. The green arrow shows the selected div class which works. The Yellow arrow highlights another element that could be selected and would also work. Both elements are parents of the option elements with class “product-option”.

Finally, it’s important to note that when setting up Cart (DOM) settings, you should set them all up for your store not just the ones highlighted here.

Method 2: Custom Script – Option.name method #

The option you want to remove always has the same name for all products. Typically if none of your products have any Shopify default variant options and all custom options are in the app.

In the example below the default option name is always “Title“. This method will filter options with the name “Title” and still display other options.

Add the code in bold to your cart page, slide drawer etc. You may need to modify these lines slightly but this example should get you going.

In Shopify free themes you will find this in the following liquid files:

  • main-cart-items.liquid
  • cart-drawer.liquid

The code samples show the basic change that is required and typically the change needs to be done is multiple different places within the Shopify free themes.

{%- for option in item.options_with_values -%}
  {% unless option.name contains 'Title' %}
      <div class="product-option">
         <dt>{{ option.name }}: </dt>
         <dd>{{ option.value }}</dd>
      </div>
  {% endunless %}            
{%- endfor -%}


You may also find another variant of this code uses property.last.

{%- for property in item.properties -%}
  {%- assign property_first_char = property.first | slice: 0 -%}
  {%- if property.last != blank and property_first_char != '_' -%}
    {%- unless property.last contains "opc-" -%} 
    <div class="product-option">
    <dt>{{ property.first }}:</dt>
    <dd>
      {%- if property.last contains '/uploads/' -%}
        <a href="{{ property.last }}"
          class="link"
          target="_blank"
          aria-describedby="a11y-new-window-message"
        >
          {{ property.last | split: '/' | last }}
        </a>
      {%- else -%}
        {{ property.last }}
      {%- endif -%}
        </dd>
    </div>
    {%- endunless -%} 
  {%- endif -%}
{%- endfor -%}

Method 3: Custom Script – Option.value method #

The options you need to remove do not always have the same name across all products. Your products use Shopify variant options and not all products have the same Shopify variant options.

Add the code in bold to your cart page, slide drawer etc. You may need to modify these lines slightly but this example should get you going.

In Shopify free themes you will find this in the following liquid files:

  • main-cart-items.liquid
  • cart-drawer.liquid

The code samples show the basic change that is required and typically the change needs to be done is multiple different places within the Shopify free themes.

{%- for option in item.options_with_values -%}
  {% unless option.value contains 'opc-' %}
      <div class="product-option">
         <dt>{{ option.name }}: </dt>
         <dd>{{ option.value }}</dd>
      </div>
  {% endunless %}            
{%- endfor -%}

You may also find another variant of this code uses property.last.

{%- for property in item.properties -%}
  {%- assign property_first_char = property.first | slice: 0 -%}
  {%- if property.last != blank and property_first_char != '_' -%}
    {%- unless property.last contains "opc-" -%} 
    <div class="product-option">
    <dt>{{ property.first }}:</dt>
    <dd>
      {%- if property.last contains '/uploads/' -%}
        <a href="{{ property.last }}"
          class="link"
          target="_blank"
          aria-describedby="a11y-new-window-message"
        >
          {{ property.last | split: '/' | last }}
        </a>
      {%- else -%}
        {{ property.last }}
      {%- endif -%}
        </dd>
    </div>
    {%- endunless -%} 
  {%- endif -%}
{%- endfor -%}