为后端的变化着色

Question

你们知道如何为后端变体列表着色吗？

让我们以产品"牛仔裤"为例。 该产品有 3 种变体(尺寸(，例如 6 码、8 码和 10 码。 现在，假设只有 2 种变体可用。

如果我想在后端编辑产品，并且如果我单击变体图标，我必须展开所有三个变体，以查看哪一个售罄。

我在考虑一种解决方案，其中"售罄"变体显示为红色，可用变体为绿色。 我认为这样更容易将状态从可用更改为售罄。

示例如下： - 唯一可用的(有库存(变体是 38。其他的不可用(售罄/缺货(。 在此处输入图像描述

您知道如何在后端完成此操作吗？

多谢！

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伪在变体 ID 之前添加一点彩色"点"。