[TUTORIAL] how to change add to cart button size and style

[vekia]

Many e-shop owners, which use Prestashop store in 1.5.x versions said, that the standard template "add to cart" button located in product page is very small. I think exactly the same, so i decided to write little tutorial realted to this case. I will show you how to change button size and layout. I belive, that my tutorial will help you and you will be able to create personalized button, which will looks exactly as you want.

You can read tutorial here: Change the size & style of add to cart button in prestashop

[vekia]

Thank you, designers often draw the product page, with large buttons to add to cart

 

you've got right, but default one is very small (many of my customers want to enlarge it very often)

[go2pub]

Thanks Vekia

Nice little tutorial, just wondering where the bg image is stored to change the button colour.

Thanks

Nigel

[vekia]

Thanks Vekia

Nice little tutorial, just wondering where the bg image is stored to change the button colour.

Thanks

Nigel

 

 

hello,

path to the button background: /themes/default/img/bg_bt.gif

[HavanA]

Hi, thanks for this tutorial.

After changing several items and colors on my default theme and making an own add-to-cart button I tried to fit this new button and enlarge the add-to-cart-button according to this tutorial. Could it be that the location/file where these adjustments should be made has changed? I am using 1.5.6.1.

I need to adjust my button, but when I follow the procedure above nothing changes.

 

Any help is much appreciated.

[vekia]

please share url to page where you applied these changes

it will be much easier to say something more about that

[HavanA]

the url is: www.asadin.nl/presta

[vekia]

you've got ccc for css files

rebuild this file (minifed css stylesheet) and it should work then

[HavanA]

Thanks! The CCC thing did it.

[vekia]

i can confirm, works well now:

[Salus]

Hello, guys, very useful info, vekia

But what if I want to change the add to cart button size in the products peview list, then I`d have to change the  
prduct-list.tpl I presume? Specially this part below is refering to add to cart button?

 

1. {if isset($static_token)}
2. <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
3. {else}
4. <a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
5. {/if}
6. {else}
7. <span class="exclusive"><span></span>{l s='Add to cart'}</span><br />

I`d like to make it smaller both the addtocart, bot the view buttons showing up in a product preview... what should I change in this code?

Thanks in advance

Edited February 13, 2014 by Salus (see edit history)

[vekia]

yes, this part is related to add to cart button, and styles of this button you can find here themes/default/css/product_list.css (if you use default theme)

[Salus]

I am really confused now. I tried editing the label "add to cart" in product-list.tpl, and all my page gone blank. Ok, ctrl+z undo, then commented out an entire section in the same file refering to cart and does absolutly no change 

 

/*{if isset($static_token)}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{else}

<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

{/if}

{else}

<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />*/

 

Ok, now I am very confused, who is in charge of my style, .tpl or .css?

Please anyone point me to some comprehensive css tutorial (pm if necessary), I`m missing basic concepts here. I spent 3 nights on googling out every command and syntax that I found onmy in css and tpl files, and still do not understand most basic things. Am I stupid?  It`s like beeing forced to talk chinese - but I dont speak chinese

[vekia]

/* */

it's not proper comment method in .tpl files

[Salus]

{*....*} is, thank you

Obviously, commenting out anything in .tpl does not solve anything, I get a blank page always...

(if designing webpages would be so easy, everyone would be a designer, aint? )

 

 

....

 

vekia, I found this, which I think solved ALL my problems, you're a genius, THANK YOU

http://mypresta.eu/en/art/developer/prestashop-products-list-grid-view.html

Edited February 13, 2014 by Salus (see edit history)

[vekia]

thank you for your kind words,

i totally forgot about this guide

indeed, it looks like it's a perfect solution for you

 

thanks for informations

[ZoZo21]

Hello ,

Help me plase, i have a padding or i dont know what, my add to cart button is not align,

I want to align all add to cart button in 1 line.

 

Here is the url:http://www.sporton.ro/index.php

[vekia]

what you exactly changed ?

[AldoG]

Dear Vekia

I am trying to do a cart appearing like http://addons.prestashop.com/en/search?search_query=cart

for rollerdam.com so just like an ICON(1)

which is the exact php/tpl file to modify please? there was also a module called modifyCartinmenu which i cannot find anymore

PS 1.6.1.4

[wmh90]

In PS 1.6.1.5 is there a way to let the size responsive?

Not sure is right term, what I mean is adjustable to full size of where it's located instead of always 200px for example.

Because if you open a 200px button in the phone it will be too huge.

I just want it to fit all horizontal space where I placed it.

[vekia]

In PS 1.6.1.5 is there a way to let the size responsive?

Not sure is right term, what I mean is adjustable to full size of where it's located instead of always 200px for example.

Because if you open a 200px button in the phone it will be too huge.

I just want it to fit all horizontal space where I placed it.

 

 

hello

in prestashop 1.6.x default bootstrap theme already uses rules that resizes button to make it work on mobile devices etc

[ibrstore]

Dear

@vekia

How can i replace add to cart button to buy it now?

Or how can i insert Buy it now button?

Plz help me

For prestashop1.6.1.4

 

[dsaura]

Hi Vekia!

What I need is to make the button 100% wide in home page and in product. Is there a way?

I'm ussing prestashop default bootstrap and 1.6.1.3

[riyanyusufakhmad]

How to change “Add to Cart” buttons title in prestashop 1.6 ?

Edited July 27, 2016 by riyanyusufakhmad (see edit history)

[kamppa]

How to change “Add to Cart” buttons title in prestashop 1.6 ?

Localization -> Translations

[Pablo - eConecta]

Hello friends! Need help! How to change action in "add to cart" buttons? I want the customers goes directly the checkout...

I didn't find that option in the configuration. I have Prestashop 1.7 with Wherehouse theme and the add to cart button does just that, so the customer have to click on the checkout icon to see his cart and then again to start the checkout. 

Edited October 30, 2020 by Pablo - eConecta
gramatic (see edit history)