Question

你们有什么想法我如何着色后端变异列表？

让我们采取产品＆＃34;牛仔裤＆＃34;举个例子。此产品有3种不同（尺寸），如尺码6，尺码8和尺码10.现在，我们假设只有两种不同的颜色可供选择。

如果我想在后端编辑产品，如果我点击Variations图标，我必须展开所有三种版本只是为了看哪一种是售罄的。

我正在考虑一个解决方案，其中＆＃34;销售一空＆＃34;变体以红色着色，可用的变为绿色。我认为这样可以更容易地将状态从可用状态更改为售完状态。

以下提供的示例： - 唯一可用的（库存）变体是38.其他的不可用（售罄/缺货）。 enter image description here

你知道在后端如何做到这一点吗？

非常感谢！

Answer 1

不幸的是，模板在该标记中没有可用于执行此操作的钩子或过滤器，因此唯一的方法是使用javascript或覆盖模板。

您需要的javascript会是这样的：

$( '#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 );
    } );
} );

这会为每个变体项添加一个类，然后您可以使用它来设置标题的样式，如下所示：

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

最好是使用:after伪来添加一点颜色＆＃34; dot＆＃34;在变体ID之前。

着色后端的变化

1 个答案: