Add 00g at end if quantity selector

[AlexRatii]

good day,

some of my products count in 100g (100g,200g, …)
first i add tag for that product as”quantity-with-grams”
then i add below code in quantity-selector.liquid

{% if product.tags contains ‘sold-by-grams’ %}

<div class="quantity-with-grams">

   <input

type="number"

name="{% if line_index %}updates\[\]{% else %}quantity-with-grams{% endif %}"

value="{{ in_cart_quantity | default: variant.quantity_rule.min | default: 1 }}" 

data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"

min="{{ variant.quantity_rule.min | default: 1 }}"

on:blur="/setQuantity"

on:focus="/selectInputValue"

ref="quantityInput"

aria-label="{{ 'accessibility.quantity' | t }}"

{% if line_index %}

  data-cart-line="{{ line_index | plus: 1 }}"

{% endif %}

{% if variant.quantity_rule.max %}

  max="{{ variant.quantity_rule.max }}"

{% endif %}

step="{{ variant.quantity_rule.increment | default: 1 }}"

{% if can_update_quantity == false or variant.available == false %}

  disabled

{% endif %}>00g

if you see i add ”00g” at end of that and its work correct, just have problem that its space between qty and 00g
how can i remove it

shop link :https://pickandmix.ae/
pass : aaa12345

[tim_1]

Try this:

.quantity-with-grams {
  align-items: baseline;
}

.quantity-selector input[type='number'] {
  text-align: right;
  font-size: inherit;
}

[AlexRatii]

@tim_1

.quantity-with-grams {
  align-items: baseline;
}

.quantity-selector input[type='number'] {
  text-align: right;
  font-size: inherit;
}

@tim_1
its work thank you,

just how can i bring “Number+00g” to center , its right now

[SealSubs-Roan]

@AlexRatii

good day,

some of my products count in 100g (100g,200g, …)
first i add tag for that product as”quantity-with-grams”
then i add below code in quantity-selector.liquid

{% if product.tags contains ‘sold-by-grams’ %}

<div class="quantity-with-grams">

   <input

type="number"

name="{% if line_index %}updates\[\]{% else %}quantity-with-grams{% endif %}"

value="{{ in_cart_quantity | default: variant.quantity_rule.min | default: 1 }}" 

data-cart-quantity="{{ cart | item_count_for_variant: variant.id }}"

min="{{ variant.quantity_rule.min | default: 1 }}"

on:blur="/setQuantity"

on:focus="/selectInputValue"

ref="quantityInput"

aria-label="{{ 'accessibility.quantity' | t }}"

{% if line_index %}

  data-cart-line="{{ line_index | plus: 1 }}"

{% endif %}

{% if variant.quantity_rule.max %}

  max="{{ variant.quantity_rule.max }}"

{% endif %}

step="{{ variant.quantity_rule.increment | default: 1 }}"

{% if can_update_quantity == false or variant.available == false %}

  disabled

{% endif %}>00g

if you see i add ”00g” at end of that and its work correct, just have problem that its space between qty and 00g
how can i remove it

shop link :https://pickandmix.ae/
pass : aaa12345

Hi @AlexRatii

Wrap the input and “00g” in a span or div, then use CSS to remove spacing and padding. Set both elements to inline-block, zero margins, and adjust letter-spacing if needed. This ensures the unit appears flush with the number while keeping the input functional and accessible.

[tim_1]

Try this CSS:

.quantity-with-grams {
  --offset: 10px; /* fine-tune to center */
  align-items: baseline;
  padding-right: var(--offset);
  border-radius:0;
}
.quantity-with-grams:focus-within {
  outline: 1px solid;
}

.quantity-with-grams input[type='number'] {
  text-align: right;
  font-size: inherit;
  padding-right: 0;
  margin-left: calc(-1 * var(--offset));
  outline: none !important;
}

Also, instead of

<div class="quantity-with-grams">
 ... 
</div>

make it

<label class="quantity-with-grams">
 ... 
</label>

This will help if anybody clicks into 00g

This is how it looks like for me:

Unfortunately, styling native elements like <input> is problematic.

[PaulNewton]

Need to invert the problem with a text input

@tim_1

Unfortunately, styling native elements like <input> is problematic.

Problematic putting it politely.
@AlexRatii you need to be using an intermediary TEXT input for this type of stuff or you gonna have constant headaches from compounding CSS band-aids for every other browser/situation.
Use a text input,
THEN parse the text into a hidden qty input for the product form submission.