Plugin Compatibility

[Rahim]

Hi Harry,

I would like to use this plugin : Woo Out Of Stock Products

It needs some css compatibility.

Check the first product on my New Arrival page.

Kind regards.

 

Attachments:

You must be logged in to view attached files.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

.product-image-flip .back {position: absolute !important;}
.products .outofstock a.back::before {
	display: none;
}

Kind regards

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

[Rahim]

Hi Harry,

It needs some more fix,

Could you please check it again?

Hover on it.

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

I check your site but don’t see the code. Please add the code a check again.

Kind regards

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

[Rahim]

Hi Harry,

I added that last night in style.css of the child theme : http://take.ms/oHEQN

Could you please clear the cache and check again?

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code to

.product-image-flip .back {position: absolute !important;}
.products .outofstock a.back:before,
.products .outofstock .product-btn a:before,
.products .outofstock .yith-wcwl-add-button a:before {
	display: none;
}

Regards

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

[Rahim]

Hi Harry,

I added the new code but saw no change, I added !important to the last line and the code got much better.

Right now there is only one bug on hover.

Before !important :

after !important :

right now there is only one pin above the price that should be hide and then it’s perfect.

Could you please help me to hide it? I made it in black shape.

Thank you

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code to

.product-image-flip .back {position: absolute !important;}
.products .outofstock a.back:before,
.products .outofstock .product-btn a:before,
.products .outofstock .yith-wcwl-add-button a:before,
.products .outofstock .product-info a:before {
	display: none;
}

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

[Rahim]

Hi Harry,

Thank you so much for helping me. 🙂

It’s now perfect on the product image.

I hided the badge sold out and I was going to upload my own sold out transparent photo that I just realized in the slide shows or where the product image compress in a page, it goes out of the side of product.

Check here : http://take.ms/6CNZG

Is there any chance to fit the width of the plugin’s photo for not going out side like this?

___

Harry, I know this customization and support for this plugin is out of your responsibility. I understand this.

But in fact I sent a thicket to it’s author and he said this is compatible with storefront and you should ask from your theme’s author for this. a pleasant answer by him.

I appreciate your kindness for this compatibility.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

You can find this happening on my homepage in the first slider.

Maybe you need to skip the products by arrow.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add css code

.products .outofstock a::before {
	background-size: 100% 100%;
}

for the image fit content, if you want it smaller, please reduce %

Kind regards

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

[Rahim]

Hi Harry,
It’s perfect now.

But I just realized that when a product is out of stock and the image of the plugin is active, the quick view eye button is not at the place that should be!

It comes above the plugin’s image.

Check the attached image.

Thank you.

Attachments:

You must be logged in to view attached files.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code

[dir="rtl"] .btn-quickview {
	right: 61px !important;
}

to

[dir="rtl"] .btn-quickview {
	right: 0 !important;
}

in media query max-device-width: 1366px

and add new code in media query

.outofstock .yith-wcwl-add-to-wishlist ~ .product-btn {
	top: 20px !important;
}

Kind regards

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

[Rahim]

Hi Harry,

It’s now fine in all mobile and tablets in vertical mode.

But in ipad pro it’s fine in vertical mode bit in horizontal mode it needs fix.

Vertical : http://take.ms/vDQ3N

Horizontal : https://monosnap.com/file/b7I1BjcchPJ6DD2aWRq1FRffK55ln0

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please change code in media query max-device-width: 1024px not 1366px

.outofstock .yith-wcwl-add-to-wishlist ~ .product-btn {
	top: 20px !important;
}

Regards

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

[Rahim]

Hi Harry,

Thank you so much.

It’s perfect now. 🙂

Rahim Vaziri
CEO & Founder at Look.ir

[Author]

Posts