我正在尝试在wooccommerce中自定义本地取货运输选项。基本上，如果从wooccommerce设置中选择了"本地取货"选项，它将显示在每个产品的结账时。我想自定义它，使其只显示在选定的产品中。
因此，我在产品编辑页面上添加了一个新的复选框自定义字段元。如果产品上有本地取货，则应选中复选框；如果本地取货不可用，则应取消选中复选框。
我在functions.php中的代码如下：
<?php
// Display Fields
add_action( 'woocommerce_product_options_shipping', 'woo_add_custom_general_fields' );
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );
function woo_add_custom_general_fields() {
global $woocommerce, $post;
echo '<div class="options_group">';
// Checkbox Local Pickup / Collection Available
woocommerce_wp_checkbox(
array(
'id' => '_shipping_collection',
'wrapper_class' => 'show_if_simple',
'label' => __('Local Pickup / Collection Available', 'woocommerce' ),
'description' => __( 'This product is available for collection', 'woocommerce' )
)
);
echo '</div>';
}
function woo_add_custom_general_fields_save( $post_id ){
// Checkbox Local Pickup / Collection Available - Save Data
$collection_checkbox = isset( $_POST['_shipping_collection'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_shipping_collection', $collection_checkbox );
}
?>
到目前为止一切都很好，复选框正在显示和保存。
现在，正如我前面提到的，每个产品都有本地取货选项。我想自定义它，使其只显示在复选框（_shipping_collection）为checked 的产品上
显示在签出上的本地取货元素在此处生成：https://github.com/woothemes/woocommerce/blob/master/templates/cart/cart-shipping.php
使用以下代码：
<ul id="shipping_method">
<?php foreach ( $available_methods as $method ) : ?>
<li>
<input type="radio" name="shipping_method[<?php echo $index; ?>]" data-index="<?php echo $index; ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" value="<?php echo esc_attr( $method->id ); ?>" <?php checked( $method->id, $chosen_method ); ?> class="shipping_method" />
<label for="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>"><?php echo wp_kses_post( wc_cart_totals_shipping_method_label( $method ) ); ?></label>
</li>
<?php endforeach; ?>
</ul>
我在标签中添加了ID选择器，这样我就可以在隐藏标签时通过其ID来识别标签
在前端结账时，代码将生成以下ID:
#shipping_method_0_local_pickup
所以，如果我现在尝试用CSS隐藏它，使用：
#shipping_method_0_local_pickup {
display: none;
}
效果很好！，该字段对签出是隐藏的。
因此，我现在认为我应该使用Jquery来实现复选框功能，经过一番搜索，我找到了一个示例脚本，因此在更改其中的选择器以适应我的选择器后，我得到了以下结果：
$('#_shipping_collection').click(function() {
if($(this).is(":checked")) {
$('#shipping_method_0_local_pickup').show();
} else {
$('#shipping_method_0_local_pickup').hide();
}
})
我想我这个脚本可能应该放在这个文件中：https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-payment-method.js
但不幸的是，这似乎并不奏效。
你有什么建议吗？
- 是否加载了jQuery
- 是否在页面加载后添加事件处理程序-
- ID是唯一的吗
像这样-更简单的代码，
$(function() {
$('#_shipping_collection').on("click",function() {
$('#shipping_method_0_local_pickup').toggle(this.checked);
});
});
示例
$(function() {
$('#_shipping_collection').on("click", function() {
$('#shipping_method_0_local_pickup').toggle(this.checked);
});
});#shipping_method_0_local_pickup { display:none }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="_shipping_collection" id="_shipping_collection">
<label for="_shipping_collection" id="_shipping_collection"></label>
<div id="shipping_method_0_local_pickup">
I should see this text if only if the checkbox is checked
</div>