แสดงราคาต่อหน่วย

หมายเหตุ

การกําหนดราคาต่อหน่วยมีให้บริการเฉพาะผู้ขายที่ขายสินค้าในสหภาพยุโรป (EU) และสวิตเซอร์แลนด์เท่านั้น หากคุณขายสินค้าในสหภาพยุโรปหรือสวิตเซอร์แลนด์ แต่ธุรกิจของคุณไม่ได้อยู่ในสหภาพยุโรปหรือสวิตเซอร์แลนด์ ให้ติดต่อฝ่ายช่วยเหลือของ Shopify เพื่อให้เปิดใช้งานฟีเจอร์นี้

หากคุณขายสินค้าเป็นปริมาณหรือเป็นหน่วยการวัด คุณอาจต้องแสดงราคาต่อหน่วยสำหรับสินค้าบางรายการ เมื่อคุณป้อนราคาต่อหน่วยสำหรับสินค้าแล้ว ระบบจะแสดงราคาต่อหน่วยในหน้าสินค้า หน้าคอลเลกชัน หน้าตะกร้าสินค้า หน้าการชำระเงิน และการแจ้งเตือนการยืนยันคำสั่งซื้อ

เพิ่มราคาต่อหน่วยให้แก่สินค้าของคุณ

เดสก์ท็อป

1. ในส่วนผู้ดูแล Shopify ให้ไปที่สินค้า

2. คลิกสินค้าที่คุณต้องการแก้ไข

3. ตัวเลือกเสริม: หากสินค้าของคุณมีตัวเลือกสินค้า ให้คลิกตัวเลือกสินค้าที่ต้องการแก้ไขในส่วนตัวเลือกสินค้า

4. ในส่วนการกําหนดราคา ให้เลือก “แสดงราคาต่อหน่วยสำหรับสินค้ารายการนี้”

5. ในช่องการวัดปริมาณสินค้าทั้งหมด ให้ป้อนปริมาณทั้งหมดของสินค้า จากนั้นเลือกหน่วยการวัด

6. ตัวเลือกเสริม: หากคุณต้องการเปลี่ยนเกณฑ์การวัดพื้นฐานเริ่มต้น ในช่องเกณฑ์การวัดพื้นฐาน ให้เพิ่มเกณฑ์การวัดพื้นฐานใหม่ของคุณ จากนั้นเลือกหน่วยการวัด ตัวอย่างเช่น หากสินค้ามีน้ำหนัก 200 ก. คุณสามารถเลือกหน่วยพื้นฐาน 1 กก. ได้

7. แล้วคลิกที่บันทึก

iPhone

1. จากแอป Shopify ให้ไปที่สินค้า > สินค้าทั้งหมด
2. แตะสินค้าที่คุณต้องการแก้ไข
3. แตะที่บริเวณราคาสินค้าของคุณ
4. เลือก “แสดงราคาต่อหน่วย”
5. ในช่องการวัดปริมาณสินค้าทั้งหมด ให้ป้อนปริมาณทั้งหมดของสินค้า จากนั้นเลือกหน่วยการวัด
6. ตัวเลือกเสริม: หากคุณต้องการเปลี่ยนเกณฑ์การวัดพื้นฐานเริ่มต้น ในช่องเกณฑ์การวัดพื้นฐาน ให้เพิ่มเกณฑ์การวัดพื้นฐานใหม่ของคุณ จากนั้นเลือกหน่วยการวัด ตัวอย่างเช่น หากสินค้ามีน้ำหนัก 200 ก. คุณสามารถเลือกหน่วยพื้นฐาน 1 กก. ได้
7. แตะบันทึก

Android

1. จากแอป Shopify ให้ไปที่สินค้า > สินค้าทั้งหมด
2. แตะสินค้าที่คุณต้องการแก้ไข
3. แตะที่บริเวณราคาสินค้าของคุณ
4. เลือก “แสดงราคาต่อหน่วย”
5. ในช่องการวัดปริมาณสินค้าทั้งหมด ให้ป้อนปริมาณทั้งหมดของสินค้า จากนั้นเลือกหน่วยการวัด
6. ตัวเลือกเสริม: หากคุณต้องการเปลี่ยนเกณฑ์การวัดพื้นฐานเริ่มต้น ในช่องเกณฑ์การวัดพื้นฐาน ให้เพิ่มเกณฑ์การวัดพื้นฐานใหม่ของคุณ จากนั้นเลือกหน่วยการวัด ตัวอย่างเช่น หากสินค้ามีน้ำหนัก 200 ก. คุณสามารถเลือกหน่วยพื้นฐาน 1 กก. ได้
7. แล้วแตะที่ ✓

แสดงราคาต่อหน่วยในร้านค้าออนไลน์ของคุณ

ธีมร้านค้าออนไลน์ 2.0 ทั้งหมดมีฟีเจอร์ราคาต่อหน่วยพร้อมให้ใช้งานแล้ว ไม่ต้องใช้การใดๆ ในการแสดงราคาต่อหน่วยในร้านค้าออนไลน์ของคุณ

หากคุณมีธีมวินเทจและไม่สามารถอัปเดตเป็นเวอร์ชันที่รองรับฟีเจอร์ราคาต่อหน่วยได้ คุณสามารถปรับแต่งโค้ดธีมด้วยตนเองเพื่อแสดงราคาต่อหน่วย

แสดงราคาต่อหน่วยในธีมวินเทจ

ข้อควรระวัง

สำรองข้อมูลธีมของคุณก่อนเริ่มแก้ไขโค้ด คำแนะนำต่อไปนี้เป็นคำแนะนำขั้นสูง หากคุณต้องการความช่วยเหลือในการเพิ่มฟีเจอร์ให้กับธีมของคุณ คุณสามารถพิจารณารับความช่วยเหลือเกี่ยวกับการปรับแต่ง

ขั้นตอนสำหรับการปรับแต่งนี้จะแตกต่างกันไปขึ้นอยู่กับธีมของคุณ คลิกปุ่มสำหรับธีมของคุณก่อนทำตามคำแนะนำด้านล่าง:

Debut

ขั้นตอนสำหรับ Debut

ราคาต่อหน่วยมีให้บริการในธีม Debut สำหรับเวอร์ชัน 12.1.0 ขึ้น หากคุณไม่สามารถอัปเดตแอปของคุณเป็นเวอร์ชันล่าสุดได้ คุณสามารถเพิ่มการแก้ไขราคาต่อหน่วยไปยังธีม Debut เวอร์ชันก่อนหน้า

แก้ไขส่วนย่อยราคาสินค้าของคุณ

1. ในไดเรกทอรีส่วนย่อย ให้คลิกที่ไฟล์ product-price.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา data-price:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา price__sale:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. เพิ่มโค้ดต่อไปนี้ลงใต้แท็กปิด </div> :

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าตะกร้าสินค้า

1. ในไดเรกทอรีส่วน ให้คลิกที่ไฟล์ cart-template.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา cart__price-wrapper:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

หลังจากที่แก้ไขไฟล์แล้ว cart-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าคอลเลกชันของคุณ

1. ในไดเรกทอรีส่วน ให้คลิกที่ไฟล์ collection.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา grid-view-item__title:

{% include 'product-price' %}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{% include 'product-price', variant: nil %}

หลังจากที่แก้ไขไฟล์แล้ว collection.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขกริดบัตรสินค้าของคุณ

1. ในไดเรกทอรีส่วนย่อย ให้คลิกที่ไฟล์ product-card-grid.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา grid-view-item__title:

{% include 'product-price', variant: product %}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

หลังจากที่แก้ไขไฟล์แล้ว product-card-grid.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขรายการบัตรสินค้าของคุณ

1. ในไดเรกทอรีส่วนย่อย ให้คลิกที่ไฟล์ product-card-list.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา {% if product.available %}:

{% include 'product-price', variant: product %}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

หลังจากที่แก้ไขไฟล์แล้ว product-card-list.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าคำสั่งซื้อของคุณ

1. ในไดเรกทอรีเทมเพลต ให้คลิกที่ไฟล์ customers/order.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา data-label="{{ 'customer.order.price' | t }}":

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

หลังจากที่แก้ไขไฟล์แล้ว customers/order.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสไตล์ธีมของคุณ

1. ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ไฟล์ theme.scss.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา .price__vendor {:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 2:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

หลังจากที่แก้ไขไฟล์แล้ว theme.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขโค้ดธีม javascript ของคุณ

1. ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ไฟล์ theme.js

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

salePrice: '[data-sale-price]'

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านบนของรหัสจากขั้นตอนที่ 2:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

productOnSale: 'price--on-sale',

1. เพิ่มส่วนย่อยต่อไปนี้หลังโค้ดจากขั้นตอนที่ 4:

productUnitAvailable: 'price--unit-available',

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

var salePrice = '';

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 8:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

.replace('[$]', salePrice)

1. เพิ่มส่วนย่อยดังต่อไปนี้ใต้โค้ดจากขั้นตอนที่ 10:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

_updatePrice: function(evt) {

1. เพิ่มส่วนย่อยต่อไปนี้หน้าโค้ดจากขั้นตอนที่ 12:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. เพิ่มส่วนย่อยดังต่อไปนี้ใต้โค้ดจากขั้นตอนที่ 14:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

.removeClass(this.classes.productOnSale)

1. เพิ่มส่วนย่อยดังต่อไปนี้ใต้โค้ดจากขั้นตอนที่ 16:

.removeClass(this.classes.productUnitAvailable)

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. เพิ่มส่วนย่อยดังต่อไปนี้ใต้โค้ดจากขั้นตอนที่ 18:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขคำแปลภาษาอังกฤษของคุณ

1. ในไดเรกทอรีตำแหน่งที่ตั้ง ให้คลิกที่ไฟล์ en.default.json

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

"selection_help": "press the space key then arrow keys to make a selection"

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านบนของรหัสจากขั้นตอนที่ 2:

"unit_price_separator": "per",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

"include_taxes": "Tax included.",

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 4:

"unit_price_label": "Unit price",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเลย์เอาต์ธีมของคุณ

1. ในไดเรกทอรีเลย์เอาต์ ให้คลิกที่ไฟล์ theme.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

หลังจากที่แก้ไขไฟล์แล้ว theme.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

(ไม่บังคับ) เพิ่มคำแปลภาษาอื่นๆ

1. ไปที่หน้าธีมในส่วนผู้ดูแล Shopify

2. คลิกปุ่ม "..." > "แก้ไขเนื้อหาธีมเริ่มต้น"

3. คลิกที่เปลี่ยนภาษาธีมจากนั้นเลือกภาษาที่คุณต้องการแก้ไข ทำได้เฉพาะในธีมที่คุณเผยแพร่เท่านั้น

4. ป้อน Unit Price ในช่องค้นหา

5. อัปเดตช่องตัวคั่นราคา ซึ่งอยู่ในห้วข้อทั่วไป/การเข้าถึง

6. อัปเดตช่องป้ายราคา ซึ่งอยู่ในหัวข้อผลิตภัณฑ์/ผลิตภัณฑ์

7. แล้วคลิกที่บันทึก

Brooklyn

ขั้นตอนสำหรับ Brooklyn

ราคาต่อหน่วยมีให้บริการในธีม Brooklyn สำหรับเวอร์ชัน 13.1.0 ขึ้นไป หากคุณไม่สามารถอัปเดตธีมของคุณเป็นเวอร์ชันล่าสุดได้ คุณสามารถเพิ่มการปรับแต่งราคาต่อหน่วยไปยังธีม Brooklyn เวอร์ชันก่อนหน้า

เพิ่มส่วนย่อยราคาสินค้า

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

2. ป้อน product-price ในช่องชื่อ

3. คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าสินค้าแนะนำของคุณ

1. ในไดเรกทอรีส่วน ให้คลิกที่ไฟล์ featured-product.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{% include 'product-price', variant: current_variant %}

หลังจากที่แก้ไขไฟล์แล้ว featured-product.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าสินค้าของคุณ

1. ในไดเรกทอรีส่วน ให้คลิกที่ไฟล์ product-template.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{% include 'product-price', variant: current_variant %}

หลังจากที่แก้ไขไฟล์แล้ว product-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขตะกร้าสินค้า AJAX ของคุณ

1. ในไดเรกทอรีส่วนย่อย ให้คลิกที่ไฟล์ ajax-cart-template.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา <span class="ajaxcart__price">{{{price}}}</span>:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. เพิ่มโค้ดต่อไปนี้ลงใต้โค้ด {{/if}} จากขั้นตอนที่ 2:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

หลังจากที่แก้ไขไฟล์แล้ว ajax-cart-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสินค้าในกริดสินค้าของคุณ

1. ในไดเรกทอรีส่วนย่อย ให้คลิกที่ไฟล์ product-grid-template.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา capture img_id_class:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. เพิ่มส่วนย่อยต่อไปนี้ลงก่อนหน้าโค้ดจากขั้นตอนที่ 2:

{%- assign variant = product.selected_or_first_available_variant -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา {{ product.price | money_without_trailing_zeros }}:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. เพิ่มโค้ดต่อไปนี้ลงใต้โค้ด: </span>

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าตะกร้าสินค้า

1. ในไดเรกทอรีเทมเพลต ให้คลิกที่ไฟล์ cart.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา <span class="cart__price">:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

หมายเหตุ

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว cart.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขหน้าคำสั่งซื้อของคุณ

1. ในไดเรกทอรีเทมเพลต ให้คลิกที่ไฟล์ customers/order.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา {{ line_item.original_price | money }}:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. เพิ่มส่วนย่อยต่อไปนี้ลงก่อนหน้าโค้ด </td> จากขั้นตอนที่ 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว customers/order.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสไตล์ธีมของคุณ - ส่วนที่ 1

1. ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ไฟล์ theme.scss.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา .ajaxcart__price {:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 2:

.cart__unit-price {
    display: block;
}

หลังจากที่แก้ไขไฟล์แล้ว theme.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสไตล์ธีมของคุณ - ส่วนที่ 2

1. ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ไฟล์ timber.scss.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา .product-single__policies {:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านบนของรหัสจากขั้นตอนที่ 2:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ไปที่จุดท้ายสุดของไฟล์และเพิ่มโค้ดต่อไปนี้:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขโค้ดธีม JavaScript ของคุณ

1. ในไดเรกทอรีองค์ประกอบ ให้คลิกที่ไฟล์ theme.js.liquid

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

var prodImg;

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 2:

var unitPrice = null;

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

// Create item's data object and add to 'items' array

1. เพิ่มส่วนย่อยต่อไปนี้ลงเหนือโค้ดจากขั้นตอนที่ 4:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

vendor: cartItem.vendor

1. เพิ่มส่วนย่อยต่อไปนี้ลงเหนือโค้ดจากขั้นตอนที่ 6:

unitPrice: unitPrice,

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

productPrice: '#ProductPrice',

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 8:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา $(this.selectors.priceContainer, this.$container).removeClass(:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

$(this.selectors.SKU).html(variant.sku);

1. เพิ่มส่วนย่อยต่อไปนี้ลงเหนือโค้ดจากขั้นตอนที่ 12:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));
  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้โดยค้นหา this.destroyImageCarousel();:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. เพิ่มส่วนย่อยต่อไปนี้ลงเหนือโค้ดจากขั้นตอนที่ 14:

getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขคำแปลภาษาอังกฤษของคุณ

1. ในไดเรกทอรีตำแหน่งที่ตั้ง ให้คลิกที่ไฟล์ en.default.json

2. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

"refresh_page": "choosing a selection results in a full page refresh"

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านบนของรหัสจากขั้นตอนที่ 2:

"unit_price_separator": "per",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้ปุ่มลัดคีย์บอร์ดสำหรับค้นหาเพื่อระบุตำแหน่งโค้ดต่อไปนี้:

"include_taxes": "Tax included.",

1. ใส่ส่วนย่อยต่อไปนี้ที่ด้านล่างของรหัสจากขั้นตอนที่ 4:

"unit_price": "Unit price",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

(ไม่บังคับ) เพิ่มคำแปลภาษาอื่นๆ

1. ไปที่หน้าธีมในส่วนผู้ดูแล Shopify

2. คลิกปุ่ม "..." > "แก้ไขเนื้อหาธีมเริ่มต้น"

3. คลิกที่เปลี่ยนภาษาของธีม จากนั้นเลือกภาษาที่คุณต้องการแก้ไข ทำได้เฉพาะในธีมที่คุณเผยแพร่เท่านั้น

4. ป้อน Unit Price ในช่องค้นหา

5. อัปเดตช่องตัวคั่นราคา ซึ่งอยู่ในห้วข้อทั่วไป/การเข้าถึง

6. อัปเดตข้อมูลในช่องใบจ่าหน้าราคาต่อหน่วย ซึ่งอยู่ภายใต้หัวข้อสินค้า/ทั่วไป

7. แล้วคลิกที่บันทึก

Minimal

ขั้นตอนสำหรับ Minimal

ราคาต่อหน่วยมีอยู่ในธีม Minimal สำหรับเวอร์ชัน 11.2.0 ขึ้นไป หากคุณไม่สามารถอัปเดตแอปของคุณเป็นเวอร์ชันล่าสุดได้ คุณสามารถเพิ่มการแก้ไขราคาต่อหน่วยไปยังธีม Minimal เวอร์ชันก่อนหน้า

อัปเดตส่วนย่อยของคุณ

1. ค้นหาและเข้าไปยังโฟลเดอร์ส่วนย่อย

2. เลือกเพิ่มส่วนย่อยใหม่

3. ป้อนชื่อ product-unit-price

4. คัดลอกและวางโค้ดต่อไปนี้ลงใน product-unit-price.liquid

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. แล้วคลิกที่บันทึก

2. ค้นหาและแก้ไขไฟล์ product-grid-item.liquid

3. แทนที่บรรทัดนี้:

{% capture price %}{{ featured.price | money }}{% endcapture %}

ด้วยบรรทัดนี้:

{%- assign price = featured.price | money -%}

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหา {{ price }} และเพิ่มโค้ดนี้ด้านล่าง:

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว product-grid-item.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

2. ค้นหาและแก้ไขไฟล์ search-result.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหา {% if item.object_type == 'product' %} และเพิ่มโค้ดต่อไปนี้ในบรรทัดด้านล่าง:

{%- assign variant = item.selected_or_first_available_variant -%}

1. จากนั้น ให้ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาส่วนย่อยสองรายการต่อไปนี้:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

และ

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. เพิ่มบล็อกโค้ดต่อไปนี้ที่ด้านล่างของโค้ดส่วนย่อยสองส่วนแต่ละโค้ดที่ระบุไว้ในขั้นตอนก่อนหน้านี้:

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว search-result.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตสไตล์ของคุณ

1. ค้นหาและขยายโฟลเดอร์สินทรัพย์

2. แก้ไขไฟล์ theme.scss.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาโค้ดกลุ่มนี้:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

font-family: $headerFontStack;

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาชิ้นส่วนรหัสต่อไปนี้:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

.grid-link__unit-price {
  font-size: 1em;
}

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาชิ้นส่วนรหัสต่อไปนี้:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

.order-discount--price {
  margin-bottom: 0;
}

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาชิ้นส่วนรหัสต่อไปนี้:

.cart__product-title {
  display: inline-block;

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

font-weight: $bodyFontWeightBold;

หลังจากที่แก้ไขไฟล์แล้ว theme.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

2. ค้นหาและแก้ไขไฟล์ timber.scss.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาโค้ดนี้:

.quantity-selector {
    display: inline-block;
  }
}

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. ใส่โค้ดนี้ที่ส่วนท้ายของไฟล์:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

หลังจากที่แก้ไขไฟล์แล้ว timber.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตเทมเพลตของคุณ

1. ค้นหาและขยายโฟลเดอร์เทมเพลต

2. ค้นหาและแก้ไขไฟล์ customers/order.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อหาโค้ดดังกล่าว:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. เพิ่มโค้ดนี้ลงด้านล่างโค้ดจากขั้นตอนที่ 3:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว customers/order.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดต JavaScript ของคุณ

1. ค้นหาและแก้ไขโค้ด theme.js ในสินทรัพย์

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มี .shopify-payment-button แล้วแทนที่ด้วย:

$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)

กลุ่มโค้ดดังกล่าวควรจะแสดงในลักษณะนี้:

1. ค้นหาโค้ดนี้:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. เพิ่มโค้ดนี้ด้านล่างโค้ดดังกล่าว:

// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
  this.selectors.$unitPrice.html(
      Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
  this.selectors.$unitPriceContainer.removeClass('hide');
}

ผลลัพธ์ควรแสดงในลักษณะนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาโค้ดนี้:

.attr('data-zoom')
  });
});

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

},
getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

ผลลัพธ์ควรแสดงในลักษณะนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตเทมเพลตตระกร้าสินค้าของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วน

2. แก้ไขไฟล์ cart-template.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาโค้ด <span class="order-discount h5">{{ item.final_price | money }}</span>

4. แทนที่บรรทัดดังกล่าวด้วยโค้ดนี้:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. ค้นหาโค้ด {%- if item.line_level_discount_allocations != blank -%} ที่เกิดขึ้นครั้งแรก:

{%- if item.line_level_discount_allocations != blank -%}
  <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
    {%- for discount_allocation in item.line_level_discount_allocations -%}
      <li class="order-discount__item">
        <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

1. เพิ่มโค้ดกลุ่มนี้ที่ด้านบนของโค้ดจากขั้นตอนที่ 5:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว cart-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตสินค้าแนะนำของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วน

2. แก้ไขไฟล์ featured-product.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อหาบรรทัดที่มีโค้ด itemprop="name" แล้วแทนที่ด้วย:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. ค้นหาโค้ดที่มี id="PriceA11y":

{% if compare_at_price > price %}
  <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <s id="ComparePrice" class="product-single__sale-price">
    { compare_at_price | money }}
  </s>
{% endif %}

1. ใส่บล็อกโค้ดต่อไปนี้ใต้โค้ดส่วนย่อยที่คุณตั้งไว้ในขั้นตอนก่อนหน้า:

{% include 'product-unit-price', variant: variant, available: true %}

หลังจากที่แก้ไขไฟล์แล้ว featured-product.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตเทมเพลตผลิตภัณฑ์ของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วน

2. แก้ไขไฟล์ product-template.liquid

3. ใช้แป้นลัดสำหรับค้นหาเพื่อหาบรรทัดที่มี itemprop="name" แล้วแทนที่ด้วย:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. ใช้แป้นลัดสำหรับค้นหาเพื่อหาโค้ดดังกล่าว:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. เพิ่มบรรทัดด้านล่างนี้:

{% include 'product-unit-price', variant: variant, available: true %}

หลังจากที่แก้ไขไฟล์แล้ว product-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

อัปเดตภาษา

1. ค้นหาและขยายโฟลเดอร์ตำแหน่งที่ตั้ง

2. เปิดและแก้ไขไฟล์ en.default.json

3. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มี refresh_page แล้วแทนที่ด้วย:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

ผลลัพธ์ควรแสดงในลักษณะนี้:

1. ค้นหาบรรทัดที่มี full_details แล้วแทนที่ด้วย:

"full_details": "Full details",
"unit_price_label": "Unit price"

ผลลัพธ์ควรแสดงในลักษณะนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

(ไม่บังคับ) เพิ่มคำแปลภาษาอื่นๆ

1. ไปที่หน้าธีมในส่วนผู้ดูแล Shopify

2. คลิกปุ่ม "..." > "แก้ไขเนื้อหาธีมเริ่มต้น"

3. คลิกที่เปลี่ยนภาษาธีมจากนั้นเลือกภาษาที่คุณต้องการแก้ไข ทำได้เฉพาะในธีมที่คุณเผยแพร่เท่านั้น

4. ป้อน Unit Price ในช่องค้นหา

5. อัปเดตช่องตัวคั่นราคา ซึ่งอยู่ในห้วข้อทั่วไป/การเข้าถึง

6. อัปเดตช่องป้ายราคา ซึ่งอยู่ในหัวข้อผลิตภัณฑ์/ผลิตภัณฑ์

7. แล้วคลิกที่บันทึก

Venture

ขั้นตอนสำหรับธีม Venture

ราคาต่อหน่วยถูกเพิ่มไปยังธีม Venture สำหรับเวอร์ชัน 9.4.0 ขึ้นไป หากคุณไม่สามารถอัปเดตแอปของคุณเป็นเวอร์ชันล่าสุดได้ ให้ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการปรับแต่งราคาต่อหน่วยในธีม Venture เวอร์ชันก่อนหน้า

แก้ไขไฟล์ภาษาของธีมของคุณ

1. ในไดเรกทอรีตำแหน่งที่ตั้ง ให้คลิกที่ en.default.json

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มีโค้ด refresh_page:

"refresh_page": "choosing a selection results in a full page refresh"

1. เพิ่มโค้ดต่อไปนี้ที่ด้านบนของบรรทัดที่พบในขั้นตอนที่ 2:

"unit_price_separator": "per",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มีโค้ด stock_unavailable:

"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. เพิ่มโค้ดต่อไปนี้ที่ด้านบนของบรรทัดที่พบในขั้นตอนที่ 4:

"unit_price_label": "Unit price",

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสไตล์ชีตของธีมของคุณ

1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.scss.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด .product-single__policies {:

.product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. เพิ่มโค้ดต่อไปนี้ด้านล่างแท็กปิด } ของบล็อกโค้ดที่พบในขั้นตอนที่ 2:

.product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

หลังจากที่แก้ไขไฟล์แล้ว theme.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

เพิ่มส่วนย่อยราคาต่อหน่วยของสินค้า

1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

2. ป้อนชื่อ product-unit-price

3. เพิ่มรหัสต่อไปนี้ลงใน product-unit-price.liquid:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
        {{- product_variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ product_variant.unit_price_measurement.reference_unit }}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ product_variant.unit_price | money }}</span>
  {{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขส่วนย่อยของบัตรสินค้าของคุณ

1. ในไดเรกทอรี ส่วนย่อย ให้คลิกที่ product-card.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <a href="{{ product.url | within: collection }}"

3. เพิ่มโค้ดต่อไปนี้ที่ด้านบนของบรรทัดที่พบในขั้นตอนที่ 2:

{%- assign current_variant = product.selected_or_first_available_variant -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <div class="product-card__price">:

<div class="product-card__price">
  {% if product.compare_at_price > product.price %}
    {% comment %}
      Product is on sale
    {% endcomment %}
    {% if product.price_varies %}
      {% assign sale_price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% else %}
    {% comment %}
      Not on sale, but could still have varying prices
    {% endcomment %}
    {% if product.price_varies %}
      {% assign price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.from_text_html' | t: price: price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% endif %}
</div>

1. เพิ่มรหัสต่อไปนี้ที่ด้านบนตัวปิดของแท็ก </div> ซึ่งพบได้ในขั้นตอนที่ 5:

{%- unless product.price_varies -%}
  {%- if current_variant.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
  {%- endif -%}
{%- endunless -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตหน้าตะกร้าสินค้าของคุณ

1. ในไดเรกทอรีส่วน ให้คลิก cart-template.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาอินสแตนซ์แรกของ <td class="cart__cell--total">:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. เพิ่มรหัสต่อไปนี้ด้านล่างแท็ก endif ซึ่งพบได้ในขั้นตอนที่ 2:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาอินสแตนซ์ที่สองของ <td class="cart__cell--total">:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. เพิ่มรหัสต่อไปนี้ด้านล่างตัวปิดของแท็ก {{/if}} ซึ่งพบได้ในขั้นตอนที่ 4:

{{#if unitPrice}}
  <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
  <span class="product-unit-price">
    {% endraw %}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตหน้าสินค้าแนะนำของคุณ

1. ในไดเรกทอรีส่วน ให้คลิก featured-product.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% assign current_variant = product.selected_or_first_available_variant %}

3. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของบรรทัดที่พบในขั้นตอนที่ 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มีโค้ด <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
  <div class="product-tag">
    {{ 'products.product.on_sale' | t }}
  </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. ด้านล่างแท็ก ul นี้ให้หารหัส {% if section.settings.stock_enable %}.

2. เพิ่มรหัสต่อไปนี้เหนือบล็อก if ซึ่งพบได้ในขั้นตอนที่ 6:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตหน้าสินค้าของคุณ

1. ในไดเรกทอรีส่วน ให้คลิก product-template.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% assign current_variant = product.selected_or_first_available_variant %}

3. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของบรรทัดที่พบในขั้นตอนที่ 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มีโค้ด <ul class="product-single__meta-list:

<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. ด้านล่างแท็ก ul นี้ให้หารหัส {% if section.settings.stock_enable %}.

2. เพิ่มรหัสต่อไปนี้เหนือบล็อก if ซึ่งพบได้ในขั้นตอนที่ 5:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตใบสั่งซื้อของลูกค้าของคุณ

1. ในไดเรกทอรีเทมเพลตให้คลิก customers/order.liquid.

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <td class="text-right" data-label="{{ 'customer.order.price' | t }}">:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. แทนที่โค้ดที่พบในขั้นตอนที่ 2 ด้วยรหัสต่อไปนี้:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  <div>
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </div>
  {%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: line_item %}
  {%- endif -%}
</td>

หลังจากที่แก้ไขไฟล์แล้ว customers/order.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขไฟล์ JavaScript ของธีม

1. ในไดเรกทอรีชิ้นงาน ให้คลิก theme.js

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด // Create item's data object and add to 'items' array

3. เพิ่มโค้ดต่อไปนี้ที่ด้านบนของบรรทัดที่พบในขั้นตอนที่ 2:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด vendor: cartItem.vendor,

2. เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของบรรทัดที่พบในขั้นตอนที่ 4:

unitPrice: unitPrice,

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด shopifyPaymentButton: '.shopify-payment-button'

2. แทนที่บรรทัดที่พบในขั้นตอนที่ 6 ด้วยรหัสต่อไปนี้:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด _updateSKU: function(evt) {

2. เพิ่มโค้ดต่อไปนี้ที่ด้านบนของบรรทัดที่พบในขั้นตอนที่ 8:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด this._updateIncomingInfo(variant);:

} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}

1. เพิ่มรหัสต่อไปนี้ด้านล่างตัวปิดแท็ก } ซึ่งพบได้ในขั้นตอนที่ 10:

$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

(ไม่บังคับ) เพิ่มคำแปลภาษาอื่นๆ

1. ไปที่หน้าธีมในส่วนผู้ดูแล Shopify

2. คลิกปุ่ม "..." > "แก้ไขเนื้อหาธีมเริ่มต้น"

3. คลิกที่เปลี่ยนภาษาธีมจากนั้นเลือกภาษาที่คุณต้องการแก้ไข ทำได้เฉพาะในธีมที่คุณเผยแพร่เท่านั้น

4. ป้อน Unit Price ในช่องค้นหา

5. อัปเดตช่องตัวคั่นราคา ซึ่งอยู่ในห้วข้อทั่วไป/การเข้าถึง

6. อัปเดตช่องป้ายราคา ซึ่งอยู่ในหัวข้อผลิตภัณฑ์/ผลิตภัณฑ์

7. แล้วคลิกที่บันทึก

Supply

ขั้นตอนสำหรับ Supply

ราคาต่อหน่วยถูกเพิ่มไปยังธีม Supply สำหรับเวอร์ชัน 8.3.0 และสูงกว่า หากคุณไม่สามารถอัปเดตธีมของคุณเป็นเวอร์ชันล่าสุดได้ ให้ทำตามขั้นตอนต่อไปนี้เพื่อใช้งานการแก้ไขราคาต่อหน่วยใน Supply เวอร์ชันก่อนหน้า

เพิ่มส่วนย่อยราคาต่อหน่วยของสินค้า

1. ค้นหาและเข้าไปยังโฟลเดอร์ส่วนย่อย

2. เลือกเพิ่มส่วนย่อยใหม่

3. ป้อนชื่อ product-unit-price

4. คัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์แล้วเลือกบันทึก

{%- unless available -%}
{%- if variant.title -%}
    {%- assign available = variant.available -%}
{%- else -%}
    {%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

หลังจากที่แก้ไขไฟล์แล้ว product-unit-price.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตสินค้าแนะนำของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนแล้วเลือกไฟล์ featured-product.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% include 'price' with price %} ในไฟล์:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. เพิ่มโค้ดต่อไปนี้ใต้โค้ดปิด </span> ของส่วนย่อยจากขั้นตอนที่ 2:

{% include 'product-unit-price' variant: variant %}

หลังจากที่แก้ไขไฟล์แล้ว featured-product.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตผลิตภัณฑ์ของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนแล้วเลือกไฟล์ product-template.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% include 'price' with variant.price %} ในไฟล์:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. เพิ่มโค้ดต่อไปนี้ใต้โค้ดปิด </span> จากขั้นตอนที่ 2:

{% include 'product-unit-price', variant: variant %}

หลังจากที่แก้ไขไฟล์แล้ว product-template.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขส่วนย่อยสินค้าในกริดสินค้าของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนย่อยแล้วเลือกไฟล์ product-grid-item.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% if on_sale and section.settings.product_show_saved_amount %} ในไฟล์:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
  </div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
    {% assign compare_price = product.compare_at_price %}
    {% assign product_price = product.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

หลังจากที่แก้ไขไฟล์แล้ว product-grid-item.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขส่วนย่อยรายการสินค้าของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนย่อยแล้วเลือกไฟล์ product-list-item.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <div class="product-item--price text-center"> ในไฟล์:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

<div class="text-center">
  <div class="product-item--price">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </div>

หลังจากที่แก้ไขไฟล์แล้ว product-list-item.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขส่วนย่อยกริดผลลัพธ์การค้นหาของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนย่อยแล้วเลือกไฟล์ search-result-grid.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด {% if on_sale and section.settings.product_show_saved_amount %} ในไฟล์:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item.first_available_variant %}
  {%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag medium--right">
    {% assign compare_price = item.compare_at_price %}
    {% assign product_price = item.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

หลังจากที่แก้ไขไฟล์แล้ว search-result-grid.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตตระกร้าสินค้าของคุณ

1. ค้นหาและขยายโฟลเดอร์เทมเพลตแล้วเลือกไฟล์ cart.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <del class="cart-original-price order-discount--cart-price"> ในไฟล์:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว cart.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเทมเพลตคำสั่งซื้อของคุณ

1. ค้นหาและขยายโฟลเดอร์เทมเพลตแล้วเลือกไฟล์ customers/order.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด <td class="text-right" data-label="customer.order.price"> ในไฟล์:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. เพิ่มโค้ดต่อไปนี้เหนือโค้ดปิด </td> จากขั้นตอนที่ 2:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

หลังจากที่แก้ไขไฟล์แล้ว customers/order.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขเลย์เอาต์ธีมของคุณ

1. ค้นหาและขยายโฟลเดอร์เลย์เอาต์แล้วเลือกไฟล์ theme.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มี only_left: ในไฟล์:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. เพิ่มโค้ดต่อไปนี้ด้านบนโค้ด only_left:{{ 'products.product.only_left' | t: count: '1' | json }} จากขั้นตอนที่ 2:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

หลังจากที่แก้ไขไฟล์แล้ว theme.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขสไตล์ธีมของคุณ

1. ค้นหาและขยายโฟลเดอร์ส่วนแล้วเลือกไฟล์ theme.scss.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด .product-item--price { ในไฟล์:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. แทนที่โค้ดกล่าวด้วยส่วนย่อยต่อไปนี้:

.product-item--price {
  @include clearfix;
  margin-bottom: $gutter/2;

  .h1 {
    margin-bottom: 0;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}
.product-price-unit {
  display: none;
  font-size: em(12px);
  margin-right: 10px;
  .cart-pricing &,
  .order-table & {
    margin-right: 0;
  }
  &.product-price-unit--available {
    display: block;
  }
}

หลังจากที่แก้ไขไฟล์แล้ว theme.scss.liquid ไฟล์ควรจะแสดงผลในรูปแบบดังต่อไปนี้

1. คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขโค้ดธีม JavaScript ของคุณ

1. ค้นหาและขยายโฟลเดอร์สินทรัพย์ แล้วเลือกไฟล์ theme.js.liquid

2. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด originalSelectorId: 'productSelect-' + sectionId, ในไฟล์:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. เพิ่มโค้ดต่อไปนี้ด้านบนโค้ด originalSelectorId: 'productSelect-' + sectionId, จากขั้นตอนที่ 2:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:

1. ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด productVariantCallback: function(variant) { ในไฟล์:

productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

$newImage.removeClass('hide');
  $otherImages.addClass('hide');
}</code></pre></figure><ol>
เพิ่มโค้ดต่อไปนี้ลงใต้โค้ด if (variant) { จากขั้นตอนที่ 2:

// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');
if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);
  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}
หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:


ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; ในไฟล์:

customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';

แทนที่บรรทัด customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; ด้วยส่วนย่อยดังต่อไปนี้:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:


ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัด $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); ในไฟล์:

} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}

เพิ่มโค้ดต่อไปนี้ลงใต้ส่วนย่อยจากขั้นตอนที่ 11:

},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:


คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

แก้ไขไฟล์ภาษาของธีมของคุณ

ค้นหาและขยายโฟลเดอร์ตำแหน่งที่ตั้ง แล้วเลือกไฟล์ en.default.json

ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มี "refresh_page" ในไฟล์:


"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

เพิ่มโค้ดต่อไปนี้ด้านบนโค้ด "refresh_page" จากขั้นตอนที่ 2:

"unit_price_separator": "per",
หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:


ใช้แป้นลัดสำหรับค้นหาเพื่อค้นหาบรรทัดที่มี "will_be_in_stock_after" ในไฟล์:

"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}

เพิ่มโค้ดต่อไปนี้หลังโค้ด "will_be_in_stock_after" จากขั้นตอนที่ 5:

"unit_price_label": "Unit price",
หลังจากที่แก้ไขไฟล์แล้ว ผลลัพธ์ควรจะแสดงผลในรูปแบบดังต่อไปนี้:


คลิกบันทึกเพื่อยืนยันการเปลี่ยนแปลงของคุณ

(ไม่บังคับ) เพิ่มคำแปลภาษาอื่นๆ

ไปที่หน้าธีมในส่วนผู้ดูแล Shopify

คลิกปุ่ม "..." > "แก้ไขเนื้อหาธีมเริ่มต้น"

คลิกที่เปลี่ยนภาษาธีมจากนั้นเลือกภาษาที่คุณต้องการแก้ไข ทำได้เฉพาะในธีมที่คุณเผยแพร่เท่านั้น

ค้นหา Unit Price ในแถบการป้อนข้อมูล

อัปเดตช่องตัวคั่นราคา ซึ่งอยู่ในห้วข้อทั่วไป/การเข้าถึง

อัปเดตช่องป้ายราคา ซึ่งอยู่ในหัวข้อผลิตภัณฑ์/ผลิตภัณฑ์

แล้วคลิกที่บันทึก

แสดงราคาต่อหน่วยในการแจ้งเตือนคำสั่งซื้อของคุณ

ตามค่าเริ่มต้น การแจ้งเตือนการยืนยันคำสั่งซื้อจะแสดงราคาต่อหน่วยเมื่อฟีเจอร์เปิดใช้งานอยู่

หากคุณได้เพิ่มราคาต่อหน่วยไปยังสินค้าของคุณแล้ว แต่ราคาต่อหน่วยของคุณไม่ปรากฏในการแจ้งเตือนการยืนยันการสั่งซื้อ คุณอาจต้องอัปเดตเทมเพลตด้วยตนเอง

ขั้นตอนมีดังนี้

1. ในส่วนผู้ดูแล Shopify ให้ไปที่การตั้งค่า > การแจ้งเตือน

2. ในส่วนคำสั่งซื้อ ให้คลิก “การยืนยันคำสั่งซื้อ”

3. คลิก "แก้ไขโค้ด"

4. เพิ่มส่วนย่อยต่อไปนี้ไปยังเทมเพลตภายใน "order-list__item-price" ของคุณ:

{%- if line_item.unit_price_measurement -%}
  <div class="order-list__unit-price">
     {{ line_item.unit_price | money }}/
     {%- if line_item.unit_price_measurement.reference_value != 1 -%}
       {{- line_item.unit_price_measurement.reference_value -}}
     {%- endif -%}
     {{ line_item.unit_price_measurement.reference_unit }}
  </div>
{%- endif -%}

 5. คลิกบันทึก

เคล็ดลับ

ดำเนินการคำสั่งซื้อสำหรับทดสอบในร้านค้าของคุณเพื่อยืนยันหากการแจ้งเตือนคำสั่งซื้อแสดงราคาต่อหน่วย