Add to Cart button width

[kylelondonuk]

Hi, does anybody know why the add to cart button width isn't wide enough when using CSS buttons? the others are all fine, and ive tried increasing it using pixels, ems, everything! as well as increasing the container DIV and reducing padding and margins, all that, none of it makes any impact at all! does anybody know why?

i've searched for this and see lots of questions about add to cart but not this specific inability to increase the width. (i've left it all at zen carts default, not messed with any code on the product display pages)

thanks!

Kyle

[joycebeck]

I searched and searched for the answer to that one, too, and this is what I found:

In /includes/functions/html_output.php, you'll find a function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') that builds the Submit buttons.

Change line 313 from this:
$style = ' style="width: ' . $width . 'px;"';

to this:
$style = ''; // $style = ' style="width: ' . $width . 'px;"';

To be clear, $style is set equal to empty single quotes.

Before this line of code, the approximate width of the button is computed, but it is trying to convert ems to pxs, and it's not accurate with the longer buttons.

Later on in this function, $style is used to build the Submit button. By blanking out the style value, the button is allowed to assume it's default width. If you don't like the results, play around with the variables on lines 306 and 307:

$min_width = 80; // this is the minimum button width, change the value as you like
$character_width = 6.5; // change this value depending on font size!

Also, in /includes/templates/custom-template/css/stylesheet_css_buttons.css, you can change the font size in line 20
font-size: 1.1em;

I hope this helps.
Joyce

[ethan666]

ahhh! I've been searching for the answer to this one for hours!!! was so happy i found it that just had to post a thank you.

[dpinkus]

Nearly 3 years later this is still a problem. I spent hours before I came across this thread. So thank you again.

I don't see though how the font-size: 1.1em; in stylesheet_css_buttons.css is even going to matter though? The function zenCssButton makes that calculation with just the length of the text * the character_width constant (defaults to 6.5). The net effect of this is that any css customization you do specific to a button (e.g. increasing the font size) are going to get wiped out at the browser by the "style="width: " clause unless your text is quite long.

Correct me if I am wrong, but won't this change get borked when you do an upgrade? (not that it should stop anybody from doing it, but it's just one of those things that has to get ported).... :)