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

#   Change "Add to cart"&amp;"Proceed to checkout" buttons

##

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

Less More

- Posts: 6
- Thank you received: 0
-
-

11 years 4 months ago [\#205665](#205665) by [nikosa](/forum/user/37718-nikosa "View nikosa's Profile")  *[Change "Add to cart"&amp;"Proceed to checkout" buttons](/forum/26-product-category-display/877687-change-add-to-cart-proceed-to-checkout-buttons#205665 "-- url of the page with the problem -- :   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  -- HikaShop version -- : 2.5 -- Joomla version -- : 3.4.1 -- PHP version -- : 5.4.8 -- Browser(s) name and version -- : Firefox 36.0.4  Hello,  Please I would like your help to change the Icons.  I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).  I would like to add different icons to every button.  Is it possible to do? I read and the similar posts, made the changes but without any success.  Please could you help me? The Url is:   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  Thank you very much in advance!  Best, Nikos")* was created by *[nikosa](/forum/user/37718-nikosa "View nikosa's Profile")*

-- url of the page with the problem -- : [ silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose](http://silverguitars.com/test/guitars-pickups/stratocaster-pickups/black-rose)
-- HikaShop version -- : 2.5
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.4.8
-- Browser(s) name and version -- : Firefox 36.0.4

Hello,

Please I would like your help to change the Icons.

I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).

I would like to add different icons to every button.

Is it possible to do?
I read and the similar posts, made the changes but without any success.

Please could you help me?
The Url is: [ silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose](http://silverguitars.com/test/guitars-pickups/stratocaster-pickups/black-rose)

[ ![add&#95;to&#95;cart&#95;button.png](/forum/attachment/25042) ](/forum/attachment/25042 "...art&#95;button.png")

Thank you very much in advance!

Best,
Nikos

- [ ![add&#95;to&#95;cart&#95;button.png](/forum/attachment/25042) ](/forum/attachment/25042 "...art&#95;button.png") [ ](/forum/attachment/25042?download=1 "...art&#95;button.png")

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

- **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")**
- [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")
- [ Offline](/forum/user/6861-mohamed-thelji)

Less More

- Posts: 12953
- Thank you received: 1778
-
-
-

11 years 4 months ago [\#205700](#205700) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")  Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[Change "Add to cart"&amp;"Proceed to checkout" buttons](/forum/26-product-category-display/877687-change-add-to-cart-proceed-to-checkout-buttons#205700 "-- url of the page with the problem -- :   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  -- HikaShop version -- : 2.5 -- Joomla version -- : 3.4.1 -- PHP version -- : 5.4.8 -- Browser(s) name and version -- : Firefox 36.0.4  Hello,  Please I would like your help to change the Icons.  I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).  I would like to add different icons to every button.  Is it possible to do? I read and the similar posts, made the changes but without any success.  Please could you help me? The Url is:   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  Thank you very much in advance!  Best, Nikos")*

Hello,
You're issue is probably coming from the CSS code that you used to add your add to cart image, can you tell me which CSS code did you use ?
Using that kind of CSS code for your product page will probably the job : Code:

.hikashop_inserted_product .hikashop_cart_button { YOUR_CSS_CODE }

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

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

Less More

- Posts: 6
- Thank you received: 0
-
-

11 years 4 months ago -  11 years 4 months ago [\#205908](#205908) by [nikosa](/forum/user/37718-nikosa "View nikosa's Profile")  Replied by *[nikosa](/forum/user/37718-nikosa "View nikosa's Profile")* on topic *[Change "Add to cart"&amp;"Proceed to checkout" buttons](/forum/26-product-category-display/877687-change-add-to-cart-proceed-to-checkout-buttons#205908 "-- url of the page with the problem -- :   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  -- HikaShop version -- : 2.5 -- Joomla version -- : 3.4.1 -- PHP version -- : 5.4.8 -- Browser(s) name and version -- : Firefox 36.0.4  Hello,  Please I would like your help to change the Icons.  I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).  I would like to add different icons to every button.  Is it possible to do? I read and the similar posts, made the changes but without any success.  Please could you help me? The Url is:   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  Thank you very much in advance!  Best, Nikos")*

Thank you Mohamed,

Please wait to check it.

Last edit: 11 years 4 months ago by [nikosa](/forum/user/37718-nikosa "View nikosa's Profile").

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

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

Less More

- Posts: 6
- Thank you received: 0
-
-

11 years 4 months ago [\#205909](#205909) by [nikosa](/forum/user/37718-nikosa "View nikosa's Profile")  Replied by *[nikosa](/forum/user/37718-nikosa "View nikosa's Profile")* on topic *[Change "Add to cart"&amp;"Proceed to checkout" buttons](/forum/26-product-category-display/877687-change-add-to-cart-proceed-to-checkout-buttons#205909 "-- url of the page with the problem -- :   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  -- HikaShop version -- : 2.5 -- Joomla version -- : 3.4.1 -- PHP version -- : 5.4.8 -- Browser(s) name and version -- : Firefox 36.0.4  Hello,  Please I would like your help to change the Icons.  I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).  I would like to add different icons to every button.  Is it possible to do? I read and the similar posts, made the changes but without any success.  Please could you help me? The Url is:   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  Thank you very much in advance!  Best, Nikos")*

Mohamed I use the frontend_custom.css and I added this code to change the color:

a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{
text-decoration:none;
color: #777777 !important;
cursor: pointer;
display: inline-block;
line-height: 18px;
margin: 5px;
padding: 3px 8px;
text-align: center;

text-shadow:none !important;
border:1px solid;
border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
border-radius:3px;
background-color: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eee));
background: -webkit-linear-gradient(top, #ffffff, #eee);
background: -moz-linear-gradient(top, #ffffff, #eee);
background: -o-linear-gradient(top, #ffffff, #eee);
background: linear-gradient(top, #ffffff, #eee);

border-color: rgba(11, 155, 0, 0.![8)](/media/kunena/emoticons/2.png "8)");
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(11,155,0,.6);

}

The problem is that when I try to change the add to cart button with my icon then the same icon is on the Proceed to checkout button, on the login button, on the register button, on the add coupon button and on the finish button.

Is there a way to have a different icon on all of these buttons?

Thank you Mohamed!

Nikos

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

Less More

- Posts: 86290
- Thank you received: 14268
-
-

11 years 4 months ago [\#205936](#205936) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Change "Add to cart"&amp;"Proceed to checkout" buttons](/forum/26-product-category-display/877687-change-add-to-cart-proceed-to-checkout-buttons#205936 "-- url of the page with the problem -- :   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  -- HikaShop version -- : 2.5 -- Joomla version -- : 3.4.1 -- PHP version -- : 5.4.8 -- Browser(s) name and version -- : Firefox 36.0.4  Hello,  Please I would like your help to change the Icons.  I'm trying to change the add to cart icon with the attached but when I add the background url to Css then it changes all of the icons (Proceed to cheout, register, add etc).  I would like to add different icons to every button.  Is it possible to do? I read and the similar posts, made the changes but without any success.  Please could you help me? The Url is:   silverguitars.com/test/guitars-pickups/s...r-pickups/black-rose  Thank you very much in advance!  Best, Nikos")*

Hi,

Sure. You just need to prefix your CSS with a main class.

So for example, for the buttons on the product page, you should replace:
a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button{

by:
.hikashop_product_page a.hikashop_cart_button, .hikashop_product_page a.hikashop_compare_button, .hikashop_product_page .hikashop_cart_input_button{

For the checkout buttons, it would be:
.hikashop_checkout_page a.hikashop_cart_button, .hikashop_checkout_page a.hikashop_compare_button, .hikashop_checkout_page .hikashop_cart_input_button{

If you look at the HTML of the pages with your browser inspector, you can see these classes on the main divs of the main area of the pages.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84Nzc2ODctY2hhbmdlLWFkZC10by1jYXJ0LXByb2NlZWQtdG8tY2hlY2tvdXQtYnV0dG9ucz90bXBsPW1hcmtkb3du) 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.216 seconds

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

[](#top)
