Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Moving Attribute above Add to cart

Moving Attribute above Add to cart

Locked

Views: 10,647

Results 1 to 20 of 22
This thread is locked. New replies are disabled.
12 Jan 2008, 3:13 PM
#1
enddes avatar

enddes

Zen Follower

Join Date:
Jan 2008
Posts:
116
Plugin Contributions:
0

Moving Attribute above Add to cart

Currently the attributes menu (in this case Small, Medium, Large, etc. --shirt size) is sitting to the left & below "add to cart." I would like to move it so it is above the "add to cart."
How would I do this?

12 Jan 2008, 4:17 PM
#2
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

I believe you would need to open includes/templates/YOUR_TEMPLATE/product_info_display.php

find:

<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<!--eof Attributes Module -->

and move the whole chunk up above:

<!--bof Add to Cart Box --> 

If you wanted them both on the right hand side, you would need to wrap them in <div> tags.

You could now find:

<!--bof Attributes Module --> 

and change to:

<!--bof Attributes Module --><div style="float:right"> 

and close the <div> tag:

</div><!--eof Attributes Module --> 

and do the same for the add to cart:

<!--bof Add to Cart Box -->  

changed to:

<!--bof Add to Cart Box --><div style="float:right">  

and the closing <div> tag:

</div><!--eof Add to Cart Box-->   

If you preferred, you could move the styles to the style sheet by giving the <div> an id such as: #attributeRight{float:right} #AddToCart{float:right} or whatever you want to call it.

12 Jan 2008, 4:43 PM
#3
enddes avatar

enddes

Zen Follower

Join Date:
Jan 2008
Posts:
116
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

That worked PERFECTLY!
Thanks so much!!!!

12 Jan 2008, 4:47 PM
#4
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Great, I was a little nervous it might mess things up for you. Happy to hear it worked!

23 Jan 2008, 7:05 AM
#5
soapygirl avatar

soapygirl

New Zenner

Join Date:
Jan 2008
Posts:
7
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Hi, this is my first post here, so be gentle. :)

I've been working on my cart for upwards of 12 hours straight (and that's just today), and I'm a bit bleary-eyed and feeling frazzled. What did me in was, I moved my attribute box above my add to cart box, using float: right. The problem is, the text "Please Choose" is still hanging out on the left side of the page. The text is fine, it's the position of the text that I need to change, and I can't find where that is located.

I'm sure it's probably something super-simple that I'm missing, and I'll feel pretty silly when someone tells me.

BTW, this forum is fantastic. I've been able to find answers to all of my questions up til now. I was hoping I wouldn't have to post and ask for help, but...those two words have me whipped!

TIA!

23 Jan 2008, 3:06 PM
#6
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Hi TIA,

Did you do anything to the tpl_modules_attributes.php file?

That file contains the following code:

<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

This line in specific is what controls the display of the text "Please Choose:"

<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>

It might be good to check in your style sheet what is in the brackets of this id:
#attribsOptionsText{} If it contains anything such as float:left, that would be a problem.
If you had to, you could set this to float:right, but that may not correctly solve the problem - then again it may. Also, if this ID doesn't exist, you may want to create it, and do the float:right thing as a test.

Sorry if this isn't very clear, I'm thinking about making rap music right now, and its difficult to concentrate on what I type!

23 Jan 2008, 3:11 PM
#7
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

The only other thing I could think of with your difficulties, is you may have forgot to close the <div> tag that you started at the beginning of the attributes code.

23 Jan 2008, 6:34 PM
#8
soapygirl avatar

soapygirl

New Zenner

Join Date:
Jan 2008
Posts:
7
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

rainthebat:

Hi TIA,
It might be good to check in your style sheet what is in the brackets of this id:
#attribsOptionsText{}
Also, if this ID doesn't exist, you may want to create it, and do the float:right thing as a test.!

rainthebat:

The only other thing I could think of with your difficulties, is you may have forgot to close the <div> tag that you started at the beginning of the attributes code.

Hi Rain,
Thanks! I didn't use any <div> tags; I was moving things via the CSS, and got it all moved except for that string of text.
Your #attribsOptionsText suggestion worked. It wasn't already there, so I added it in, and that nailed it.
Thanks for the solution. :smile:

24 Jan 2008, 8:03 PM
#9
hobocs avatar

hobocs

New Zenner

Join Date:
Oct 2006
Location:
Markham, Ontario
Posts:
47
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Thanks for posting...I needed this as well.
:smile:

28 May 2008, 8:57 PM
#10
marypotter avatar

marypotter

New Zenner

Join Date:
May 2008
Location:
Virginia Beach, Virginia, United States
Posts:
52
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

I was wondering if you would be able to help me out. I can't figure out how to move the add to cart to the left of my page.

http://intelligenttease.com/store/index.php?main_page=product_info&products_id=1

I tried putting it in a div tag <div style="float: left"></div> , but it still is on the right.

28 May 2008, 10:14 PM
#11
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Hi Mary,

Try this:

Take out the new <div style="float: left"></div> tag you made.

and change this div tag:

<div id="cartAdd">

to:

<div id="cartAdd" style="float:left">
29 May 2008, 4:18 AM
#12
marypotter avatar

marypotter

New Zenner

Join Date:
May 2008
Location:
Virginia Beach, Virginia, United States
Posts:
52
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

hey rainthebat,

thanks for your help and looking but i figured it out.

i went into the stylesheet.css and found

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
padding: 1em;
}

and changed the float to left. :-D

29 May 2008, 2:31 PM
#13
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

good to hear Mary, yeah, most of that stuff is hanging around in the stylesheet. It is only when you need a more hardcore customization that the php files need much editing.

9 Jun 2008, 9:46 AM
#14
james_o avatar

james_o

New Zenner

Join Date:
Oct 2007
Posts:
43
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

I have the same problem just moved the attributes and want both on the left

9 Jun 2008, 11:40 PM
#15
rainthebat avatar

rainthebat

Zen Follower

Join Date:
Feb 2007
Posts:
314
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

Hi James, could you provide a link to your online site so we can see where the problem area with the coding is?

If you download Mozilla Firefox and get the firebug extension, you'll be able to diagnose and solve these types of issues without help. When I analyze the code behind your page, that is what I am using - firebug with the firefox browser.

Sincerely,

~Rain

21 Jun 2008, 1:12 PM
#16
jlwco avatar

jlwco

New Zenner

Join Date:
May 2008
Posts:
5
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

I used the first instructions for moving the attributes above add to cart, but I was wondering how I can get the Add to Cart Quanity box (along with the add to cart button) below the Attributes and right justified ? As you can see right now it is to the left of the attributes dropdown.

See how it ended up here: http://chakrasbydidi.com/store/index.php?main_page=product_info&cPath=1_4&products_id=2

Here's what I did in the tpl_product_info_display.php (not all code included below):

<!--bof Attributes Module --><div style="float:right"> <!--bof Additional Product Images --><div style="float:left"> <!--bof Add to Cart Box --><div style="float:right">

any ideas?

9 Jun 2009, 7:25 PM
#17
ekaya avatar

ekaya

New Zenner

Join Date:
Jun 2009
Location:
KL
Posts:
16
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

can anyone help me, get the qty, & add to cart to drop below the size attribute, and everything line up nicely on the side of theproduct image?

http://www.farahbella.com/boutique/i...roducts_id=183

thanks!

11 Jun 2009, 3:02 PM
#18
ekaya avatar

ekaya

New Zenner

Join Date:
Jun 2009
Location:
KL
Posts:
16
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

nevermind , got it.

14 Jun 2009, 3:49 PM
#19
beavertje avatar

beavertje

New Zenner

Join Date:
Mar 2009
Posts:
53
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

I have problems with getting buy now button without quantity on my product information page.

look at the product list, works great.
Now, once you open a product, it shows quantities to add.
Either i want the button to add quantity above and lined out with the next/prev or i want the buy now button.

Can someone help me with this?
breaking my brain over it and cannot seem to get it to work.

pls help.

my store is www(dot) es se organic skincare(dot)nl

15 Oct 2009, 8:39 PM
#20
shrimp_gumbo_mmmhhh avatar

shrimp_gumbo_mmmhhh

Totally Zenned

Join Date:
Jun 2007
Location:
Texas, USA
Posts:
1,436
Plugin Contributions:
0

Re: Moving Attribute above Add to cart

rainthebat:

I believe you would need to open includes/templates/YOUR_TEMPLATE/product_info_display.php

find:

<!--bof Attributes Module --> <?php if ($pr_attr->fields['total'] > 0) { ?> <?php /** * display the product atributes */ require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?> <?php } ?> <!--eof Attributes Module -->
>  
> and move the whole chunk up above:
> ```
<!--bof Add to Cart Box --> 

If you wanted them both on the right hand side, you would need to wrap them in <div> tags.

You could now find:

<!--bof Attributes Module -->
>  
> and change to:
>  
> ```
<!--bof Attributes Module --><div style="float:right"> 

and close the <div> tag:

</div><!--eof Attributes Module -->

>  
> and do the same for the add to cart:
>  
> ```
<!--bof Add to Cart Box -->  

changed to:

<!--bof Add to Cart Box --><div style="float:right">
>  
> and the closing <div> tag:
> ```
</div><!--eof Add to Cart Box-->   

If you preferred, you could move the styles to the style sheet by giving the <div> an id such as: #attributeRight{float:right} #AddToCart{float:right} or whatever you want to call it.

When I do this with my 1.3.8a cart the attributes field totally disappears.... also the add to cart disappears....

So I tried this which also causes the attributes to disappear....

.wrapperAttribsOptions {
margin: 0.3em 0em;
float:right;
}