FROM CACHE - en_header

Quantity Selector

adam10910
Excursionist
53 0 4

Hi 

 

Please could u provide a solution, to moving stock status above the product price (picture attached below) 

 

My store: 

Theme Warehouse

URL:  domapp.co.uk 

 

wanted result: 

Screenshot 2022-11-23 at 18.41.31.png

 

 

 current:

Screenshot 2022-11-24 at 18.12.35.png

Cheers

Replies 2 (2)
dmwwebartisan
Shopify Partner
11148 2393 3434

@adam10910 

This code customization work!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
BSS-Commerce
Shopify Partner
223 33 38

Hi @adam10910

 

You can go to Edit code of the theme. Find the file product-variant-selector.liquid and this code (at the end of the file).

 

{%- if product.template_suffix != 'contact' -%}
    {%- if block.settings.show_quantity_selector -%}
      <div class="product-form__info-item product-form__info-item--quantity">
        <label for="{{ section.id }}-{{ product.id }}-quantity" class="product-form__info-title text--strong">{{ 'product.form.quantity' | t }}:</label>

        <div class="product-form__info-content">
          <div class="quantity-selector quantity-selector--product">
            <button type="button" class="quantity-selector__button" data-action="decrease-picker-quantity" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
            <input name="quantity" aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" inputmode="numeric" value="1" size="3">
            <button type="button" class="quantity-selector__button" data-action="increase-picker-quantity" aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}">{% render 'icon', icon: 'plus' %}</button>
          </div>
        </div>
      </div>
    {%- else -%}
      <input type="hidden" name="quantity" value="1">
    {%- endif -%}
  {%- endif -%}

 

Then, go to product-buy-buttons.liquid file and add the following code before this tag {%- if product.selected_or_first_available_variant.available -%}

 

<div class="product-form__info-item product-form__info-item--quantity">
        <div class="product-form__info-content">
          <div class="quantity-selector quantity-selector--product">
            <button type="button" class="quantity-selector__button" data-action="decrease-picker-quantity" aria-label="{{ 'cart.items.decrease_quantity' | t }}" title="{{ 'cart.items.decrease_quantity' | t }}">{% render 'icon', icon: 'minus' %}</button>
            <input name="quantity" aria-label="{{ 'product.form.quantity' | t }}" class="quantity-selector__value" inputmode="numeric" value="1" size="3">
            <button type="button" class="quantity-selector__button" data-action="increase-picker-quantity" aria-label="{{ 'cart.items.increase_quantity' | t }}" title="{{ 'cart.items.increase_quantity' | t }}">{% render 'icon', icon: 'plus' %}</button>
          </div>
        </div>
      </div>

 

Finally, you can go to the theme.css file and add this code at the end of the file:

 

.product-form__payment-container .shopify-payment-button {
  width: calc(100% - 18px)!important;
}
.product-form__payment-container .quantity-selector__value {
  width: 80px;
}
.product-form__payment-container .quantity-selector__button {
  padding: 0 20px;
}
.product-form__payment-container .quantity-selector--product {
  height: 48px;
}
.product-form__payment-container .product-form__info-content {
  padding-top: 0;
}
@media screen and (max-width: 640px){
  .product-form__payment-container .product-form__add-button {
    margin-top: 16px;
  }
}

@media screen and (max-width: 640px) {
  .product-form__payment-container .shopify-payment-button {
    width: 100%!important;
  }
}
@media screen and (min-width: 640px) {
  .product-form__payment-container .product-form__info-item {
    width: 182px!important;
  }
  .product-form__payment-container .product-form__add-button {
    width: calc(100% - 220px)!important;
  }
}

 The result will be displayed like this: 

 

view (12).png

 

I hope you find it helpful!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
Install B2B & B2C apps to accelerate sales