CODEWITHSUNDEEP
phpwordpress
BlueRiver89
BlueRiver89

Reputation: 77

How can I make a custom select box in WooCommerce Checkout look like the other select boxes?

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.

Upvotes: 0

Views: 2396

Answers (1)

doublesharp
doublesharp

Reputation: 27599

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();

Upvotes: 2

Related Questions