How to change the out of stock label?

[jacmiki]

May I know is there any way that I can change the out of stock label ? I would like to use my custom design label.

Thank you

[Harry]

Hi,

you want change the text or change background color?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[jacmiki]

Hi Harry, thanks for your response. I would to change both like re-styling the label. Make it show on middle and transparent back ground

[Harry]

Hi Jackimi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.badge .sold-out {
	background: rgba(0,0,0,0.3);
	top: 50%;
	right: 50%;
	width: 100%;
	transform: translate3d(50%, -50%, 0);
	padding: 10px 0;
	height: auto;
	font-size: 14px;
}

And change 0,0,0 as RGB color and 0.3 as opacity from 0.0 to 1.0

To change the text, please go to Loco > theme > claue > your language > edit and search string to change

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[jacmiki]

Hi Harry,

Thanks for your support, the sold out label is looking good at product listing page now.
However, It’s looks weird at product detail page, the sold out label is showing in middle of the page.
Can we make the sold out label show on the product image only ? Attached screenshot for your reference

Thank you

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Jacmiki,

Please add more code

.jas-wc-single .badge .sold-out {
	left: auto;
	right: calc(50% - 45px);
	width: calc(100% - 120px);
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts