Home › Forums › WoodMart support forum › Border Around Stock Status In Archive Products

Border Around Stock Status In Archive Products

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 30, 2024 at 3:44 pm #586790

    marketing-3503
    Participant

    Hi there, I hope you are doing well. Please can you give me css to do the following:

    In Stock products —> Get a thin border around stock status in green (#85c44c)
    Available on backorder —> Get a thin border around status in orange (#C46A4D)

    I attached a screenshot for where I am referring to but it should be for any product archive/loops where stock status is available in product description.

    Thank you,

    Attachments:
    You must be logged in to view attached files.
    July 31, 2024 at 3:29 pm #587041

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Thanks for reaching to us.

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS section:

    p.stock.wd-style-default:is(.in-stock) {
    border: 1px solid #85c44c;
}

p.stock.wd-style-default:is(.available-on-backorder) {
    border: 1px solid #C46A4D;
}

    Regards,

    July 31, 2024 at 3:42 pm #587047

    marketing-3503
    Participant

    Thank you, I made some adjustments. How can I line up the stock status across all products even if the titles vary in length?

    Please check my screenshot for what I am referring to.

    Attachments:
    You must be logged in to view attached files.
    August 1, 2024 at 7:28 am #587159

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS section:

    .product-element-bottom:not(:has(div.star-rating)) .wd-entities-title{
	min-height: 67px;
}

    Regards,

    August 1, 2024 at 10:37 am #587224

    marketing-3503
    Participant

    Hello, thank you for this. It works really well, especially on a desktop.

    There only seems to be small discrepancies on mobile/tablet devices. Please see my screenshot.

    Thank you!

    Attachments:
    You must be logged in to view attached files.
    August 1, 2024 at 11:22 am #587243

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Are you referring to the spacing between product title and buttons?

    Regards,

    August 1, 2024 at 11:27 am #587246

    marketing-3503
    Participant

    Hi there, no I am still referring to the alignment of the stock status but now on mobile/tablet.

    Please see my screenshot.

    This CSS is working well on desktop/laptop but needs adjustment for mobile as per my screenshot –

    .product-element-bottom:not(:has(div.star-rating)) .wd-entities-title{
    min-height: 67px;
    }

    Attachments:
    You must be logged in to view attached files.
    August 1, 2024 at 11:49 am #587270

    Hung Pham
    Keymaster

    Hi marketing-3503,

    Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Mobile section:

    .product-element-bottom:has(div.star-rating) .wd-entities-title{
	min-height: 67px;
}

.product-element-bottom:not(:has(div.star-rating)) .wd-product-stock.stock{ 
	margin-top: 13.5px;
}

    Regards,

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)