Title: Making select into buttons
Last modified: April 8, 2020

---

# Making select into buttons

 *  [andersjytzler](https://wordpress.org/support/users/andersjytzler/)
 * (@andersjytzler)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/making-select-into-buttons/)
 * Hey guys,
 * I have made so that the customers can select their size in the category page,
   and also quantity. But i really want the <select> to be buttons instead. I tried
   Googling an answer but i only found this suggestion [https://jsfiddle.net/koshimon/pobcvxf4/2/](https://jsfiddle.net/koshimon/pobcvxf4/2/)
   
   But it doesn’t actually work for me.
 * Does anyone have an idea on how to make the select into buttons?
 * It’s on this category page [https://bambuni.dk/produkt-kategori/maend-bambus/bambusstroemper-til-maend/](https://bambuni.dk/produkt-kategori/maend-bambus/bambusstroemper-til-maend/)
 * Yours sincerely
    Anders Jytzler
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmaking-select-into-buttons%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/making-select-into-buttons/#post-12646987)
 * The JS Fiddle you linked to should work, it’s mainly going to take using the 
   correct jQuery selector for your selects. That’s the tricky part.
 * When I look at your problem page, it looks like the same ID, “stoerrelse” is 
   used for the size selects for all items. That will cause problems with javascript/
   jQuery, because the ID attribute is supposed to be unique throughout an HTML 
   document. You may need to fix that for other reasons, but it shouldn’t affect
   this.
 * You might give the following selector in the JSFiddle code a try. It uses the
   body class “.woocommerce-page” to limit the change to your selects to that page,
   because your theme doesn’t include a page ID:
 *     ```
       ReplaceSelectWithButtons($('.woocommerce-page select'));
       ```
   
 * A good way to test your selectors without disrupting things for your customers
   is to use the developer tools in Firefox or Chrome/Chromium to test the selectors
   with CSS; for example, I used the following to make sure I was getting all the
   selects on your problem page:
 *     ```
       .woocommerce-page select {
       	display: none !important;
       }
       ```
   
 * Since it hid all the size selects when I tried it, I am (fairly) confident it
   will work in jQuery.
 * There’s also the jQuery plugin [Select2Buttons](https://github.com/o-sam-o/jquery.select2Buttons).
 * Ideally, all the selects you want to change to buttons would share the same class,
   to make this easier, but they don’t. There may be a filter or hook to add a class
   to them.

Viewing 1 replies (of 1 total)

The topic ‘Making select into buttons’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/making-select-into-buttons/#post-12646987)
 * Status: not resolved