Display the on-sale badge on out of stock products

Hello @babiskalogirou,

Thank you for your feedback.

This behavior is in WooCommerce, and we use WooCommere defaults on OceanWP theme.

Regarding the issue, technically, the “out-of-stock products” cannot be “on-sale”: https://postimg.cc/Lh83ZfvZ. So this behavior is correct.

If you want to show that badge, in this case, you need to customize the theme. If you’re interested in customizing the theme, it’s essential to have technical knowledge of php. Let me know if you’d like me to explain the general process. Alternatively, you could consider hiring an expert to assist you.

Update: However, you can change it on the theme with CSS.
Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

.woocommerce ul.products li.product.outofstock .outofstock-badge {
    font-size: 0;
    background-color: rgba(63,195,135,.8);
    color: #fff;
    top: 1.25rem;
    left: 1.25rem;
}

.woocommerce ul.products li.product.outofstock .outofstock-badge:before {
    content:'Sale !';
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .4px;
    z-index: 9;
}

Result: https://postimg.cc/G8mT9WGT.

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.
Otherwise, need PHP customization.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

I hope that helps.
Best Regards

• This reply was modified 1 year, 6 months ago by Shahin.

Thank you very much for your kind response

I have set the badge to display the percent discount. This code is very useful but unfortunately it does not match to the project. I would very much appreciate it if you gave me instructions on how to display the common sale badge.

Hello @babiskalogirou,

The solution to achieve it is customization, and it needs familiarity with PHP, if you are unfamiliar with PHP, you can contact a PHP expert. To do this, first, you need to use the child theme. You can copy the metafile from the partials folder in the child theme following the same path and then make the necessary changes.

For more information about that, please follow the steps below:

By using FTP or cPanel access (if didn’t use the localhost), Go to this directory:
wp-content\themes\oceanwp\partials
Find your template which you want to customize and copy that template file(in your case, for example, you need to change the date on the blog page, so you need to use the blog template(s): https://i.postimg.cc/brv9gn9s/image.png).

Then head over to the same path on the child theme. There isn’t an entry folder as a default on your child theme, so you need to create a new one(one time).

Example: If you want to change the HTML tags structure in the single blog post featured image for standard post format, all you need in this step is the following:

1. Head over to your WP root > wp-content > themes > oceanwp > partials> single > media path.
2. Then, find the “blog-single.php” file and copy this file.
3. After that, go back to the themes folder (wp root > wp-content > themes) and go to the oceanwp-child-theme-master folder.
4. Create a new folder with the “partials” name in the child theme.
5. Go to the /partials/ folder and create a new folder with the “single” name.
6. Go to the /single/ folder and create a new folder with the “media” name.
7. Go to the /media/ folder and paste the “blog-single.php” file here.

* Please check this screenshot: https://i.postimg.cc/sxjYTWyt/image.png.
* Download child theme: https://docs.oceanwp.org/article/90-sample-child-theme.
* Developer docs: https://docs.oceanwp.org/collection/19-developer-doc.

Note: It’s working with the /woocommerce/ folder or root of the theme files.

I hope it helps.
Best Regards

Thank you very much for your answer, however it is very general. I wouldn’t say it helped me. Woocommerce says it’s not a matter of the plugin, and it is right (i tested it with other themes an the sales badge is displayed even on out of stock products).

Best regards.