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 06-09-2014, 04:25 PM
TORIS ORG's Avatar
TORIS ORG is offline
Junior Member
 
Join Date: Jul 2012
Posts: 13
Default

Out of Stock where Add to Cart should be


Is there a way to place the Out of Stock text where the Add to Cart button is located?
  #2  
Old 06-11-2014, 02:05 PM
Sergio87's Avatar
Sergio87 Sergio87 is offline
Ecwid Team
 
Join Date: Mar 2014
Posts: 1,512
Default

Quote:
Originally Posted by TORIS ORG View Post
Is there a way to place the Out of Stock text where the Add to Cart button is located?
Hello,

“Out of stock” label is displayed when some of your product stock qty is 0. It means that customers are not able to buy this product. This label is shown on your product detail page in the right block above the product price. And when the product is out of stock, “Add to bag” button is not shown at that moment.

Though the position of such elements are fixed, it is possible to extend/change Ecwid behavior to some point using our APIs. You can develop a script that will use Javascript API and move “Out of stock” label to another location. All you should do is to paste this script code in the source code of the page where Ecwid is installed.

Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == "PRODUCT") {       jQuery("div.ecwid-productBrowser-details-outOfStockLabel").insertAfter("div.ecwid-productBrowser-details-like");
    }
})
</script>
In this script I used Javascript API in order to detect that Ecwid page has been loaded (Ecwid.OnPageLoaded.add) and in order to define that the loaded page is product details page (if (page.type == "PRODUCT")). When product detailed page is opened, the script finds the block, where “Out of Stock” label is placed (this is the element with ecwid-productBrowser-details-outOfStockLabel CSS class ) and moves this block using insertAfter jQuery function after like buttons container (this element has ecwid-productBrowser-details-like CSS class).

Also you can visually mark this label’s view using the CSS code. Paste this code in your custom CSS theme in Ecwid Control Panel > Settings > Design tab.

Code:
div.ecwid-productBrowser-details-outOfStockLabel { 
font: bold 20px tahoma, geneva, verdana, sans-serif;
color: blue;
​}
Replace font and color values to yours.
__________________
Sergey G., Ecwid Team
------------------
Welcome to our Help Center with a lot of answers and tips!
 
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

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 05:17 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.