ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 7, 2016 at 3:49 am #265961
  keysilinares

  Member

  Post count: 165

  Hello,

  Is there a way that I can still display my out of stock items but maybe have the product image appear like the image attached? I like how the item displays “out of stock” on the item photo. The “out of stock” sign that comes with the theme seems too small. Or maybe if there was a text above the price that stated it was out of stock. Please advise if possible.

  Thanks!

  Attachments:

  You must be logged in to view attached files.
  May 7, 2016 at 3:51 am #265963
  keysilinares

  Member

  Post count: 165

  or is there maybe a way to get a bigger “sold out” badge?

  May 9, 2016 at 10:19 am #266081
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Add this to your custom css:

  .woocommerce ul.products li.product.outofstock .img-wrap {
    opacity: 0.6;
  }
  .woocommerce ul.products li.product.outofstock:not(:hover) .img-wrap.second-image {
    display: none;
  }
  

  -Kyle

  May 14, 2016 at 5:33 am #267518
  keysilinares

  Member

  Post count: 165

  But is there a way to have a bigger “sold out” badge?

  May 14, 2016 at 5:43 am #267519
  keysilinares

  Member

  Post count: 165

  What exactly does the second part of that code do?

  May 16, 2016 at 7:55 am #267625
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .woocommerce .out-of-stock-badge {
    font-size: 13px;
  }

  It hides the second image, as adding reducing the opacity of the first image shows the image nehind

  – Kyle

  May 22, 2016 at 11:15 am #269203
  keysilinares

  Member

  Post count: 165

  Thank you!

  Is there a way that I can have the second image display the “out of stock” badge as well? How do I change the size for all badges, for instance, “new”? Thanks!

  May 24, 2016 at 10:59 am #269681
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .woocommerce .products .product figure:hover .badge-wrap > span {
    opacity: 1;
  }

  Use the same css

  .woocommerce .wc-new-badge {
    font-size: 13px;
  }

  – Kyle

  May 25, 2016 at 4:52 am #269903
  keysilinares

  Member

  Post count: 165

  Worked perfectly. Thank you!

  May 25, 2016 at 7:37 am #269915
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Great! No problem

  – Kyle

  June 2, 2016 at 10:17 am #271973
  keysilinares

  Member

  Post count: 165

  How do I get the badges to be displayed on the mobile site? Is this possible whilst still being responsive?

  June 2, 2016 at 10:26 am #271977
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Add this to your custom css:

  .woocommerce span.onsale, .woocommerce .wc-new-badge, .woocommerce .out-of-stock-badge {
    display: block!important;
  }

  – Kyle

  June 2, 2016 at 10:35 am #271982
  keysilinares

  Member

  Post count: 165

  Thank you 😀

  June 2, 2016 at 10:44 am #271986
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem 🙂

• Back to forum

  Posted in: Atelier