[Solved] Put the order button right next to the price

[ruben6]

At the moment my order button is slightly below the fold on some regular used resolutions (1280*800). Therefore I'm now trying to get the order button on the same height as the price. This with the price and quantity to the left and the order button next to it on the right.
It shouldn't be too difficult to fix but I can't seem to get the order button right next to the quantity and price. I can't get it on the same height as the price which doesn't look right design wise.

Does anyone have a solution for this?

Here is an example of a product page that I'm trying this for: http://www.ruconnected.nl/kabels/15-hdmi-kabel.html

[Carolina Custom Designs]

Please take a look at the image and see if this is what you are wanting to do. If so, then, yes, I have the solution.

Thanks!

Marty Shue

[ruben6]

That's right what I'm trying to do! I already tried it in firebug but couldn't figure it out. If you could post the solution that would be a major help. Thanks a lot!

[Carolina Custom Designs]

I'll give it a try.

You need to put the order button inside the paragraph with the price as follows:

<!-- prices -->



€ 22,95
                       <!-- de tekst incl. BTW laten zien incl. BTW-->
                                                        
           <input type="submit" name="Submit" value="Bestellen"></p>

The rest is just a matter of styling. Just make sure your styling matches the below:

#primary_block form#buy_block {
   float: right;
   font-size: 1.1em;
   margin-top: 1em;
   width: 375px;
}

#primary_block form#buy_block p.price {
   float: none;
   font-size: 1.05em;
   margin: 0;
   text-align: right;
   width: 100%;
}

input.button_cart, input.button_cart_disabled {
   background-image: url("../img/button-cart.jpg");
   background-position: left top;
   background-repeat: no-repeat;
   border: medium none;
   color: #FFFFFF !important;
   cursor: pointer;
   display: block;
   float: right;
   font-size: 16px !important;
   font-weight: 700;
   height: 50px;
   letter-spacing: -1px;
   line-height: 50px;
   padding-right: 10px;
   text-align: right;
   text-decoration: none !important;
   width: 200px;
}

I hope this helps. That's how I got the result you see in the image.

Marty Shue

[ruben6]

Thanks a lot, although I can't seem to get it to work. If I do these changes in firebug the quantity field always stays below the order button instead of next to it. In your picture that doesn't seem to be a problem. What am I missing here...

[Carolina Custom Designs]

Are you sure you floated the order button 'right'? This could cause what you described. Make sure to add float:right;

Marty Shue

[ruben6]

I got it to work, thanks a lot!

Now all my visitors can see the whole call to action button right away. I also made some other slight changes what do you think about it?

[Carolina Custom Designs]

That looks great! Glad it worked for you.

Marty Shue