[Skip to main content](#vessel-content)

#   How to change ONLY the 'add to cart' button?

##

- **[tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")**
- [![tumbleweed's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/9977-tumbleweed "View tumbleweed's Profile") Topic Author
- [ Offline](/forum/user/9977-tumbleweed)

Less More

- Posts: 14
- Thank you received: 0
-
-

13 years 11 months ago -  13 years 11 months ago [\#75157](#75157) by [tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")  *[How to change ONLY the 'add to cart' button?](/forum/4-how-to/75157-how-to-change-only-the-add-to-cart-button#75157 "I would like to make the &quot;add to cart&quot; button a little bigger than the rest of the buttons and maybe a different color too.  I think I see where I can change the look of all of them together in the CSS, but I want to target this specific one and make it bigger and more noticeable from the ones next to it.  How can I do that?  Thanks.")* was created by *[tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")*

I would like to make the "add to cart" button a little bigger
than the rest of the buttons and maybe a different color too.

I think I see where I can change the look of all of them together
in the CSS, but I want to target this specific one and make it
bigger and more noticeable from the ones next to it.

How can I do that?

Thanks.

Last edit: 13 years 11 months ago by [tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzc1MTU3LWhvdy10by1jaGFuZ2Utb25seS10aGUtYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Eliot](/forum/user/1824-eliot "View Eliot's Profile")**
- [![Eliot's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar1824.png)](/forum/user/1824-eliot "View Eliot's Profile")
- [ Offline](/forum/user/1824-eliot)

Less More

- Posts: 2334
- Thank you received: 403
-
-

13 years 11 months ago [\#75208](#75208) by [Eliot](/forum/user/1824-eliot "View Eliot's Profile")  Replied by *[Eliot](/forum/user/1824-eliot "View Eliot's Profile")* on topic *[Re: How to change ONLY the 'add to cart' button?](/forum/4-how-to/75157-how-to-change-only-the-add-to-cart-button#75208 "I would like to make the &quot;add to cart&quot; button a little bigger than the rest of the buttons and maybe a different color too.  I think I see where I can change the look of all of them together in the CSS, but I want to target this specific one and make it bigger and more noticeable from the ones next to it.  How can I do that?  Thanks.")*

Hi there,

You're right, you'll have to add some css in System&gt;Configuration&gt;Display in the front end css file to do so.
Simply add the css property to the button's class. It should look like this:

.hikashop_cart_input_button{
/*your css*/
}

Remember that you can use your browser or some extension like firebug to spot the class and id you want to custom with css ![;)](/media/kunena/emoticons/11.png ";)")

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzc1MTU3LWhvdy10by1jaGFuZ2Utb25seS10aGUtYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")**
- [![tumbleweed's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/9977-tumbleweed "View tumbleweed's Profile") Topic Author
- [ Offline](/forum/user/9977-tumbleweed)

Less More

- Posts: 14
- Thank you received: 0
-
-

13 years 11 months ago -  13 years 11 months ago [\#75501](#75501) by [tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")  Replied by *[tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile")* on topic *[Re: How to change ONLY the 'add to cart' button?](/forum/4-how-to/75157-how-to-change-only-the-add-to-cart-button#75501 "I would like to make the &quot;add to cart&quot; button a little bigger than the rest of the buttons and maybe a different color too.  I think I see where I can change the look of all of them together in the CSS, but I want to target this specific one and make it bigger and more noticeable from the ones next to it.  How can I do that?  Thanks.")*

I believe that you might have specified the wrong class name.
Are you sure you didn't mean 'hikashop_cart_button'?

For instance I can place CSS in here to change the button.

a.hikashop_cart_button {
/* MY CSS */
}

BUT, my problem is that the changes are applied to more
than just the 'Add to cart' button. That way modifies other
buttons like 'Add to wishlist' as well.

I am trying to target ONLY the 'Add to cart' button.

What PHP file contains the actual code that is inserting this
'Add to cart' button into the page content?

Thanks.

Last edit: 13 years 11 months ago by [tumbleweed](/forum/user/9977-tumbleweed "View tumbleweed's Profile").

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzc1MTU3LWhvdy10by1jaGFuZ2Utb25seS10aGUtYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) 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")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86316
- Thank you received: 14276
-
-

13 years 11 months ago [\#75535](#75535) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: How to change ONLY the 'add to cart' button?](/forum/4-how-to/75157-how-to-change-only-the-add-to-cart-button#75535 "I would like to make the &quot;add to cart&quot; button a little bigger than the rest of the buttons and maybe a different color too.  I think I see where I can change the look of all of them together in the CSS, but I want to target this specific one and make it bigger and more noticeable from the ones next to it.  How can I do that?  Thanks.")*

In order to target only add to cart buttons, you should do like that:

.hikashop_product_stock a.hikashop_cart_button {
/* MY CSS */
}

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzc1MTU3LWhvdy10by1jaGFuZ2Utb25seS10aGUtYWRkLXRvLWNhcnQtYnV0dG9uP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install &amp; Update- Product &amp; Category Display- Content Creation- Sales and Orders- - Orders management- - Reports &amp; Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import &amp; Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel &amp; Slider- - Mass Actions- - Filters &amp; Search- - Discount &amp; 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.116 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)
