Increment and decrement button for j2store product using joomla 5

General
1

how can i make my j2store product increment and decrement button always visible without need user to bring their mouse close to the edit quantity button.

this is the sample code for one of the product:

<input type="number" name="product_qty" value="1" class="input-mini form-control " min="0" step="1">

i have tried edit the.css file directly from the main menu, clear all cache, open website in incognito mode, but still didn’t work.

2

To make the increment/decrement buttons for your J2Store product always visible, you likely need to override the CSS that hides them until hover. Here’s how to do it straightforwardly:

Step-by-step Fix:

  1. Locate the quantity input – You already have:
<input type="number" name="product_qty" value="1" class="input-mini form-control " min="0" step="1">
  1. Add this CSS to your site’s custom CSS file:
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1 !important;
    pointer-events: all !important;
}
  1. Also try this for Firefox and fallback:
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0;
}
  1. Clear Joomla + browser cache, and check in incognito again.

Why this happens:

Some templates or browsers hide the number input’s spin buttons (+/-) by default or only show on hover.