如何解决如何在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' );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。