hover on variations

[micheal_w]

Hi Guys,

I am using Woo Variation Swatches and Photos for changing the usual dropdown in Woocommerce for swatches. I have contacted the author for one thing and he advised that I should contact the theme author, so here I am… Please check the link I pasted above, and click on the size M or L for example. They are not available (sold out) and as you hover your mouse on them, you see an arrow with a crossed circle icon. I would like to change that circle for another icon (.png or whatever) file which would simply show the customer that it is out of stock (possibly it would be just a text saying out of stock).

So this plugin’s author (Lucas Stark) sent the below message:

“You can easily change the icon using some CSS to control what shows up when you hover over an item which is the disabled class on it. Since this is a request regarding your current theme, I would suggest you contact the theme author and let them know the request you have.”

So here I am, can you please help me to solve this issue?

Thank you!

[Rui Guerreiro – SUPPORT]

Hi,

The current disabled belongs to that plugin and not to our theme.

Like you know we don’t have any problem helping when it comes to our theme and sometimes we go besides that but the css is here in his plugin file

http://cdn.lifewear.com.au/wp-content/plugins/woocommerce-variation-swatches-and-photos/assets/css/swatches-and-photos.css?ver=4.3.1

This is an example

div.swatch-wrapper.disabled, div.swatch-wrapper.disabled a {

    cursor: not-allowed;

    /* Required for IE 5, 6, 7 */	
    zoom:1; 
    /* Theoretically for IE 8 & 9 (more valid) */	
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;
    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;
    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

-Rui

[micheal_w]

Hi Rui,

Thank you for your reply and thank you for all your previous (and future) support, you guys the best. I thought at the first place that this thing would connect to his plugin, but he was convincing me that it is not… Maybe he was just too busy to give me some extra info… Anyway, I was trying to fix this, but since I am not a developer, not too sure about the exact solution… If you can put me in the right direction, that would be much appreciated…

I tried to change the

cursor: not-allowed;

code in the http://cdn.lifewear.com.au/wp-content/plugins/woocommerce-variation-swatches-and-photos/assets/css/swatches-and-photos.css?ver=4.3.1 file to

.custom {
   cursor: url(http://lifewear.com.au/wp-content/uploads/2015/08/out-of-stock.png), auto;
}

but it did nothing 🙁

If you can put me in the right direction, that would be much appreciated, if this is too much, I completely understand…
Thanks!

[Rui Guerreiro – SUPPORT]

Believe me that we are also too busy, but this is a question of being responsible for the things that are created.

Try this css.Can’t assist on this anymore if doesn’t work.

div.swatch-wrapper.disabled, div.swatch-wrapper.disabled a {
   cursor: url(http://lifewear.com.au/wp-content/uploads/2015/08/out-of-stock.png), auto!important;
}

-Rui

[micheal_w]

No worries, thank you for all your help!

[Mohammad – SUPPORT]

Hi,
You most welcome and great thanks to Rui.
Mohammad 🙂