How to change the default position for "Add to cart" button

How to change the default position for "Add to cart" button, in list view mode, on category page (OpenCart 1.5.4.1)?
I want to move it under the price like in image.

Thanks,
Marius

add <br/> before AddToCart button

Hello,

First, keep in mind that there are two <div> tags controlling the display of the "cart button" and the other one is "image and description"
The first div with a class of "right" holds the cart button and the text bellow it: wish list and compare.
The second div with a class of "left" holds the picture and description.
In order to do that modification with CSS you would have to make the image a little bigger, so that the price and the 'add to cart' button won't be smashed one on top of the other. You could modify the size of the image in the admin panel under images.
Then, this are the changes that I suggest you could do within the 'stylesheet.css' CSS:
Line 823, (will modify the div with class 'right') add the following:
position: relative;
top: 30px;
Line 855, (will modify the 'price' class) this one contains only the price, add the following:
position: relative;
right: -100px;
top: -5px;

You could play with the position settings yourself accordingly to the layout you are modifying, don't forget to make a back up of the stylesheet.css in case you decide to keep the original look.

Thanks

zh

I will try this.

Thanks a lot.
Marius

@ zuhenry
I made the changes you suggest in the 'stylesheet.css' file and it work, but I didn't understand which images you mean exactly.
"You could modify the size of the image in the admin panel under images"

Anyway it work, but now I have an other problem. I don't know how to increase the width of the description, to fill the remained empty space.

Thanks
Marius

CZechBoY wrote:add <br/> before AddToCart button

No offense to you, CZechBoY, because unfortunately, you are right...

The big problem is that OC templates are still written using poor markup habits left over from the '90s. HTML4 "transitional" DOCTYPES were written specifically to push people toward proper, semantic markup. Here we are with HTML5 and CSS3 firmly established and were still forced to resort to line breaks in the OC markup to position presentational items. It makes customizing your store a nightmare, as I'm sure others have discovered.

A year or two a go I got so frustrated with this that I re-wrote all the templates in my OC to comply with modern standards and applied proper CSS so I could finally make my OC look right and behave well. Unfortunately, this left me orphaned from ever applying any of the future updates to OC because my templates did not incorporate the revisions that would be released, and I would have to rewrite everything over again each time I upgraded my installation. Of course, this whole process only took me a full day or two of text replacement, but who has time and patience to redo their work over and over because OC is stuck in the old days.

Don't get me wrong, I think OC is a great product and I am happy to use it. It's just counter-intuitive to focus so hard on features and yet ignore something so fundamental as good website design. We're not just selling stuff on OC, we're representing ourselves to the public. C'mon OC, lets "get with the program" and move into the 21st century with our markup.

Sorry to take advantage of the OP, but this is such a perfect example of this bigger problem. In the interest of contributing rather than simply griping, I will post my rewritten templates (although they are about 18 month's old now) if anybody wants to see them. I can post them in a new thread, just ask. Thanks for reading my rant.

OC has DTD HTML5 now...

if you want upgrade you must read what is upgraded and where are changes

To modify the size of the images that are displayed by OC, you go to the control panel, >System>Settings>"select your store">Image Tab.

There you adjust the size of the images displaying in OC.

ZH