Forums / Templates, Stylesheets, Page Layout / how do i change the position of the add to cart button ?

how do i change the position of the add to cart button ?

Started by what44 on 30 Oct 2007, 2:25 PM · Views: 9,227

Results 1 to 20 of 40
30 Oct 2007, 2:25 PM
#1
what44 avatar

what44

Zen Follower

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

how do i change the position of the add to cart button ?

on my end product page. i want to be able to put the add to cart button where i want it. or can i do it using html?

30 Oct 2007, 4:41 PM
#2
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

In /includes/tempates/your_template/templates/tpl_product_info_display.php, the page elements are in blocks marked with comments like <!--bof xxxx-->. You can move blocks to the order you want them to display, and then fine-tune the layout using CSS with the block's class & id tags in your stylesheet.

A link to your site will let us give specific advice.

31 Oct 2007, 3:17 AM
#4
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

First, move the <!--bof Add to Cart Box--> code block to just below the <!--eof Product Price block --> in /includes/templates/your_template/templates/tpl_product_info_display.php, as advised before. After you do that, I will help you fine-tune the alignments.

31 Oct 2007, 5:35 PM
#5
kinget avatar

kinget

Zen Follower

Join Date:
Jul 2006
Posts:
154
Plugin Contributions:
0

Re: how do i change the position of the add to cart button ?

gjh42:

First, move the <!--bof Add to Cart Box--> code block to just below the <!--eof Product Price block --> in /includes/templates/your_template/templates/tpl_product_info_display.php, as advised before. After you do that, I will help you fine-tune the alignments.

hi ...

I need to move this box to the top rather than the bottom of the page. I thought there was an admin setting for that. Is this the only way to move it?

Thanks for your time.

Kinget

31 Oct 2007, 5:39 PM
#6
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

You're thinking of the product listing page (multiple products), where the multiple add button can be positioned. This is the product info page (one product).

31 Oct 2007, 5:59 PM
#7
kinget avatar

kinget

Zen Follower

Join Date:
Jul 2006
Posts:
154
Plugin Contributions:
0

Re: how do i change the position of the add to cart button ?

Hi Maybe so...

But my objective is to change the box on the product info page from the bottom to the top. I'm assuming them I need to actually adjust the template page and align using the css style sheet?

Thanks for your reply and energy.
Kinget

gjh42:

You're thinking of the product listing page (multiple products), where the multiple add button can be positioned. This is the product info page (one product).

31 Oct 2007, 6:12 PM
#8
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

I thought that was implied in my answer...
We don't generally advise PHP file changes when there is an admin alternative.
The template files are intended to be adjusted when required for a particular installation.

31 Oct 2007, 8:41 PM
#9
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

should that file be in my classic template foder because its not. i mad ethe changes and it made no difference which is werid.

gjh42:

First, move the <!--bof Add to Cart Box--> code block to just below the <!--eof Product Price block --> in /includes/templates/your_template/templates/tpl_product_info_display.php, as advised before. After you do that, I will help you fine-tune the alignments.

31 Oct 2007, 9:33 PM
#10
kinget avatar

kinget

Zen Follower

Join Date:
Jul 2006
Posts:
154
Plugin Contributions:
0

Re: how do i change the position of the add to cart button ?

I'm sorry if I'm confused by your answers.

gjh42:

I thought that was implied in my answer...
We don't generally advise PHP file changes when there is an admin alternative.
The template files are intended to be adjusted when required for a particular installation.

1 Nov 2007, 2:19 PM
#11
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

hi glenn

are u still able to help me with this? thanks.

Quote:
Originally Posted by gjh42 View Post
First, move the <!--bof Add to Cart Box--> code block to just below the <!--eof Product Price block --> in /includes/templates/your_template/templates/tpl_product_info_display.php, as advised before. After you do that, I will help you fine-tune the alignments.

1 Nov 2007, 2:41 PM
#12
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

The base version of tpl_product_info_display.php will be in /template_default/templates/. Copy that to /your_template/templates/tpl_product_info_display.php and make your changes there.

If you did edit the base copy, (not recommended practice), it should still take effect... unless you have an unedited copy in /your_template/templates/. Confused yet? :)

The template override system works by checking every time it wants to use a file for a copy of the file in your custom template. If there is no copy there, it uses the base copy. If there is a copy in your custom template, the base copy will never be used.

1 Nov 2007, 5:16 PM
#13
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

very confused! :)

im using the classic template and over writing what ever code is there. and ive saved it to the classic template.

can it be done using css only and this file and css?

thanks

2 Nov 2007, 4:52 AM
#14
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

In a static HTML page, you could easily do all the positioning with CSS. However, Zen Cart pages are built dynamically and can change in size depending on the product, which makes absolute or relative positioning much trickier or in some cases impossible. The file edit under discussion is really the only practical way to go.

So we have to figure out why this edit is not taking effect. For starters, what is the complete filepath to your tpl_product_info_display.php? Next, please post the part of your tpl_product_info_display.php including say 10 lines before & after the add to cart block. Use ```
[php] and [/php]

5 Nov 2007, 10:38 PM
#15
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

i dont knw which tempate its calling or which i should edit, so im inc. al of them. this url actualy shows an error.

http://explodingchickenrecords.com/zencart/includes/templates/classic/tpl_product_info_display.php

http://www.explodingchickenrecords.com/zencart/includes/templates/template_default/templates/tpl_product_info_display.php

http://www.explodingchickenrecords.com/zencart/includes/templates/YOURTEMPLATE/templates/tpl_product_info_display.php

displays the error:

Fatal error: Call to undefined function: zen_draw_form() in D:\inetpub\explodingchickenrecords\zencart\includes\templates\YOURTEMPLATE\templates\tpl_product_info_display.php on line 19

hope u can hep me. thanks.

code

<div class="centerColumn" id="productGeneral"> <!--bof Form start--> <?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product'), 'post', 'enctype="multipart/form-data"') . "\n"; ?> <!--eof Form start--> <?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?> <!--bof Add to Cart Box --> <?php if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') { // do nothing } else { ?>
        <?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
        if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
          // hide the quantity box and default to 1
          $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        } else {
          // show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        }
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

?>

<?php if ($display_qty != '' or $display_button != '') { ?>
<div id="cartAdd">
<?php
  echo $display_qty;
  echo $display_button;
        ?>
</div> <?php } // display qty and button ?> <?php } // CUSTOMERS_APPROVAL == 3 ?> <!--eof Add to Cart Box--> <!--bof Category Icon --> <?php if ($module_show_categories != 0) {?> <?php /** * display the category icons */ require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?> <?php } ?> <!--eof Category Icon --> <!--bof Prev/Next top position --> <?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?> <?php /** * display the product previous/next helper */ require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?> <?php } ?> <!--eof Prev/Next top position--> <!--bof Main Product Image --> <?php if (zen_not_null($products_image)) { ?> <?php /** * display the main product image */ require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?> <?php } ?> <!--eof Main Product Image-->
6 Nov 2007, 9:36 AM
#16
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

The error is meaningless - these files are not meant to be used in isolation so they will throw errors when called that way.

You have the classic template active, but the filepath you show is wrong. It should be /includes/templates/classic/templates/tpl_product_info_display.php, not /includes/templates/classic/tpl_product_info_display.php.

/template_default/ and /YOURTEMPLATE/ both have the correct filepath.

6 Nov 2007, 11:15 AM
#17
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

is it going to make any difference thou, putting that file in a template folder. yes better for organisation mayb. can it be left where it is?

ive got the add to cart to move up to the top, but because im using html description, its seems to be still showing up underneath my html description blk, see http://explodingchickenrecords.com/zencart/index.php?main_page=product_music_info&cPath=66&products_id=181

and if u look at a product page with no html long description (pic any other product), it appears neat the top. but i want to be able to fine tune this and put directly underneath the price. i will b changing the add to cart button to a small image soon. show this may help as well.

7 Nov 2007, 6:00 AM
#19
gjh42 avatar

gjh42

Black Belt

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

Re: how do i change the position of the add to cart button ?

The file location (in the /classic/templates/ folder instead of up in the /classic/ folder) is not just good organization, it is essential. Zen Cart is smart, but it is not psychic - it only knows to use a file if it is in the exact place expected.

To move the buy button to just below the price, move the whole <!--bof Add to Cart Box --> code block up to just below <!--eof Product Price block -->. That's all there is to it.

7 Nov 2007, 1:11 PM
#20
what44 avatar

what44

Zen Follower

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

Re: how do i change the position of the add to cart button ?

hwo do i fine tune the position using css? 6px from left, etc?