Product pages - Show VAT prices on your product pages

WhiskyMan
New Member
3 0 0

Hi TyW,

How can I do this on the Venture theme?

Thanks in advance

0 Likes
MeretThai
Tourist
6 0 0

did you manage to find a solution for variations ?

0 Likes
Marie_A__Rosale
New Member
1 0 0

Good evening Matthew, i was wondering if you manage to find out how to display prices with and without taxes, Thank you

0 Likes
Matthew_Harper1
Excursionist
31 0 15

Hi Marie

No, I never got it working in the end for it to show some items with tax and some without tax - all my products show the with tax price, even if they don't get charged tax once they get to the checkout.

Matt

0 Likes

I couldn't find product.price in Template/product.liquid.

I am using Fashe Theme.

Am I missing something? Below is the file product.liquid in the Template folder. 

 

Click to expand...

 

 

<!--Product Details Area Start-->
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign enable_zoom = true %}
{% assign product_img_size = settings.img_size_product %}
{% include 'breadcrumb' %}
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
<!-- Product Detail -->
<div class="container bgwhite p-t-35 p-b-80">
  <div class="flex-w flex-sb">
    <div class="w-size13 p-t-30 respon5">
      <div class="wrap-slick3 flex-sb flex-w">
        <div class="wrap-slick3-dots"></div>

        <div id="product-image-carousel" class="slick3">
          {% for image in product.images %}
          <div class="item-slick3" data-thumb="{{ image.src | img_url: '90x120' }}">
            <div class="wrap-pic-w">
              <img src="{{ image.src | img_url: product_img_size }}" alt="{{ image.alt | escape }}">
            </div>
          </div>
          {% endfor %}

        </div>
      </div>
    </div>

    <div class="w-size14 p-t-30 respon5">
      <h4 class="product-detail-name m-text16 p-b-13">
        {{ product.title }}
      </h4>

      {% if product.selected_or_first_available_variant.price < product.selected_or_first_available_variant.compare_at_price %}
      <span id="comparePrice" class="m-text17a p-r-10">
        {{ product.selected_or_first_available_variant.compare_at_price | money }} 
      </span>
      <span id="productPrice" class="m-text17b">
        {{ product.selected_or_first_available_variant.price | money }} 
      </span>
      {% else %}
      <span id="productPrice" class="m-text17">
        {{ product.selected_or_first_available_variant.price  | money }} 
      </span>
      {% endif %}


      <p class="s-text8 p-t-10">
        {{ product.content | split:"[video]" | first | strip_html | truncatewords:20 }}.
      </p>

      <!--  -->
      <div class="p-t-33 p-b-60">
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="form_buy">
          <div class="form-group p-b-10"  {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}style="display:none"{% endif %}>
            <select name="id" id="productSelect" class="form-control">
              {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
              {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
              {% endif %}
              {% endfor %}
            </select>
            {% if product.available and product.variants.size > 1 %}
            {% for option in product.options %}
            {% include 'swatch' with option %}
            {% endfor %}
            {% endif %}
          </div>
          <div class="form-group">
            {% if settings.product_quantity_enable %}
            <div class="flex-r-m flex-w p-t-12">
              <div class="w-size160 flex-m flex-w">
                {% if product.available %}
                <div class="flex-w bo5 of-hidden m-r-22 m-t-10 m-b-10">
                  <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                  </button>
                  <input class="size8 m-text18 t-center num-product" type="number" id="Quantity" name="num-product" value="1">
                  <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                  </button>
                </div>
                {% endif %}
                <div class="btn-addcart-product-detail size9 trans-0-4 m-t-10 m-b-10">
                  <!-- Button -->
                    <button type="submit" name="add" id="button-cart" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4" data-loading-text="{{ 'products.product.loading' | t }}">
                    {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% endunless %}
                </button>
                </div>
              </div>
            </div>
            {% endif %}
            {% if settings.product_quantity_message %}
            <span id="variantQuantity" class="variant-quantity"></span>
            {% endif %}
          </div>
        </form>
      </div>

      <div class="p-b-45">
        {% if settings.product_vendor_enable %}
        <span class="s-text8 m-r-35">{{ 'products.product.brand' | t }}: {{ product.vendor }}</span> 
        {% endif %}
        <span class="s-text8"> 
          {{ 'products.product.tags' | t }}: 
          {% for tag in product.tags %}
          {% unless tag contains '_' %}
          <a href="/collections/all/{{ tag }}">{{ tag }}</a>
          {% unless forloop.last %}, {% endunless %}
          {% endunless %}
          {% endfor %}
        </span>
      </div>

      <!--  -->
      <div class="wrap-dropdown-content bo6 p-t-15 p-b-14 active-dropdown-content">
        <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
          {{ 'products.product.description' | t }}
          <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
          <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
        </h5>

        <div class="dropdown-content dis-none p-t-15 p-b-23">
          <p class="s-text8">
            {{ product.description | split:"[video]" | first }}
          </p>
        </div>
      </div>
      {% if settings.show_third_tab %}
      <div class="wrap-dropdown-content bo7 p-t-15 p-b-14">
        <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
          {{ settings.third_tab_title }}
          <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
          <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
        </h5>
        <div class="dropdown-content dis-none p-t-15 p-b-23">
          <p class="s-text8">
            {{ settings.third_tab_text }}
          </p>
        </div>
      </div>
      {% endif %}
      {% if settings.product_reviews_enable %}
      <div class="wrap-dropdown-content bo7 p-t-15 p-b-14">
        <h5 class="js-toggle-dropdown-content flex-sb-m cs-pointer m-text19 color0-hov trans-0-4">
          {{ 'products.product.reviews' | t }}
          <i class="down-mark fs-12 color1 fa fa-minus dis-none" aria-hidden="true"></i>
          <i class="up-mark fs-12 color1 fa fa-plus" aria-hidden="true"></i>
        </h5>

        <div class="dropdown-content dis-none p-t-15 p-b-23">
          <p class="s-text8">
            {% include 'product-review' %}
          </p>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% include 'related-products' %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

  // Pre-loading product images, to avoid a lag when a thumbnail is clicked, or
  // when a variant is selected that has a variant image.
  Shopify.Image.preload({{ product.images | json }}, '{{ product_img_size }}');

  var selectCallback = function( variant, selector ) {
    var $addToCart = $('#button-cart'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#addToCartText'),
        $featuredImage = $('#productPhotoImg');
    if (variant) {
      // Update variant image, if one is set
      // Call timber.switchImage function in shop.js
      if (variant.featured_image) {
          $('#product-image-carousel').slick( 'slickGoTo', variant.featured_image.position - 1 );
      }

      // Select a valid variant if available
      if (variant.available) {
        // We have a valid product variant, so enable the submit button
        $addToCart.removeClass('disabled').prop('disabled', false);
        $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});
        $quantityElements.show();

        // Show how many items are left, if below 10
        {% if settings.product_quantity_message %}
        if (variant.inventory_management) {
          if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
            $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).addClass('is-visible');
          } else if (variant.inventory_quantity <= 0 && variant.incoming) {
            $variantQuantity.html({{ 'products.product.will_not_ship_until' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
          } else {
            $variantQuantity.removeClass('is-visible');
          }
        }
        else {
          $variantQuantity.removeClass('is-visible');
        }
        {% endif %}

      } else {
        // Variant is sold out, disable the submit button
        $addToCart.addClass('disabled').prop('disabled', true);
        $addToCartText.html({{ 'products.product.sold_out' | t | json }});
        $variantQuantity.removeClass('is-visible');
        if (variant.incoming) {
          $variantQuantity.html({{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }}.replace('[date]', variant.next_incoming_date)).addClass('is-visible');
        }
        else {
          $variantQuantity.addClass('hide');
        }
        $quantityElements.hide();
      }

      // Regardless of stock, update the product price
      Shopify.money_format = '{{shop.money_format }}'; 

      //var customPrice = timber.formatMoney( Shopify.formatMoney(variant.price,Shopify.money_format) );
      var a11yPrice = Shopify.formatMoney(variant.price, Shopify.money_format);
      // var customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
      var customPriceFormat = ' <span class="visually-hidden">' + a11yPrice + '</span>';

      {% if settings.product_show_compare_at_price %}
      if (variant.compare_at_price > variant.price) {
        //var comparePrice = timber.formatMoney(Shopify.formatMoney(variant.compare_at_price, Shopify.money_format));

        var a11yComparePrice = Shopify.formatMoney(variant.compare_at_price, Shopify.money_format);
        //customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
        //customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
        //customPriceFormat += ' <span class="visually-hidden old-price">' + a11yComparePrice + '</span>';
        /*customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">{{ "products.general.sale_price" | t }}</span> ' + a11yPrice + '</span>';*/
      }
      {% endif %}
      $productPrice.html(customPriceFormat);

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
        // var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, '{{ shop.money_format }}') );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        //$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      }

      {% if settings.show_multiple_currencies %}
      var defaultCurrency = '{{ settings.default_currency | default: shop.currency }}';
      var shopCurrency = '{{ shop.currency }}';
      var cookieCurrency = Currency.cookie.read();
      if (cookieCurrency == null) {
        Currency.convertAll(shopCurrency, defaultCurrency);
      } else {
        Currency.convertAll(shopCurrency, cookieCurrency);
      }    
      {% endif %}

    } else {
      // The variant doesn't exist, disable submit button.
      // This may be an error or notice that a specific variant is not available.
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.html({{ 'products.product.unavailable' | t | json }});
      $variantQuantity.removeClass('is-visible');
      $quantityElements.hide();
    }
    if (variant && variant.featured_image) {
      var originalImage = $(".thumbnails img");
      var newImage = variant.featured_image;
      var element = originalImage[0];
      Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
        $(element).parents('a').attr('href', newImageSizedSrc);
        $(element).attr('src', newImageSizedSrc);
        $('.thumbnails .zoomWindowContainer div').css('background-image','url('+newImageSizedSrc+')');
      });
    }
    // BEGIN SWATCHES
    if (variant) {
      var form = $('#' + selector.domIdPrefix).closest('form');
      for (var i=0,length=variant.options.length; i<length; i++) {
        var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        if (radioButton.length) {
          radioButton.get(0).checked = true;
        }
      }
    }
    // END SWATCHES
  };

  jQuery(function($) {
    var product = {{ product | json }};
    {% if settings.product_quantity_message %}
    {% for variant in product.variants %}
    product.variants[{{ forloop.index0}}].incoming = {{ variant.incoming | default: false }};
    product.variants[{{ forloop.index0}}].next_incoming_date = {{ variant.next_incoming_date | date: format: 'month_day_year' | json }};
    {% endfor %}
    {% endif %}

    new Shopify.OptionSelectors('productSelect', {
      product: product,
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
                                         {% endif %}
                                         /* Hide selectors if we only have 1 variant and its title contains 'Default'. */
                                         {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
                                         $('.selector-wrapper').hide();
    {% else %}
    $('#variantBreak').removeClass('hr--clear');
    {% endif %}
    //$('.selector-wrapper').hide();
  }); 
</script>

 

 

 

 

 

Elisheva Stross | Solar Panel Systems
0 Likes
Pretty_AU
New Member
1 0 0

Hi,

Thanks for the guide, this worked fine.

A followup question to this would be how do we then modify the pricing on Campaign email templates for Marketing purposes?

Similar to the example, currently our shop configuration is to show prices excluding VAT. We then modified the templates to show price plus the VAT modification required, ie:

{{ product.price | times:1.XX | money }}

Now with our email campaigns, it shows the price without VAT, when you click through to the product it shows the price with VAT which is slightly confusing.

Email campaigns don't seem to be part of themes so how do i modify this?

 

Thanks,

0 Likes