Displaying price divided by 4 on landing page for variants that have installment payment options

Zachums23
Tourist
16 0 1

So I use a payment system that lets my customers divide their purchase price into 4 no interest monthly payments

 

I'm using GemPages for my landing page and I'm trying to add a little snippet to the product price wiget that replaces the variants price with that the price divided by 4.

 

I plan to put text before it so it will look like "Or with 4 payments of <variant price / 4>, NO INTEREST"

 

 

<div class="module gf_module-{{align_lg}} gf_module-{{align_lg}}-lg gf_module-{{align_md}}-md gf_module-{{align_sm}}-sm gf_module-{{align_xs}}-xs {{extraClass}}" data-pid="{{product.id}}" data-round-decimals="{{round-decimals}}" data-round-to="{{round-to}}">        {% assign current_variant = product.selected_or_first_available_variant %}

        <div class="gf_product-prices" data-oldformat="{{ shop.money_format }}" data-oldcurrency="{{ shop.currency }}">            {% assign currentPrice = current_variant.price | plus: 0 %}
            {% assign comparePrice = current_variant.compare_at_price | plus: 0 %}

            {% if '{{compare-first}}' == '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>                {% else %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>                {% endif %}


                {{ current_variant.compare_at_price | money }}
                </span>            {% endif %}

            <span class="gf_product-price money" itemprop="price" data-price>                {{ current_variant.price | money }}
            </span>            {% if '{{compare-first}}' != '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>                {% endif %}
                {% if current_variant.compare_at_price != null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>                {% endif %}
                    {{ current_variant.compare_at_price | money }}
                </span>            {% endif %}

            {% if '{{percent-discount}}' == '1' %}
                {% if comparePrice <= currentPrice or comparePrice <= 0 %}
                    {% assign comparePrice = 1 %}
                    <span class="gf_pq-discount-selector" style="display:none">                {% else %}
                    <span class="gf_pq-discount-selector">                {% endif %}
                    <span class="gf_pq-discount">                        {% assign diff = comparePrice | minus: currentPrice %}
                        {% assign comparePriceFloat = comparePrice | times: 1.0 %}
                        {% assign diff = diff | divided_by: comparePriceFloat %}
                        {% assign diff = diff | times: 100.0 %}
                        {% assign diff = diff | round %}
                        <span>{{before-percent-discount}}</span>
                        <span class="gf_pq-percent">                        {{ diff }}%
                        </span>
                        <span>{{after-percent-discount}}</span>
                    </span>
                </span>            {% endif %}
        </div>
    </div>

I've tried inserting this snippet

 

<span class="payment-plan">
<strong>or</strong>
4 monthly payments of {{ current_variant.price | plus: 0 | divided_by: 4 | money }}
</span>

 

And it sort of works, however there's two problems

 

1. My product has multiple variants and it only shows the price for the default variant, and doesn't change the price when the variant changes.

 

Ive tried adding 

 

{% assign current_variant = product.selected_or_first_available_variant %}

 

but no luck.

 

2. I would like the font to be a bit bigger

 

Anyone know whats going on here?

 

Thanks.

0 Likes
Guleria
Shopify Partner
1255 263 346

Hello,

1) It sounds good that your code works but in order to make it work for all variant to have to use JS or ajax so every variant price will update on change.

2) For fonts you have to write css
something like this and put into your active theme css or scss file

.class_name{
font-size: 26px;
}

Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Zachums23
Tourist
16 0 1

Hi thanks for the response. 

 

How would I use JS or Ajax to do this? Do you have any resources that might help?

0 Likes
Guleria
Shopify Partner
1255 263 346

No at the moment I don't have any code snippet available for this.
But you can follow you theme single product page code, there you will find how price update on change of variant (I know that code will not split price as you want  but gives you idea )
Just you have to follow that code and implement your custom code in it.

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate Click here (Its my paypal)
0 Likes
Zachums23
Tourist
16 0 1

Hmm. Would that be in product.liquid or another file?

0 Likes
Zachums23
Tourist
16 0 1

Code 1.png

0 Likes
Zachums23
Tourist
16 0 1

Okay, UPDATE. 

 

So I was googling and I found this thread:

 

https://community.shopify.com/c/Shopify-Design/Price-variant-not-updating-price-on-product-page/td-p...

 

I found this in my product-price.liquid Snippet

 

 

<span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
  {{ current_variant.price | money }}
</span>
{% if settings.show_compare_price %}
  {% if product.compare_at_price_max > product.price %}
    <span id="ComparePrice">
      {{ current_variant.compare_at_price | money }}
    </span>
  {% endif %}
  <div class="ComparePrice">
    {% if product.compare_at_price_max > product.price %}
      {% if settings.show_saved_amount %}
        <div class="you-save">
          <p id="YouSave"></p>
        </div>
      {% endif %}
    {% endif %}
  </div>
{% endif %}

 

 

So I modified my price wiget and replaced

 

 <span class="gf_product-price money" itemprop="price" data-price>
                {{ current_variant.price | money }}
            </span

with this snippet

 

 <span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | divided_by: 4 | money }}
            </span>

Here's the context:

 

<div class="module gf_module-{{align_lg}} gf_module-{{align_lg}}-lg gf_module-{{align_md}}-md gf_module-{{align_sm}}-sm gf_module-{{align_xs}}-xs {{extraClass}}" data-pid="{{product.id}}" data-round-decimals="{{round-decimals}}" data-round-to="{{round-to}}">
        {% assign current_variant = product.selected_or_first_available_variant %}

        <div class="gf_product-prices" data-oldformat="{{ shop.money_format }}" data-oldcurrency="{{ shop.currency }}">
            {% assign currentPrice = current_variant.price | plus: 0 %}
            {% assign comparePrice = current_variant.compare_at_price | plus: 0 %}

            {% if '{{compare-first}}' == '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% else %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}


                {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

           <span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | divided_by: 4 | money }}
            </span>

            {% if '{{compare-first}}' != '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% endif %}
                {% if current_variant.compare_at_price != null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}
                    {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

            {% if '{{percent-discount}}' == '1' %}
                {% if comparePrice <= currentPrice or comparePrice <= 0 %}
                    {% assign comparePrice = 1 %}
                    <span class="gf_pq-discount-selector" style="display:none">
                {% else %}
                    <span class="gf_pq-discount-selector">
                {% endif %}
                    <span class="gf_pq-discount">
                        {% assign diff = comparePrice | minus: currentPrice %}
                        {% assign comparePriceFloat = comparePrice | times: 1.0 %}
                        {% assign diff = diff | divided_by: comparePriceFloat %}
                        {% assign diff = diff | times: 100.0 %}
                        {% assign diff = diff | round %}
                        <span>{{before-percent-discount}}</span>
                        <span class="gf_pq-percent">
                        {{ diff }}%
                        </span>
                        <span>{{after-percent-discount}}</span>
                    </span>
                </span>
            {% endif %}
        </div>
    </div>

And it displays the monthly installments exactly how I want them, however I can't seem to get them to update when I change the product variant and it makes me sad :( 

 

 

 

0 Likes
Zachums23
Tourist
16 0 1

Okay, UPDATE. 

 

So I was googling and I found this thread:

 

https://community.shopify.com/c/Shopify-Design/Price-variant-not-updating-price-on-product-page/td-p...

 

I found this in my product-price.liquid Snippet

 

 

<span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
  {{ current_variant.price | money }}
</span>
{% if settings.show_compare_price %}
  {% if product.compare_at_price_max > product.price %}
    <span id="ComparePrice">
      {{ current_variant.compare_at_price | money }}
    </span>
  {% endif %}
  <div class="ComparePrice">
    {% if product.compare_at_price_max > product.price %}
      {% if settings.show_saved_amount %}
        <div class="you-save">
          <p id="YouSave"></p>
        </div>
      {% endif %}
    {% endif %}
  </div>
{% endif %}

 

 

So I modified my price wiget and replaced

 

 <span class="gf_product-price money" itemprop="price" data-price>
                {{ current_variant.price | money }}
            </span

with this snippet

 

 <span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | divided_by: 4 | money }}
            </span>

Here's the context:

 

<div class="module gf_module-{{align_lg}} gf_module-{{align_lg}}-lg gf_module-{{align_md}}-md gf_module-{{align_sm}}-sm gf_module-{{align_xs}}-xs {{extraClass}}" data-pid="{{product.id}}" data-round-decimals="{{round-decimals}}" data-round-to="{{round-to}}">
        {% assign current_variant = product.selected_or_first_available_variant %}

        <div class="gf_product-prices" data-oldformat="{{ shop.money_format }}" data-oldcurrency="{{ shop.currency }}">
            {% assign currentPrice = current_variant.price | plus: 0 %}
            {% assign comparePrice = current_variant.compare_at_price | plus: 0 %}

            {% if '{{compare-first}}' == '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% else %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}


                {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

           <span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | divided_by: 4 | money }}
            </span>

            {% if '{{compare-first}}' != '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% endif %}
                {% if current_variant.compare_at_price != null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}
                    {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

            {% if '{{percent-discount}}' == '1' %}
                {% if comparePrice <= currentPrice or comparePrice <= 0 %}
                    {% assign comparePrice = 1 %}
                    <span class="gf_pq-discount-selector" style="display:none">
                {% else %}
                    <span class="gf_pq-discount-selector">
                {% endif %}
                    <span class="gf_pq-discount">
                        {% assign diff = comparePrice | minus: currentPrice %}
                        {% assign comparePriceFloat = comparePrice | times: 1.0 %}
                        {% assign diff = diff | divided_by: comparePriceFloat %}
                        {% assign diff = diff | times: 100.0 %}
                        {% assign diff = diff | round %}
                        <span>{{before-percent-discount}}</span>
                        <span class="gf_pq-percent">
                        {{ diff }}%
                        </span>
                        <span>{{after-percent-discount}}</span>
                    </span>
                </span>
            {% endif %}
        </div>
    </div>

And it displays the monthly installments exactly how I want them, however I can't seem to get them to update when I change the product variant and it makes me sad :( 

 

 

 

0 Likes
Willianfiat
New Member
1 0 0

I have the same problem, did you found someway to fix that?

0 Likes