Product Page Customization is being Ignored when Variants are Selected

New Member
12 0 0

Hey everyone. I have some product page customization going on that displays the products SKU and UPC code under the title. I have also added text beside the pricing. Beside a compare at price I added the text "Regular Price" and beside the actual price I have added the text "Your Price"


Everything functions as expected, until I am on a product page that has variants. As soon as I click on a different variant, the customization goes away.


The actual SKU# updates properly for variants, but the UPC dissapers and the text around the pricing disappears.


Here's a screenshot of the main product page:

Screen Shot 2019-12-30 at 3.27.43 PM.png

And then here's a screenshot of the same product page with a different variant selected (notice the UPC disappears and the "Your Price" around the text disappears):

Screen Shot 2019-12-30 at 3.27.53 PM.png


Here are the sections of custom code I have added:


For SKU and Barcode:


{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.sku != "" %}
<p id="Sku-{{ section_id }}" class="product-single__sku" style="font-size: 11px">
SKU: {{ current_variant.sku }} | UPC: {{ current_variant.barcode }}
{% endif %}


For Text around Price:


{%- assign hide_sale_price = true -%}
{% if product.compare_at_price_max > product.price %}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign hide_sale_price = false -%}
{% endif %}
id="PriceA11y-{{ section_id }}"
aria-hidden="{{ hide_sale_price }}">
{{ 'products.general.regular_price' | t }}
<span class="product__price-wrap-{{ section_id }}{% if hide_sale_price %} hide{% endif %}">
<span id="ComparePrice-{{ section_id }}" class="product__price product__price--compare">
{% if current_variant.compare_at_price > current_variant.price %}
Regular Price: {{ current_variant.compare_at_price | money }}
{% endif %}
<span id="ComparePriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y-{{ section_id }}" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{% endif %}

<span id="ProductPrice-{{ section_id }}"
class="product__price {% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}" style="font-size:28px">
<br><span style="font-size:14px">Your Price:</span> <span class="money" data-product-id="{{ }}">{{ current_variant.price | money }}



Does anyone have any ideas of what I did wrong here? Any information would be useful and super appreciated.


Thanks for your time!