Add to Cart styling

Hi Nicolas,

I'm trying to style the 'add to cart' area of my products pages, but running into a few problems that I can't find how to solve.

I want to use a custom buttom behind the words 'add to cart', set Button Style to CSS in the configuration area and edited this to suit my needs:

a.hikashop_cart_button, a.hikashop_cart_button:hover{
background-image:url("../images/button.jpg"));
width:158px;
height:27px;
color:#FFF;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
padding:5px 8px;
text-decoration:none;
cursor:pointer;
float:left;
white-space:nowrap;
text-transform:uppercase;}

However, dit has no effect whatsoever, still only see the text, no button.

Also I want to move the characteristics dropdown to the right of the content area, but keep the word 'size' to the left and make the options dropdown a lot wider, how can I achieve this? I want to move the add to cart button to the right as well underneath the dropdown. Been looking at css but can't find how to accomplish this, any help much appreciated!

Please see attached pic, this is how I've currently got it to look, but need to change to above description.

Many thanks for your help!
Johanna

Hi

I have a similar problem

I have just moved from Virtuemart to Hikashop Essential so am still feeling my way around what you can do

How do i style my add to cart area without affecting the mini-cart display?

e.g. on my site here www.compostablegreenbag.co.uk/index.php/...-26-17-00-55/caddies

I want the add to cart to line up price and Quantity - but on the minicart I don't want the word "price" just x items for £x

many Thanks

Thanks so much for your help, Nicolas. I've got the button to work, turns out I had a typo in the background-image css line, sorry!

A few more questions....

How do I make the dropdown field to have equal widths for all characteristics? Is that even possible? Please see attached screenshot to illustrate what I mean.

Also, now that my 'add to cart' button works, I notices it appears in the little pop up when item is added to cart, as well as in the mini-cart module and on the checkout page. I only want it to appear once on the product page. How do I fix that?


Thanks so much for your help!
Johanna

Sorry, another query....

How do I remove the 'image' field on the checkout page? It's on the far left next to 'name' in the list of items added to cart.

Many thanks!!
Johanna

Hi Nicolas,

Thank you very much for your help! I have now found out that too many characteristics makes the site fall over and is also a nightmare as prices have to be entered individually for many different combinations whilst I can just as well use custom fields on the products pages as many options are independent of price.

In attached screenshot you will see one characteristic on which pricing will be based: size. The quantities will be set in the 'manage variants' window and pricing will be derived from that.

The options below that are the custom fields which are independent of size/price. I want these to look the same as the characteristic name and inputbox style and also have the tooltip with the small 'i' icon. I tried adding the script like I have done for the characteristic in the name field:

{qluetip title=[<img src="../../../test/images/InfoButton1.jpg" style="float:right" />]}We accept files in various formats. Please see our FAQs for further information on sending artwork.{/qluetip}Send Artwork

Many thanks, that works brilliantly

Hi Nicolas, hi everybody

i've a little problem: i'm looking for the php file which generates the css class "hikashop_cart_button".

I need to cusomize the php file and NOT the CSS one, can you help me providing the path of this file?

Thanx in advance,

Best Regards,

Marietto

Ok, i found it! If anybody is interested, the path is /administrator/components/com_hikashop/heplers/cart.php and there look at the line 60!

bye,

Marietto!

Old topic bump!

MariettoR - thanks - saved me a lot of time searching for this! But I'm a bit hesitant to edit this - it's a core file. I notice in the code (line 35ish), it has:

$chromePath = JPATH_THEMES.DS.$app->getTemplate().DS.'html'.DS.'hikashop_button.php';

echo $this->cart->displayButton(JText::_('ADD_TO_CART'),'add',$this->params,$url,$this->ajax,'',$max,$min);

echo $this->cart->displayButton(JText::_('ADD_TO_CART'),'add',$this->params,$url,$this->ajax,'',$max,$min,'button');