SKU and Barcode presentation on front end of website

[LoyalCanada]

I have some coding that places the SKUs and BARCODEs of products onto the front end of the website. So that customers can see these on the product pages. The admin enters them into the back end fields and they are visible on the front end on product pages.

This works fine for regular products. However we needed a new template for variable products. It is the same coding, but in this case only the SKU is shown properly. The BARCODE is not displayed, and instead the SKU data is there. So although on the front end it has signs for SKU and BARCODE, the SKU data field from the backend is being displayed twice in the frontend.

Here is the working code:

{%- if section.settings.prod_show_sku -%}
<div class="sku {% if product.selected_or_first_available_variant.sku == blank %}sku--no-sku{% endif %}"><span class="product-detail-label">ITEM CODE:</span> <span class="sku__value">{{ product.selected_or_first_available_variant.sku }}</span></div>
{%- endif -%}
<div class="sku "><span class="product-detail-label">BARCODE:</span> <span class="sku__value">{{ product.selected_or_first_available_variant.barcode }}</span></div>

The variable products have different SKUs and BARCODEs variants. When switching between the variants on the front end, the SKUs change as they should. However the BARCODE data is not displayed at all. Rather is replaced by the SKU data.

Any help would be appreciated.

[SmallTask]

Hi @LoyalCanada,

Kindly share your store url, so that we can check and let you know.