Home Forums Themes Support Claue How to change the out of stock label?

Topic Resolution: Resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Harry 1 week, 3 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31704
    jacmiki
    Supported

    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

    #31705

    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

    #31708
    jacmiki
    Supported

    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

    #31709

    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

    #31722
    jacmiki
    Supported

    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.
    #31726

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.