Move "Price" to be below the variants on Mr. Parker theme.

[NNArt]

Hi all,

I'm wondering if anyone here knows how I can move the price so that it's below the variants and above the "Add to Cart" button, instead of being right underneath the title of the product. 

Here's a product page example:

https://www.nicolenicholasart.com/collections/gallery/products/abstraction-acrylic-painting

And here's my product page liquid file:

<div id="product-{{ product.id }}">

  <div id="product-photos" class="desktop-5 tablet-half mobile-3">

    {% for image in product.images %}

    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

    {% if forloop.first %}

    <div class="bigimage desktop-10">

      <img id="{{ product.id }}" src="{{ featured_image | img_url: 'master' }}" alt='{{ image.alt }}' title="{{ product.title }}"/>

    </div>

    {% endif %}    

    <a href="{{ image | product_img_url: 'master' }}" data-image-id="{{ image.id }}" class="clicker">

      <img class="thumbnail desktop-2" src="{{ image | product_img_url: 'medium' }}" data-image-id="{{ image.id }}" alt="{{ image.alt | escape }}" />

    </a>

    {% endfor %} 

  </div>

  <script type="text/javascript">

    $(document).ready(function(){

      $('.bigimage').zoom();

      $('a.clicker').click(function() {

        var newImage = $(this).attr('href');

        $( '.bigimage img' ).attr({ src: newImage }); 

        return false;

      });

    });    

  </script>

  <div id="product-right" class="desktop-7 tablet-half mobile-3">

    <div id="product-description" class="desktop-10 tablet-6 mobile-3">

      {% if settings.vendor %}<h2>{{ product.vendor }}</h2>{% endif %}

      <h1>{{ product.title | escape }}</h1>

      <p id="product-price">

        {% if product.available %}

        {% if product.compare_at_price > product.price %}

        <span class="product-price" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="was">{{ product.compare_at_price | money }}</span>

        {% else %}

        <span class="product-price" itemprop="price">{{ product.price | money }}</span>

        {% endif %}

        {% else %}

        <span class="product-price" itemprop="price">{{ 'products.product.sold_out' | t }}</span>

        {% endif %}

      </p>  

      {% include 'product-form' %}

          <div id="credibly-app" data-id="{{product.id}}"></div>

      {{ product.description }}

      <div class="desc">

        {% include 'social' with product %}

        {% if collection %}       

        <span class="backto">

          {{ 'products.product.back_to' | t }} {{ collection.title | link_to: collection.url }}

        </span>

        {% if collection.previous_product %}

        {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}

        <span class="prev-prod">

          {{ 'products.product.previous_product_html' | t | link_to: prev_url }}

          {% endif %}

        </span>

        {% if collection.next_product %} 

        {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}

        <span class="next-prod">

          {{ 'products.product.next_product_html' | t | link_to: next_url }}

        </span>

        {% endif %}

        {% endif %}          

      </div>

    </div>

    <div id="related" class="desktop-2 tablet-6">

      {% include 'related-products' %}

    </div>

  </div>

  <div class="clear"></div>

  <div id="looked-at" class="desktop-12 mobile-half">

    {% include 'recently-viewed' %}

  </div>

</div>

[Guleria · Accepted solution]

Hello,

Edit product-form.liquid, you can find this file under snippets.

One you reach here search for class (class="add clearfix") it looks like <input type="submit" name="button" class="add clearfix" value="{{ }}">

Just above of it paste this code

      <p id="product-price">
        {% if product.available %}
        {% if product.compare_at_price > product.price %}
        <span class="product-price" itemprop="price">{{ product.price | money }}</span>&nbsp;<span class="was">{{ product.compare_at_price | money }}</span>
        {% else %}
        <span class="product-price" itemprop="price">{{ product.price | money }}</span>
        {% endif %}
        {% else %}
        <span class="product-price" itemprop="price">{{ 'products.product.sold_out' | t }}</span>
        {% endif %}
      </p>  

After save. confirm it. And now get back to your product page liquid file and remove/comment line no.  40 to 50

Thanks

[NNArt]

Thank you so much! This did it perfectly. I really appreciate your help

[NNArt]

Hi there,

 I just updated my theme and need to re-apply this to the new version. I'm assuming there's a bit of a difference when updating the new theme code, or would I still do the exact same thing as you had mentioned above?