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

Solved
NNArt
Tourist
9 1 1

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>
 
 
 
 
0 Likes
Guleria
Shopify Partner
1255 263 346

This is an 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

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)
NNArt
Tourist
9 1 1

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

NNArt
Tourist
9 1 1

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? 

0 Likes