Question

我在询问之前已对此进行了一些研究，但我找不到我正在寻找的答案。我在结算页面下为结帐页面创建了一个自定义选择框。它的完整之处在于它可以在页面上运行，提交数据甚至将数据添加到电子邮件中。但是，它看起来不太好。我希望它看起来像国家和州下拉框，风格明智。这是代码：

add_filter( 'woocommerce_checkout_fields' , 'custom_store_pickup_field');

function custom_store_pickup_field( $fields ) {
  $fields['billing']['my_field_name'] = array(
    'type'          => 'select',
    'options'       => array(
    'Option 1'      => 'Select if choosing local pickup',
    'Option 2'      => 'Address 1, etc.',
    ),
    'class'         => array('own-css-name'),
    'label'         => __('<br /><p style="font-size:20px;">Please Choose A Pickup Location (if applicable, otherwise skip)'),
    );

return $fields;

}

我在网上看到你可以把它变成自己的css-name，所以我尝试了（如上所示），但我不确定这意味着什么？我将使用什么css名称来匹配国家和州的风格，因为这些样式随WooCommerce一起提供，它们不是自定义的？

编辑：我提出了一个检查元素，查找类的解决方案，并使用简单自定义CSS来覆盖并分配与Country和State相同的属性。但是，这似乎不是最有说服力的解决方案。我想知道是否有更好的方法。

Answer 1

您需要添加一些自定义JavaScript才能将Chosen样式应用于新的下拉列表。默认情况下，WooCommerce将此选项应用于选择具有类select.chosen_select的框，但是从looking at the code开始，无法将.chosen_select类应用于实际的选择框，class属性为应用于该字段的父容器，因此新的JavaScript应用该样式。

jQuery('.own-css-name select').chosen();

如何在WooCommerce Checkout中创建自定义选择框看起来像其他选择框？

1 个答案: