Jump to content

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


Recommended Posts

addtocartsize.gif

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

  • Like 5

Share this post


Link to post
Share on other sites

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)

  • Like 1

Share this post


Link to post
Share on other sites

  • 9 months later...
  • 1 month later...

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.

post-741991-0-54250100-1390148799_thumb.jpg

Share this post


Link to post
Share on other sites

  • 4 weeks later...

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 by Salus (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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  :o

 
/*{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? :wacko: It`s like beeing forced to talk chinese - but I dont speak chinese ;)

Share this post


Link to post
Share on other sites

{*....*} 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? :P)

 

 

....

 

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 by Salus (see edit history)

Share this post


Link to post
Share on other sites

  • 1 year later...
  • 3 months later...
  • 6 months later...
  • 3 months later...

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...
  • 5 weeks later...
  • 1 month later...
  • 10 months later...
  • 3 years later...

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 by Pablo - eConecta
gramatic (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More