display the plus and minus buttons in the product details

hello, I would like to know how do I view the template instyle the plus and minus buttons on the product detail pages

Please open file template/html/com_virtuemart/productdetails/default.php and find this part :

Code: Select all

<span class="quantity-box">
                     <input type="text" class="quantity-input js-recalculate" name="quantity[]" onblur="check(this);"
                           value="<?php if (isset($this->product->step_order_level) && (int)$this->product->step_order_level > 0) {
                              echo $this->product->step_order_level;
                           } else if(!empty($this->product->min_order_level)){
                              echo $this->product->min_order_level;
                           }else {
                              echo '1';
                           } ?>"/>
                  </span>

Right after this closing span tag /span please include this code :

Code: Select all

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

Thanks!

Hello

I tried the code.

Why are the buttons only white fields? Why is not plus(+) and minus (-) not shown?

Thanks for your reply.

Our template design by default don't use this button so they are also not included in VirtueMart styles - if you want to display graphics there it is necessary to create +/- image files and set as a background for this elements.

Hi bkrztuk

Ok...I will prepare 2 image files...

But how should be the code if I have two image files ?

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

Code: Select all

.quantity-controls.quantity-plus {
background: url('path/to/plus/icon.png');
}

.quantity-controls.quantity-minus {
background: url('path/to/minus/icon.png');
}


Thanks bkrztuk

works fine

Hello

Quick question for this topic.

Is it possible to move the MINUS BUTTON behind the field which is shown the quantity ?

Please check enclosed the printscreen.

THX in advance

Did you try to float this buttons?

Code: Select all

.quantity-controls.quantity-plus,.quantity-controls.quantity-minus { float: right }

Hello bkrztuk

I use now this code:

Code: Select all

.quantity-controls.quantity-minus { float: right }

But how can I move the minus button behind the quantity field?

Enclosed the printscreen.

THX in advance for your help.

Sorry but I'm unable to check CSS styles based on some screenshot. This buttons are not default part of template so please provide me URL to your page so I can check styling.

URL: geschenkkorb24.ch

THX

Please add this code to override.css file in root/templates/gk_template_name/css directory :

Code: Select all

input.quantity-controls.quantity-minus,
input.quantity-controls.quantity-plus { display: inline-block; float: none; position: relative; top: 10px }


and then just remember to enable "Use override CSS" option in template advanced settings tab.

Hello bkrztuk

Thank you. I made small correction, cause it should be without "input". So here is my code which I am happy now:

Code: Select all

.quantity-controls.quantity-minus { display: inline-block; float: none; position: relative; top: 0px }