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;   
  transform:rotate(-23deg);
  -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;
}
Back to top
Was this article helpful? 3 out of 9 found this helpful