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

Question

我试图在 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'; 
            }
        }
    }
}

Answer 1

代码的第一部分仅用于测试目的，特定于您的主题，我将在其中模仿按钮
在变体的输出中，提供了一些额外的类，以确定每个变体之间的代码差异
对于 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' );

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

How can I show individual stock quantities for variable products on the product page in WooCommerce

php

wordpress

product

variations

woocommerce