如何在WooCommerce的产品页面上显示可变产品的单个库存数量

问题描述

我试图在WooCommerce的单个产品页面上显示每个可变产品的库存量。

我已经使用Business Bloomer的Rodolfo Melogli的以下代码设法显示了所有变体的所有库存数量，但理想情况下，我希望仅在选择每个尺寸选项时仅显示一个库存数量。

随附的屏幕截图可以更好地对其进行说明。

---

按钮的html输出：

• <span class="ivpa_term ivpa_active ivpa_instock" data-term="l">L</span>

或单击时

• <span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl">XL</span>

如您所见，它显示了所有变化，但我只想显示选定的变化（S，M，L，XL等）数量，以红色突出显示。

---

这是PHP代码：

add_action( 'woocommerce_after_add_to_cart_form','ocapparel_echo_stock_variations_loop' );
function ocapparel_echo_stock_variations_loop(){
    global $product;
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            if ( $key['max_qty'] > 0 ) { 
              echo '<br/>' . implode( ',',$attr_string ) . ': ' . $key['max_qty'] . ' in stock'; 
            } else { 
              echo '<br/>' . implode(',$attr_string ) . ': out of stock'; 
            }
        }
    }
}

解决方法

• 代码的第一部分仅用于测试目的，特定于您要模拟按钮的主题
• 在变体的输出处，提供了一些额外的类，以确定每个变体之间的代码差异
• 使用jQuery块隐藏所有变体，然后在class + data term（L，XL等）的基础上，单击特定按钮后显示所选变体

---

此部分仅用于调试目的，为了模仿主题中存在的按钮，可以删除此代码（经过测试）

function output() {
    echo '<span class="ivpa_term ivpa_active ivpa_instock" data-term="l" style="display:block;border:1px solid #f0f;">L</span>';
    echo '<span class="ivpa_term ivpa_active ivpa_clicked ivpa_instock" data-term="xl" style="display:block;border:1px solid #f0f;">XL</span>';
}
add_action( 'woocommerce_before_add_to_cart_form','output' );

---

显示所有版本

function ocapparel_echo_stock_variations_loop() {
    global $product;
    
    // Is variable product
    if ( $product->get_type() == 'variable' ) {
        foreach ( $product->get_available_variations() as $key ) {
            $attr_string = array();
            
            foreach ( $key['attributes'] as $attr_name => $attr_value ) {
                $attr_string[] = $attr_value;
            }
            
            $implode = implode( ',',$attr_string );
            
            if ( $key['max_qty'] > 0 ) { 
              echo '<p class="size size-' . $implode . ' in-stock">' . $implode . ': ' . $key['max_qty'] . ' in stock</p>'; 
            } else { 
              echo '<p class="size size-' . $implode . ' out-of-stock">' . $implode . ': out of stock</p>'; 
            }
        }
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Hide all
            $( 'p.size' ).css( 'display','none' );

            // Click
            $( 'span.ivpa_term' ).click(function() {
                // Hide all
                $( 'p.size' ).css( 'display','none' );
                
                // Get data term (L,XL,etc...)
                var term = $( this ).attr( 'data-term' );
                
                // Display
                $( '.size-' + term ).css( 'display','block' );
            });    
        });
        </script>
        <?php
    }
}
add_action( 'woocommerce_after_add_to_cart_form','ocapparel_echo_stock_variations_loop' );