How can I create a table of prices for each product variations?

Online Store and Theme Development
1

I am banging my head against the wall trying to create a price list table for a item with 1 main option (size) and 2 secondary options. I do not need the add to cart option, it is just for a easy to use/print price list. Thoughts?

Basic Example

Size Color 1 Color 2
Small $1.00 $1.25
Medium $2.00 $2.25
Large $3.00 $3.25

Here is where I am currently at

<div class="product_prices_all page-width">
      <table class="tablefloat priceTable">
        <thead>
          <tr class="floathead">
            {%- for option in product.options_with_values -%}
              {% if option.position == 1 %}
                <th>{{ option.name }}</th>
              {% endif %}
              {% if option.position > 1 %}
                {%- for option_value in option.values -%}
                  <th>{{ option_value }}</th>
                {% endfor %}
              {% endif %}
            {% endfor %}
          </tr>
        </thead>
        <tbody>
              {% for option in product.options_with_values %}
              {% for option_value in option.values %}
                <tr>
                <td>{{ option_value }}</td>
                
                <td>{{ option_value.variant.price | money }}</td>
                
                <td>{{ option_value.variant.price | money }}</td>
                </tr>
              {% endfor %}
              {% endfor %}
        </tbody>
      </table>
</div>
2

Try this:

<div class="product_prices_all page-width">
  <table class="tablefloat priceTable">
    <thead>
      <tr class="floathead">
        {%- for option in product.options_with_values -%}
          {% if option.position == 1 %}
            <th>{{ option.name }}</th>
          {% else %}
            {%- for option_value in option.values -%}
              <th>{{ option_value }}</th>
            {% endfor %}
          {% endif %}
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for option in product.options_with_values %}
        {% if option.position == 1 %}
          {% for option_value in option.values %}
            <tr>
              <td>{{ option_value }}</td>
              <td>{{ option_value.variant.price | money }}</td>
              <td>{{ option_value.variant.price | money }}</td>
            </tr>
          {% endfor %}
        {% endif %}
      {% endfor %}
    </tbody>
  </table>
</div>
3

Thanks, but i’m getting the third column as a copy of the second instead

4

I figured it out. Thanks.

{% if product.options.size == 2 %}
<div class="product_prices_all page-width">
    <table class="tablefloat priceTable">
      <thead>
        <tr class="floathead">
          {%- for option in product.options_with_values -%}
            {% if option.position == 1 %}
              <th>{{ option.name }}</th>
            {% endif %}
            {% if option.position > 1 %}
              {%- for option_value in option.values -%}
                <th>{{ option_value }}</th>
              {% endfor %}
            {% endif %}
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        <tr>
          {% for variant in product.variants %}
          {% assign i = forloop.index | modulo: 2 %}
            {% if i != 0 %}
            <td>{{ variant.option1 }}</td>
            <td>
              {% if variant.price < variant.compare_at_price %}
                {{ variant.price | money }} <span style="text-decoration:line-through;">{{ variant.compare_at_price | money }}</span>
              {% else %}
              {% if variant.price != 0 %}
                {{ variant.price | money }}
              {% else %}-{% endif %}{% endif %}
            </td>
            {% endif %}
            {% if i == 0 %}
            <td>
              {% if variant.price < variant.compare_at_price %}
                {{ variant.price | money }} <span style="text-decoration:line-through;">{{ variant.compare_at_price | money }}</span>
              {% else %}
            {% if variant.price != 0 %}
              {{ variant.price | money }}
            {% else %}-{% endif %}{% endif %}
            </td>
            {% endif %}
            {% assign j = forloop.index | modulo:2 %}
            {% if j == 0 %}
              </tr><tr>
            {% endif %}
           {% endfor %}
        </tr>  
      </tbody>
    </table>
</div>
{% else %}
<div class="product_prices_all page-width">
    <table class="tablefloat priceTable">
      <thead>
        <tr class="floathead">
          <th>Size</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in product.variants %}
          
        <tr>
          <td>{{ variant.title }}</td>
          <td>
              {% if variant.price < variant.compare_at_price %}
                {{ variant.price | money }} <span style="text-decoration:line-through;">{{ variant.compare_at_price | money }}</span>
              {% else %}
            {% if variant.price != 0 %}
              {{ variant.price | money }}
            {% else %}-{% endif %}{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
</div>
{% endif %}

Here’s the code for those interested. This won’t work for more than 2 options in its current form, but we didn’t need it to.

1 Like
5

Ah, I did not event think to check the prices haha. I just wanted to get rid of showing the colors below the sizes.

Glad you figured it out though, thanks for sharing your solution!