[英]Adding an “out-of-stock” class to variations shown as swatches - WooCommerce
I'm trying to figure out of way of adding an "out-of-stock" class to WooCommerce variations shown as swatches when their stock level is at 0.我试图找出在 WooCommerce 变体中添加“缺货”类的方法,当它们的库存水平为 0 时显示为色板。
I've found multiple ways of "greying out" out of stock variations when they are displayed in the standard WooCommerce drop down list - code shown below:当它们显示在标准 WooCommerce 下拉列表中时,我发现了多种“变灰”缺货变体的方法 - 代码如下所示:
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );
function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {
if ( ! $variation->is_in_stock() )
return false;
return true;
}
However, this does not work when using a plugin to show my variations as swatches.但是,当使用插件将我的变化显示为色板时,这不起作用。
I currently have a size attribute, and have used a plugin to shown each size as a separate box that can be selected.我目前有一个尺寸属性,并使用一个插件将每个尺寸显示为一个可以选择的单独框。 Similar to what is shown in this thread: Click Here类似于此线程中显示的内容: 单击此处
Is there some PHP, or JS that i could use to add a new stock to out of stock variations, which will then allow me to alter the CSS.是否有一些 PHP 或 JS 可以用来将新库存添加到缺货变体中,然后我可以更改 CSS。 Showing them as a red box, with a cross through it for example.将它们显示为一个红色框,例如带有一个十字。
During my search so far, i have come up empty handed, so any help would be appreciated.到目前为止,在我的搜索过程中,我空手而归,因此将不胜感激。
Ok I wrote this code for pluginWooCommerce Variation Swatches and Photos .好的,我为插件WooCommerce Variation Swatches and Photos编写了这段代码。 What is will do is add a class called out-of-stock to any variation with zero stock.将要做的是将一个称为out-of-stock的类添加到零库存的任何变体中。 You will need to ensure that the variations are setup with Manage Stock checked.您需要确保在选中管理库存的情况下设置了变体。 When a variation has zero stock then the class is added to the variation link.当变体的库存为零时,该类将添加到变体链接中。 You can then style the class however you want to show it is disabled.然后,您可以设置该类的样式,但要显示它已禁用。
add_filter('woocommerce_swatches_get_swatch_anchor_css_class', 'add_swatch_out_stock_class', 10, 2);
function add_swatch_out_stock_class( $anchor_classes, $swatch_term ) {
if ( is_product() ) {
global $post;
$product = wc_get_product($post);
if ( $product->get_type() === 'variable' ) {
foreach( $product->get_available_variations() as $variation ) {
$product_variation = new WC_Product_Variation($variation['variation_id']);
if( $product_variation->get_stock_quantity() === 0 ) {
foreach( $product_variation->get_variation_attributes() as $var_attribute) {
if( $swatch_term->term_slug === $var_attribute) {
$anchor_classes .= ' out-of-stock';
}
}
}
}
}
}
return $anchor_classes;
}
To show the size labels inside the swatch you can remove the text-index property using this filter.要在样本内显示尺寸标签,您可以使用此过滤器删除 text-index 属性。
add_filter('woocommerce_swatches_picker_html', 'remove_text_indent', 10, 2);
function remove_text_indent( $picker, $swatch_term) {
return str_replace('text-indent:-9999px;', '', $picker);
}
If you need to hide Color Swatches (Color option only) then you can use this put before tags.如果您需要隐藏色板(仅限颜色选项),那么您可以使用这个放置在标签之前。 NB!注意! You have to check that classes are same for plugin swatches what you use example change .tawcvs-swatches for your style class what plugin uses.您必须检查插件色板的类是否相同,您使用的示例更改 .tawcvs-swatches 插件使用的样式类。
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script> <script> jQuery.noConflict(); (function ($) { function readyFn() { $( ".variations_form" ).on( "woocommerce_update_variation_values", function () { let $swatches = $('.tawcvs-swatches'); $swatches.find('.swatch').removeClass('hidden'); $swatches.each(function(){ let $select = $(this).prev().find('select'); $(this).find('.swatch').each(function(){ if (!($select.find('option[value="'+ $(this).attr('data-value') +'"]').length > 0)) { $(this).addClass('hidden'); } }) }) } ); } $(document).ready(readyFn); })(jQuery); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.