[SOLVED] add to cart button position problem

[ehappylucky05]

Thanks guys. I just noticed few problems on this page:

1. on this page http://www.hootiebro...arch_query=suri

the "Add to Cart" and price for first iteam are align wrongly, how to fix this problem?

 

2. how to get rid of the "Compare" button?

 

On this page:

http://www.hootiebro...roller=category

3. How to get rid of the white spaces for the top image?

[ehappylucky05]

Any help from anyone? Thanks a lot in advance!

[vekia]

1) where you want to move the add to cart button?

2) in the product-list.tpl file you can remove the code related to the compare button, code looks like:

{if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare">
  <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/>
  <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
 </p>
   {/if}

- you can comment it.

3. you need to use correct width and height image settings under the preferences > images tab.

Size should be proportional to image size that you uploading. Or just turn "PNG" mode (in the same tab) and regenerate thumbnails

[ehappylucky05]

1) where you want to move the add to cart button?

2) in the product-list.tpl file you can remove the code related to the compare button, code looks like:

{if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare">
  <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/>
  <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
 </p>
{/if}

- you can comment it.

3. you need to use correct width and height image settings under the preferences > images tab.

Size should be proportional to image size that you uploading. Or just turn "PNG" mode (in the same tab) and regenerate thumbnails

Hi,

I just want to move the "Add to cart" button and the price for the first item to be above the image of second item. Right now, the image of second item is in between of these 2 buttons.

[vekia]

i checked your website and everything looks well now, problem solved?

[ehappylucky05]

i checked your website and everything looks well now, problem solved?

hi, no, problem not solve. I am using chrome, the price and add cart still separated by the thumbnail of the second item.

[Jiten rash (away)]

can u paste product list.tpl

[vekia]

open file: /themes/humbleshop/css/themes/style.css

near line 1330 you've got:

 

.product_details_wrap .info {
background: none repeat scroll 0 0 #472015;
border: 1px solid #99694B;
color: #FFFFFF;
float: right;
font-size: 16px;
line-height: 18px;
margin-right: 20px;
padding: 7px;
}

 

change float:right; to float:left;

[Jiten rash (away)]

On this page:

http://www.hootiebro...roller=category

3. How to get rid of the white spaces for the top image?

to remove white space edit that photo on paint or photoshop select rectangle tool and crop

Edited August 20, 2013 by Jiten rash (see edit history)

[vekia]

2. how to get rid of the "Compare" button?

 

 

alternative (proper) way to disable compare button

preferences > products tab in your back office, fill field "product comparision" with 0

 

[ehappylucky05]

open file: /themes/humbleshop/css/themes/style.css near line 1330 you've got:

 .product_details_wrap .info { background: none repeat scroll 0 0 #472015; border: 1px solid #99694B; color: #FFFFFF; float: right; font-size: 16px; line-height: 18px; margin-right: 20px; padding: 7px; } 

change float:right; to float:left;

Now, the image of second item is middle aligned, how to make that image left aligned, so that it's the same column as the 1st image.

http://www.hootiebrown.com/shopping/index.php?controller=search&orderby=position&orderway=desc&search_query=Suri+

 

same with this

http://www.hootiebrown.com/shopping/index.php?controller=search&orderby=position&orderway=desc&search_query=summer

except the 1st image, all other images are middle aligned. very strange

[vekia]

add:

clear: both;
overflow: hidden;

 

to the class: .ajax_block_product

[ehappylucky05]

1) where you want to move the add to cart button? 2) in the product-list.tpl file you can remove the code related to the compare button, code looks like:

 {if isset($comparator_max_item) && $comparator_max_item}
{l s='Select to compare'}
{/if} 

- you can comment it. 3. you need to use correct width and height image settings under the preferences > images tab. Size should be proportional to image size that you uploading. Or just turn "PNG" mode (in the same tab) and regenerate thumbnails

Vekia,

This is my product-list.tpl code, I think the compare has been removed, but it still shows up on

pages such as

http://www.hootiebrown.com/shopping/index.php?controller=search&orderby=position&orderway=desc&search_query=summer

 

##################################################

{*

* 2007-2013 PrestaShop

*

* NOTICE OF LICENSE

*

* This source file is subject to the Academic Free License (AFL 3.0)

* that is bundled with this package in the file LICENSE.txt.

* It is also available through the world-wide-web at this URL:

* http://opensource.org/licenses/afl-3.0.php

* If you did not receive a copy of the license and are unable to

* obtain it through the world-wide-web, please send an email

* to [email protected] so we can send you a copy immediately.

*

* DISCLAIMER

*

* Do not edit or add to this file if you wish to upgrade PrestaShop to newer

* versions in the future. If you wish to customize PrestaShop for your

* needs please refer to http://www.prestashop.com for more information.

*

* @author PrestaShop SA <[email protected]>

* @copyright 2007-2013 PrestaShop SA

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

* International Registered Trademark & Property of PrestaShop SA

*}

 

{if isset($products)}

<ul id="product_list" class="clear">

{foreach from=$products item=product name=products}

<article class="ajax_block_product">

<div class="view view-thumb">

{if isset($product.new) && $product.new == 1}<div class="new-icon">{l s='New'}</div>{/if}

{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE} <div class="sell-icon">{l s='Sale'}</div>{/if}

 

<a href="{$product.link}" title="{$product.name|escape:html:'UTF-8'}" class="product_image"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.name|escape:html:'UTF-8'}"/></a>

 

</div>

 

<div class="product_details_wrap">

<h4><a href="{$product.link}">{$product.name|strip_tags|truncate:22:'...'}</a></h4>

<p class="desc">{$product.description_short|strip_tags|truncate:55:'...'}</p>

 

 

{if $product.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE}<p class="price_container"><span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span></p>{else}<div style="height:21px;"></div>{/if}

 

 

 

 

{if ($product.id_product_attribute == 0 OR (isset($add_prod_display) AND ($add_prod_display == 1))) AND $product.available_for_order AND !isset($restricted_country_mode) AND $product.minimal_quantity == 1 AND $product.customizable != 2 AND !$PS_CATALOG_MODE}

{if ($product.quantity > 0 OR $product.allow_oosp)}

<a class="exclusive ajax_add_to_cart_button info" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' }">{l s='Add to cart'}</a>

{else}

<span class="exclusive">{l s='Out of Stock' }</span>

{/if}

 

{/if}

 

 

 

</div>

 

 

 

</article>

{/foreach}

</ul>

{/if}

[ehappylucky05]

add:

clear: both;
overflow: hidden;

 

to the class: .ajax_block_product

which .css file contained ajax_block_product, i've searched through the entire prestahop folder, can't find any .css file that has this.

[vekia]

you can create this .ajax_block_product anywhere you want (any css file included to the product list page)

 

+ i don't see compare button on search page

[ehappylucky05]

you can create this .ajax_block_product anywhere you want (any css file included to the product list page)

 

+ i don't see compare button on search page

Vekia,

Go to

http://www.hootiebrown.com/shopping/index.php?controller=search&orderby=position&orderway=desc&search_query=suri

you will see compare at the bottom of the page (next the the 'Add To Cart') button of second item

[ehappylucky05]

which .css file contained ajax_block_product, i've searched through the entire prestahop folder, can't find any .css file that has this.

Thanks, this fixed the align issue. If you can show me how to get rid fo the compare, then, we can close this thread.

[vekia]

okay, and you disabled comparing feature in the back office?

[ehappylucky05]

okay, and you disabled comparing feature in the back office?

Thanks!!

I went to Preferences tab and then on the subtab labeled Products. On the next page find the option Maximum number of items for comparison. It is set to three by default. To disable the feature just change it to zero and click the Save button

[vekia]

thats correct thanks

im going to mark this topic as solved

best regards