How can I highlight "Out of Stock" product on the products list

Last updated

You can easily highlight "Out of Stock" product on the list using additional CSS class for out of stock items that automatically adds to all of them.

For example, add alternative background for blocks with "Out of Stock" products:

1. On the "Grid" view:

td.ecwid-productBrowser-productsGrid-cell-outOfStock div.ecwid-productBrowser-productsGrid-productTopFragment,
td.ecwid-productBrowser-productsGrid-cell-outOfStock div.ecwid-productBrowser-productsGrid-productBottomFragment {
  background-color: #FDCDCD;

2. On the "List" view:

tr.ecwid-productBrowser-productsList-productRow-outOfStock td {
  background-color: #FDCDCD;

3. On the "Table" view:

tr.ecwid-productBrowser-productsTable-row-outOfStock td {
  background-color: #FDCDCD;

Or mark prices of out of stock items grey:

td.ecwid-productBrowser-productsGrid-cell-outOfStock div.ecwid-productBrowser-price,
tr.ecwid-productBrowser-productsList-productRow-outOfStock td div.ecwid-productBrowser-price,  
tr.ecwid-productBrowser-productsTable-row-outOfStock td div.ecwid-productBrowser-price {
  color: grey;

Or show "Out of stock" text over the product image

For the Grid view:

td.ecwid-productBrowser-productsGrid-cell-outOfStock div.ecwid-BuyNow { 
  display: block;
  margin-top: -180px;   
  -ms-transform:rotate(-23deg); /* IE 9 */
  -moz-transform:rotate(-23deg); /* Firefox */
  -webkit-transform:rotate(-23deg); /* Safari and Chrome */
  -o-transform:rotate(-23deg); /* Opera */
  opacity: 0.5;
td.ecwid-productBrowser-productsGrid-cell-outOfStock div.ecwid-BuyNow span {
​  color: red;
  font-size: 16px;
Was this article helpful?
3 out of 8 found this helpful
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7