[Skip to main content](#vessel-content) # Add to Cart styling ## - **[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")** - [![jcwerb's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4458.jpg)](/forum/user/4458-jcwerb "View jcwerb's Profile") Topic Author - [ Offline](/forum/user/4458-jcwerb) Less More - Posts: 33 - Thank you received: 0 - - 14 years 10 months ago [\#31988](#31988) by [jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile") *[Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#31988 "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")* was created by *[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")* 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 image missing http://www.hikashop.com/media/kunena/attachments/legacy/images/screenshot-20111207.png - [ ![screenshot-20111207.png](/forum/attachment/2196) ](/forum/attachment/2196 "...t-20111207.png") [ ](/forum/attachment/2196?download=1 "...t-20111207.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 14 years 10 months ago [\#32022](#32022) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#32022 "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, Are you sure that you're displaying your buttons as links and not buttons (there is the option "Button style" in the Display tab of the configuration to change that) ? That would explain why your CSS is not applied. To align the dropdown to the right, you could do like that: .hikashop_product_characteristics_table{ width:100%; } .hikashop_product_characteristics_table td{ text-align:right; } For the width of the dropdown, the class name is dynamic. You should use firebug to get it and apply a width on it. And to align the add to cart button on the right: .hikashop_product_stock table{ width: 300px; float: right; } Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Comdev](/forum/user/2314-comdev "View Comdev's Profile")** - [![Comdev's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2314-comdev "View Comdev's Profile") - [ Offline](/forum/user/2314-comdev) Less More - Posts: 8 - Thank you received: 0 - - 14 years 10 months ago [\#32066](#32066) by [Comdev](/forum/user/2314-comdev "View Comdev's Profile") Replied by *[Comdev](/forum/user/2314-comdev "View Comdev's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#32066 "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](http://www.compostablegreenbag.co.uk/index.php/2011-11-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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")** - [![jcwerb's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4458.jpg)](/forum/user/4458-jcwerb "View jcwerb's Profile") Topic Author - [ Offline](/forum/user/4458-jcwerb) Less More - Posts: 33 - Thank you received: 0 - - 14 years 10 months ago [\#32068](#32068) by [jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile") Replied by *[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#32068 "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")* 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 image missing http://www.hikashop.com/media/kunena/attachments/legacy/images/screenshot1-20111208.jpg - [ ![screenshot1-20111208.jpg](/forum/attachment/2201) ](/forum/attachment/2201 "...1-20111208.jpg") [ ](/forum/attachment/2201?download=1 "...1-20111208.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")** - [![jcwerb's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4458.jpg)](/forum/user/4458-jcwerb "View jcwerb's Profile") Topic Author - [ Offline](/forum/user/4458-jcwerb) Less More - Posts: 33 - Thank you received: 0 - - 14 years 10 months ago [\#32071](#32071) by [jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile") Replied by *[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#32071 "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")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 14 years 10 months ago [\#32100](#32100) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#32100 "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, @Comdev: I can see that you added the word "price" via a translation override. But for prices, if you just what that on the product page, you should rather edit the file "show" of the view "product" and add your text just after : <span id="hikashop_product_price_main" class="hikashop_product_price_main"> @jcwerb: If you want to fix the width of the characteristic dropdowns you can do that with CSS too: .hikashop_product_characteristics_table select{ width: 300px; } For the add to cart button, that's because you should do: .hikashop_product_page a.hikashop_cart_button,.hikashop_product_page a.hikashop_cart_button:hover{ instead of: a.hikashop_cart_button, a.hikashop_cart_button:hover{ If you want to remove the images on the checkout, you should turn off the option "Show image" in the Checkout tab of the configuration. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")** - [![jcwerb's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4458.jpg)](/forum/user/4458-jcwerb "View jcwerb's Profile") Topic Author - [ Offline](/forum/user/4458-jcwerb) Less More - Posts: 33 - Thank you received: 0 - - 14 years 9 months ago [\#36665](#36665) by [jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile") Replied by *[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#36665 "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 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: Code: {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 However, this does not work when I add it to the name label of the custom field. How can I achieve the same in the custom fields? Many thanks for your help! image missing http://www.hikashop.com/media/kunena/attachments/legacy/images/screenshot-20120125.jpg - [ ![screenshot-20120125.jpg](/forum/attachment/2498) ](/forum/attachment/2498 "...t-20120125.jpg") [ ](/forum/attachment/2498?download=1 "...t-20120125.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 14 years 9 months ago [\#36730](#36730) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#36730 "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")* For that you should use a translation override. Int he label of your custom field, enter that: MY_FIELD Then, in your language override (in the Language tab of the configuration of HikaShop) add this: MY_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" Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")** - [![jcwerb's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4458.jpg)](/forum/user/4458-jcwerb "View jcwerb's Profile") Topic Author - [ Offline](/forum/user/4458-jcwerb) Less More - Posts: 33 - Thank you received: 0 - - 14 years 9 months ago [\#36792](#36792) by [jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile") Replied by *[jcwerb](/forum/user/4458-jcwerb "View jcwerb's Profile")* on topic *[Re: Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#36792 "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")* Many thanks, that works brilliantly ![:-)](/media/kunena/emoticons/3.png ":-)") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile")** - [![MariettoR's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-13-2.jpg)](/forum/user/12361-mariettor "View MariettoR's Profile") - [ Offline](/forum/user/12361-mariettor) Less More - Posts: 4 - Thank you received: 0 - - - - 13 years 8 months ago [\#89487](#89487) by [MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile") Replied by *[MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile")* on topic *[Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#89487 "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 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 --- "do or do not. there is no try" Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile")** - [![MariettoR's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-13-2.jpg)](/forum/user/12361-mariettor "View MariettoR's Profile") - [ Offline](/forum/user/12361-mariettor) Less More - Posts: 4 - Thank you received: 0 - - - - 13 years 8 months ago [\#89543](#89543) by [MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile") Replied by *[MariettoR](/forum/user/12361-mariettor "View MariettoR's Profile")* on topic *[Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#89543 "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")* 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! --- "do or do not. there is no try" Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Spanka](/forum/user/18221-spanka "View Spanka's Profile")** - [![Spanka's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/18221-spanka "View Spanka's Profile") - [ Offline](/forum/user/18221-spanka) Less More - Posts: 1 - Thank you received: 0 - - 13 years 3 months ago - 13 years 3 months ago [\#114603](#114603) by [Spanka](/forum/user/18221-spanka "View Spanka's Profile") Replied by *[Spanka](/forum/user/18221-spanka "View Spanka's Profile")* on topic *[Add to Cart styling](/forum/4-how-to/31988-add-to-cart-styling#114603 "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")* 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: Code: $chromePath = JPATH_THEMES.DS.$app->getTemplate().DS.'html'.DS.'hikashop_button.php'; Can I just create a copy of cart.php and put it my templates/[template-name]/html folder? EDIT: as a quick workaround, you can just edit /templates/[your-template-name]/html/product/quantity.php (or wherever else you need to change buttons) by editing the displayButton call. From this: Code: echo $this->cart->displayButton(JText::_('ADD_TO_CART'),'add',$this->params,$url,$this->ajax,'',$max,$min); To this (note the extra paramater on the end - I'm adding a class "button"): Code: echo $this->cart->displayButton(JText::_('ADD_TO_CART'),'add',$this->params,$url,$this->ajax,'',$max,$min,'button'); The class parameter immediately follows the min parameter. This approach allows you to add a class to a given button call, which you can then override with CSS. In my case, I'm adding the class of "button" and completely removing Hika styling as my themes (by RocketTheme) already have a bundle of good to go styling ready for anything. Last edit: 13 years 3 months ago by [Spanka](/forum/user/18221-spanka "View Spanka's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzMxOTg4LWFkZC10by1jYXJ0LXN0eWxpbmc/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.307 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)