moving out of stock badge from top to the bottom

  • Using OceanWp + Woocommerce. The out of stock badge is on top of the product on the page that displays all my products. I would like to move it to the bottom of the product photo, description. How do I do that? Thank you!

Viewing 1 replies (of 1 total)

  • Hello @kabbalisticvillage,

    Put the CSS below in Customizing Environment > Custom CSS/JS on the “CSS code” section:

    .archive.woocommerce ul.products li.product.outofstock .outofstock-badge {
    top: 305px;
    left: 50%;
    transform: translateX(-50%);
}

.archive.woocommerce ul.products li.product li.category {
    padding-top: 25px;
}

    It will be work on the products archive page. With “top: 305px;” you can change position from top. if you see any issue on the Mobile, you can add the CSS below under previous CSS:

    .archive.woocommerce ul.products li.product.outofstock .outofstock-badge {
    top: 305px;
    left: 50%;
    transform: translateX(-50%);
}

.archive.woocommerce ul.products li.product li.category {
    padding-top: 25px;
}
/* Mobile Size */
@media(max-width:480px) {
    .archive.woocommerce ul.products li.product.outofstock .outofstock-badge {
        top: 305px;
        left: 50%;
        transform: translateX(-50%);
    }

    .archive.woocommerce ul.products li.product li.category {
        padding-top: 25px;
    }
}

    Result: https://i.postimg.cc/kXCVH89M/image.png.

Viewing 1 replies (of 1 total)
  • The topic ‘moving out of stock badge from top to the bottom’ is closed to new replies.