dongwei6457 2014-07-20 17:15
浏览 105
已采纳

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

I've done some research on this before asking and am unable to find the answer I'm looking for. I created a custom select box for the checkout page under billing. It's complete in that it works on the page, submits the data and even adds the data to the emails. However, it doesn't look great. I want it to look like the Country and State drop down boxes, style-wise. Here is the code:

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;

}

I read online you could make it own-css-name, so i tried that (as seen above), but I'm not sure what that means? What css name would I use to match the country and state style, as those styles came with WooCommerce, they weren't custom?

Edit: I've come up with a solution to inspect element, find class, and use Simple Custom CSS to override and assign the same properties as Country and State have. However, this doesn't seem like the most eloquent solution. I was wondering if there was a better way.

  • 写回答

1条回答 默认 最新

  • duanla3319 2014-07-20 19:05
    关注

    You will need to add some custom JavaScript to apply the Chosen style to your new drop down. By default WooCommerce applies this to select boxes with the class select.chosen_select however from looking at the code it is not possible to apply the .chosen_select class to the actual select box, the class attribute is applied to the parent container for the field, thus the new JavaScript to apply the style.

    jQuery('.own-css-name select').chosen();
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 vs2022无法联网
  • ¥15 TCP的客户端和服务器的互联
  • ¥15 VB.NET操作免驱摄像头
  • ¥15 笔记本上移动热点开关状态查询
  • ¥85 类鸟群Boids——仿真鸟群避障的相关问题
  • ¥15 CFEDEM自带算例错误,如何解决?
  • ¥15 有没有会使用flac3d软件的家人
  • ¥20 360摄像头无法解绑使用,请教解绑当前账号绑定问题,
  • ¥15 docker实践项目
  • ¥15 利用pthon计算薄膜结构的光导纳