Forums / Templates, Stylesheets, Page Layout / How to move the add to cart button to the left side?

How to move the add to cart button to the left side?

Locked

Views: 3,456

Results 1 to 17 of 17
This thread is locked. New replies are disabled.
27 Nov 2010, 10:04 AM
#1
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

How to move the add to cart button to the left side?

http ://walteholly.com/store/index.php?main_page=product_info&cPath=1&products_id=3

How can I move the add to cart to the left side of the page?

Thanks.

27 Nov 2010, 10:23 AM
#2
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

How can I also align the picture to the left? It was on the left before, but it moved to the right. No idea how that happened.

27 Nov 2010, 10:35 AM
#3
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to move the add to cart button to the left side?

#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
float:left;
}

Add the red part. If you don't want the other images on the left, separate the productMainImage into its own rule.

#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #FFFFFF;
padding: 1em;
}

Change the right to left.

This stuff is pretty easy to find if you:

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

28 Nov 2010, 4:53 PM
#4
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Help! I added image handler add on... but the pictures are out of alignment where do I find where to align them? I downloaded the webdeveloper addon for firefox and tried almost everything... but can't seem to find where to adjust those...

htt p://walteholly.com/store/index.php?main_page=product_info&cPath=1&products_id=3

28 Nov 2010, 6:18 PM
#5
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: How to move the add to cart button to the left side?

Add to your stylesheet:

#productAdditionalImages {float:left; margin:8em 0 0 0;}

#productAdditionalImages img {margin:0 1em 0 0;}

Add the red part if you want space between the additional images.

28 Nov 2010, 6:54 PM
#6
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Hey, Thanks! It works!

If I want to change the font size at the header and footer area,

where About Us Privacy Policy Terms and Conditions Contact Us are...

Do I also need to add additional css information because i tried changing alot of font sizes in the stylesheet but unable to customize the size for each individual(header and footer)... cause when i change the font size the middle categories fonts also change to the same size...

Your help is greatly appreciated!

28 Nov 2010, 11:50 PM
#7
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to move the add to cart button to the left side?

You need to use specific class or id selectors in the style rules, so that they apply only to the areas you want.

The Web Developer's Information > Display Element Information button will show all of the class/id ancestors of an element so you know what to use.

1 Dec 2010, 11:02 AM
#8
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

"You need to use specific class or id selectors in the style rules, so that they apply only to the areas you want."

How do I do that if I have no knowledge of CSS? Can help me? Or where can I find information on that?

Thank you.

7 Dec 2010, 3:31 PM
#9
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Hi, thanks I managed to move the additional images to the side.

However, when I add more than 2 images, the images overlapped the Add to Shopping cart button.

How do I aligned the 3rd picture below the 2nd picture so it looks like it's aligned in a column.

7 Dec 2010, 3:36 PM
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to move the add to cart button to the left side?

To get the additional images in a column:

#productAdditionalImages {float:left; clear: left; margin:8em 0 0 0;}

8 Dec 2010, 9:15 PM
#12
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Hey, now that I've added
.additionalImages {clear: left;}

The additional images is lined 1 picture per line... how do i set to have 2 additional images per line??

Thanks!

8 Dec 2010, 9:59 PM
#13
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to move the add to cart button to the left side?

You would have to scrap the clear: left; for that, and set the width of #productAdditionalImages to fit two images.

10 Dec 2010, 1:14 AM
#14
annettea avatar

annettea

New Zenner

Join Date:
Dec 2010
Posts:
1
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Hello everyone I'm new to the website world I built my first website and the hosting company I use offer Zen Cart I uploaded it from my hosting site the only thing I having hard time understanding is.....my live website has add to cart buttons on many pages... how do I connect those to zen cart so that my clients can pay for there items?

10 Dec 2010, 9:06 AM
#15
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to move the add to cart button to the left side?

The short answer is, you don't.

Zen Cart is not built to be a back-end checkout processor, it is built to handle the whole display and management of your products.
If all you want is to check out and pay for your items, there are reported to be carts that work that way, and you should go look for one of them.
If you want to have integrated management of your products, sales, customer relations and inventory, Zen Cart can handle that, but you will need to put the products into Zen Cart's system and style its template to fit your design.

A look at what you have now will let us advise on how much work is involved.

10 Dec 2010, 2:15 PM
#16
sharontan avatar

sharontan

New Zenner

Join Date:
Nov 2010
Posts:
57
Plugin Contributions:
0

Re: How to move the add to cart button to the left side?

Hey, sorry but how do i set the width?

Right now it's

#productAdditionalImages {float:left; margin:-15em 0 0 0;}
.additionalImages {clear: left;}

I tried changing the margin but it just keeps pushing down the all the images, it doesn't extend the width.

10 Dec 2010, 3:58 PM
#17
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: How to move the add to cart button to the left side?

#productAdditionalImages {float:left; margin:-15em 0 0 0; width:300px;}
.additionalImages {clear: left;}
```And you probably want to reset the margin.