News:

Looking for documentation? Take a look on our wiki

Main Menu

hide + and - quantity buttons in product page, cart and checkout

Started by tomphillipspcs, July 26, 2017, 12:19:52 PM

Previous topic - Next topic

tomphillipspcs

I have added this to virtuemart.css but still these buttons show?

.quantity-box .quantity-input, .quantity-box .quantity-controls {
  display: none;
}

eg

http://upsobags.co.uk/bags/backpacks-2/burtonwood-backpack-detail

any ideas?


jenkinhill

You are not using the default VirtueMart templates so you have to use the right classes for the commercial overrides. A quick look at the code shows

<span class="quantity-controls js-recalculate">
            <input type="button" class="quantity-controls quantity-plus"/>
            <input type="button" class="quantity-controls quantity-minus"/>
         </span>


So maybe:   
.quantity-controls js-recalculate  {display:none;}
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum


jenkinhill

That was only a suggestion. Look at the code and try other selectors.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

hellorain

Hello,

try below code
find

.span quantity-controls js-recalculate in below file

/templates/evostore/css/A.virtuemart.css.pagespeed.cf.TDE8PcM6TR.css

place display:none there in that css.

Best Regards,
hellorain.



Raincreatives - Virtuemart & Mobile Commerce Experts

tomphillipspcs

I've ended up with this - that seems to work OK, bu will it get overwritten if I update virtuemart?

input.quantity-input{height:32px;width:25px;text-align:center;font-weight:700;padding:2px;display: none;}
span.quantity-controls{width:24px;float:left;padding-top:1px;margin:0 0 0 4px;display: none;}

#b-area .quantity-input.js-recalculate {
   width: 32px !important;
   height: 32px !important;
   -webkit-border-radius: 100% !important;
   -moz-border-radius: 100% !important;
   border-radius: 100% !important;
  display: none;
}