CODEWITHSUNDEEP
wordpresswoocommerce
Perusi
Perusi

Reputation: 9

Colorize variations in backend

Do you guys have any idea how i can colorize the backend variation list?

Let's take product "Jeans" as an example. This product has 3 variations (sizes) like size 6, size 8 and size 10. Now, let's say that just 2 variations are available.

If I want to edit the product in backend, and if I click the Variations icon, I have to expand all three variations just to see which one is the one sold out.

I was thinking to a solution in which the "sold out" variation is colored in red and the available one in green. I think this way it's easier to change the status from available to sold out.

Example provided below: - The only available (in stock) variation is 38. The other ones are not available (sold out/out of stock). enter image description here

Do you have any idea how this can be done in backend?

Thanks a lot!

Upvotes: 0

Views: 65

Answers (1)

James Kemp
James Kemp

Reputation: 349

Unfortunately the template has no hooks or filters in that tag that you could use to do that, so the only way to do it would be with javascript, or overriding the template.

The javascript you'd need would be like this:

$( '#woocommerce-product-data' ).on( 'woocommerce_variations_loaded', function() {
    jQuery( '.woocommerce_variation' ).each( function( index, variation ) {
        var $variation = $( variation ),
            stock = $variation.find( '[id^="variable_stock_status"]' ).val();

        $variation.addClass( stock );
    } );
} );

This would add a class to each variation item, which you could then use to style the heading, like so:

.woocommerce_variation.instock h3 { background: #DEF0D8 } .woocommerce_variation.outofstock h3 { background: #F2DEDF }

Better would be to use the :after pseudo to add a little coloured "dot" before the variation ID.

Upvotes: 1

Related Questions