How to hide variants created by Option Price Calculator.

Option Price Calculator will create variants when products are added to cart. This is a Shopify requirement.

If you are using Shopify variant options with the app, you will want to hide the Option Price Calculator variants that are created by the app from appearing on your product pages.

Here’s what it might look like if you have not hidden the OPC created variants: #

Option Price Calculator has a built in method to Automatically Hide these variants. This method will primarily work for Shopify free themes but does not work in all cases and if you are using a custom theme it will likely not work.

When the product page loads, the app will look for element on the page that are of type “input” or “option”. If the app finds these these element on the page and they contain a value starting with “opc-“, the app will automatically hide the element.

If the Automatic method is not working for you then you will need to modify your product page.


How to find the Variant Picker code that needs edited: #

  1. Edit code on your Current theme.
  1. Search for product.json
  2. Select the product.json file and take note of the value listed beside section > main > type
  1. Search for the value found in the previous step (example: main-product”). Your theme may not be the same.
  2. Open the file you just search for.
  3. Search for the liquid file {% schema %} tag.
  4. Inside the schema section, you need to find the variant picker block. Try searching for “variant” or “variant_picker”. The exact name is unknown you need to figure this out.


  1. Once you find the appropriate section that corresponds to your product page variant picker you can copy the type name and search for that in the same page. This will help you located the code that renders this section.

    From the image above we would search for “variant_picker”.

  2. The basic structure of most Shopify Product pages will be as follows. You want to locate {%- when ‘variant_picker’ -%}

    {%- case -%}
    {%- when ‘icon-with-text’ -%}
    …some code
    {%- when ‘variant_picker’ -%}
    …some code
    {%- when ‘buy_buttons’ -%}
    …some code
    {%- endcase -%}


    Now you have either found the code that needs modified or you will see a {% render %} tag:

    {%- when ‘variant_picker’ -%}
    {% render ‘product-variant-picker’, product: product, block: block, product_form_id: product_form_id %}


    If you see a {% render %} then we need to search for one more file, which will be the spot you need to edit your code.

    In this case we would want to search for product-variant-picker

Suggesting for modifying variant picker code #

The overall approach we will take is to look for variants that have a name/title starting with “opc-“. All Option Price Calculator created variant names/titles will start with “opc-” and this will allow you to target and remove them from product page variant pickers.

The code on this page might look something like this:

           <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
              {%- for option in product.options_with_values -%}
                  <fieldset class="js product-form__input">
                    <legend class="form__label">{{ option.name }}</legend>
                    {%- for value in option.values -%}
                      <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                            name="{{ option.name }}"
                            value="{{ value | escape }}"
                            form="{{ product_form_id }}"
                            {% if option.selected_value == value %}checked{% endif %}
                      >
                      <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                        {{ value }}
                      </label>
                    {%- endfor -%}
                  </fieldset>
              {%- endfor -%}
              <script type="application/json">
                {{ product.variants | json }}
              </script>
            </variant-radios>

You will want to add the following to your script:

{%- unless value contains “opc-” -%}
{%- endunless -%}

This code should wrap the code that renders the variant inputs or options.

The new block would look as follows:

  <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                      <fieldset class="js product-form__input">
                        <legend class="form__label">{{ option.name }}</legend>
                        {%- for value in option.values -%}
                          {%- unless value contains "opc-" -%}

                          <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                name="{{ option.name }}"
                                value="{{ value | escape }}"
                                form="{{ product_form_id }}"
                                {% if option.selected_value == value %}checked{% endif %}
                          >
                          <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>

                          {%- endunless -%}
                        {%- endfor -%}
                      </fieldset>
                  {%- endfor -%}
                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                </variant-radios>