Center the "Out Of Stock" product label

Hello,

I did find that the out of stock product label in product archives looks a little messy with long text/wording so i have fixed that with the below custom CSS which also center the label. BUT, how can i keep it in the middle of images on products with no sale label? I want all labels positioned where they are as standard but the out of stock label i want centered in the middle no matter which labels is active.

.product-wrapper .labels-rounded {
    max-width: 100%;
    width: 100%;
}
.product-wrapper .labels-rounded .out-of-stock {
    max-width: 100px;
    min-height: 20px;
    background-color: rgba(255,255,255,.8);
    font-size: 16px;
    margin: 0 auto;
    margin-bottom: 7px;
}

Also i have a suggestion for the category toogle used to open child category in WC category widget and also the X used to remove items from mini cart. These are all to small and very difficult to hit correctly with big fingers. 1 of 10 tries went to open the category page or single product page. I did a test and increased the toogle/X width to 34px and height 26px and it works perfect with any big fingers, it also looks good.

There is also a few other issues in mobile view which needs to be fixed because it is impossible to use with fingers. You will see it easily if testing all the functions on any mobile.

Anyway, one of the best themes seen for years 🙂

Hello,

Thank you very much for choosing our theme and for contacting us.

We appreciate highly your suggestions we shall consider them. Now I see you have fixed all the points you needed. Please note if you need any help in custom CSS, contact us.

Best Regards

Hello again,

Yes i have been able to center the out of stock (utsolgt) label but i also want to have it vertically aligned in middle even if the product has no sale label. If you look further down the page you will see a few other products showing the “utsolgt” label but as there is no sale label the label appear on top. How can i make sure it always appear in middle?

Also i see there is built in a popup system which can be used with ie. mailchimp but is it possible to activate popup from click on a link? I want to use it also for my privacy policy and terms & conditions. On my live site i am using a plugin for that but the less plugins needed the better 🙂

Thanks

Brgds
Rune

Hello,

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

.product-grid-item .product-labels .onsale + .out-of-stock {
    margin-top: -60px;
}

We have a popup element which can be added to any place of the theme as well as to an HTML block in the pre-footer area to be visible on all the pages https://xtemos.com/docs/woodmart/shortcodes-2/

Best Regards

Thank you but i do not think that will work because the .onsale class is not present and when not present i want to move out of stock label down 60px.

As long as the .onsale class is present everything looks just fine, the out of stock label appear in center and middle of image. But when .onsale is not present then out of stock label is moved to top of image which i do not want. I hope you have a selector that can keep the out of stock label in middle and center of image even if .onsale class is not present.

Brgds
Rune

Hello,

Please remove the code provided before and add this code to the Theme Settings > Custom CSS > Global:

.product-grid-item.outofstock .product-labels {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.product-grid-item .product-labels .out-of-stock {
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Best Regards

Thanks a lot, that did the trick, i just had to unset the parent max-width 50%.

Any plans on making the NEW label to work with product publishing date, ie. make a global setting where admin can set the NEW label to appear for 2 weeks from publishing date and if set on per product specific, it will override the global settings.

Otherwise it will be some extra workload to remember reset the product specific settings if hundreds of products.

Brgds
Rune

Hello,

Thank you for the idea, we will consider implementing such a feature but can’t guarantee that it will be added soon.

Kind Regards

[Author]

Posts