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

Topic Resolution: Resolved
Viewing 5 reply threads
  • 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
      Harry
      Supported

      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
      Harry
      Supported

      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
      Harry
      Supported

      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 5 reply threads

You must be logged in to reply to this topic.