The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 08-10-2011, 04:08 PM
adityaviswanathan7's Avatar
adityaviswanathan7 is offline
 
Join Date: Jun 2011
Posts: 4
Default

How to change 'Add to Bag' button for specific products?


I sell a variety of products on my online store and have been pleased with Ecwid so far. Some of my products are available for pre-order (for which I have changed the Add to Bag button to a Pre-order button) but some of my other products in stock and available normally now. I wanted to find out how to change the Add to Bag button for specific products only.

Look forward to your responses.
  #2  
Old 08-11-2011, 07:53 PM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Default

Quote:
Originally Posted by adityaviswanathan7 View Post
I sell a variety of products on my online store and have been pleased with Ecwid so far. Some of my products are available for pre-order (for which I have changed the Add to Bag button to a Pre-order button) but some of my other products in stock and available normally now. I wanted to find out how to change the Add to Bag button for specific products only.

Look forward to your responses.
Yep, it is possible. Please refer to this thread: http://www.ecwid.com/forums/showthread.php?p=33112
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base
  #3  
Old 12-13-2011, 10:57 PM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Default

Sorry to be a annoying but once you have your product id of the item you want to change, what css would i enter to change its specific button?( I also want to change the add to bag buttons for specific products)
Thanks very much,
  #4  
Old 12-14-2011, 07:35 AM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Default

Quote:
Originally Posted by Daniel Forte View Post
Sorry to be a annoying but once you have your product id of the item you want to change, what css would i enter to change its specific button?( I also want to change the add to bag buttons for specific products)
Thanks very much,
How to change the button: http://kb.ecwid.com/w/page/21499933/...ag%22%20button

How to apply this change for one product only: http://kb.ecwid.com/w/page/46376921/...s%20in%20Ecwid
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base
  #5  
Old 12-14-2011, 12:27 PM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Exclamation

So would the code be something like:

div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering { background: transparent url(icons/add_to_bag2.png) no-repeat top center !important; } /* The "Add to bag" button in down state */ div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering { background: transparent url(icons/add_to_bag2.png) no-repeat bottom center !important; }

what am i missing here? Sorry im new to code.
thanks so much for your help.
  #6  
Old 12-16-2011, 10:18 AM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by Daniel Forte View Post
So would the code be something like:

div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering { background: transparent url(icons/add_to_bag2.png) no-repeat top center !important; } /* The "Add to bag" button in down state */ div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering { background: transparent url(icons/add_to_bag2.png) no-repeat bottom center !important; }

what am i missing here? Sorry im new to code.
thanks so much for your help.
You are on the right track. There are few insignificant errors though. Please read my comments below.

1. Since all of the desired changes should be applied to a particular product, you should add a selector 'div.ecwid-productBrowser-ProductPage-8228702' to the beginnings of each selector in the rules. Adding it only to the beginning of the whole code block is not enough.

2. As described in the article Eugene mentioned above in this thread, the image address 'icons/add_to_bag2.png' from the example should be replaced with the real absolute URL to your custom add to cart image (which should be publicly accessible via direct link).

So, after corrections, you code will look like this:
Code:
/* The "Add to bag" button in up state */
div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-up, 
div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-up-hovering { 
  background: transparent url(http://www.example.com/filename.png) no-repeat top center !important; 
} 

/* The "Add to bag" button in down state */ 
div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-down, 
div.ecwid-productBrowser-ProductPage-8228702 div.ecwid-AddToBagButton-down-hovering { 
  background: transparent url(http://www.example.com/filename.png) no-repeat bottom center !important; 
}
Again, please notice that the URL 'http://www.example.com/filename.png' in the code above should be replaced with a real URL of your image.
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
  #7  
Old 12-18-2011, 05:07 PM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Exclamation

Thank you so much Matvey but ive entered the code as you have said and replaced the image url with http://mesushi.squarespace.com/storage/buttons/e1.png - my new button but nothing has happened. Any ideas why its not working?

Thanks again for your time
  #8  
Old 12-18-2011, 05:17 PM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Default

im trying to change the top button at http://www.mesushi.org/extras/
  #9  
Old 12-20-2011, 08:44 AM
Matt Ecwid's Avatar
Matt Ecwid Matt Ecwid is offline
Ecwid Team
 
Join Date: Oct 2011
Posts: 4,947
Default

Quote:
Originally Posted by Daniel Forte View Post
Thank you so much Matvey but ive entered the code as you have said and replaced the image url with http://mesushi.squarespace.com/storage/buttons/e1.png - my new button but nothing has happened. Any ideas why its not working?

Thanks again for your time
As far as I can see, you've resolved the issue, right? The add to cart button on your site differs from the default one. It is linked to this image:
http://mesushi.squarespace.com/stora...ag%20copy9.png

Please let me know if I missed something.
__________________
Matt K
Ecwid Team

Ecwid Guide for Beginners

Ecwid Help Center

Ecwid video tutorials
  #10  
Old 12-20-2011, 08:57 AM
Daniel Forte's Avatar
Daniel Forte Daniel Forte is offline
Junior Member
 
Join Date: Feb 2011
Posts: 23
Default

Hi, yes I have changed all the buttons to http://mesushi.squarespace.com/stora...ag%20copy9.png But also want to change some individual products to show another button.
Thanks
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
add to bag, button, pre-order, product, specific

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:52 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.