Okay
  Public Ticket #173174
Remove counter(?) from Chrome/Safari
Closed

Comments

  • Tara started the conversation

    Hi guys,

    There is an add/minus button showing up in the quantity counter on the single product and cart pages on Chrome and Safari that I would like to get rid of. It only shows up when a cursor is over the number box, but there is extra whitespace cutting of the numbers (double digits) when the cursor is moved away. Am using a mac, it does not show up on Firefox.

    Cheers.


  •   Tara replied privately
  •  8,838
    Tahir replied

    Hey Tara!

    Use this custom CSS to increase the counter width

    .woocommerce .cart div.quantity input.qty { width: 45px; }

    Cheers


    ThemeNectar Support Team 

  • Tara replied

    Hi Tahir,

    Thanks very much for that, it works nicely.

    Is there a way to have it not show up at all?

    Cheers.

  •  8,838
    Tahir replied

    Hey Tara!

    Use this CSS

    .woocommerce .cart div.quantity input.qty {display:none; }

    Cheers


    ThemeNectar Support Team 

  • Tara replied

    Hi Tahir,

    That snippet removed the input space, I was hoping just to remove the add/minus button that appears (please see attached file).

    If it is perhaps that it takes some modding of files I can muddle my way through if you could point me in the right direction. 

    Thanks for your time.

    Tara :)

  •  8,838
    Tahir replied

    Hey Tara!

    No i am afraid you will have to live with it as its a jquery component so simple css wont be able to override it. 

    Cheers


    ThemeNectar Support Team 

  • Tara replied

    Ok then,

    Thank you for your help.

    Take it easy :)

  • Tara replied

    Hi,

    This solution was posted in the Salient comment section on Themeforest to remove the counter that pops up,

    Add this into the Custom CSS box located in your Salient Options panel.

     .quantity input[type=number]::-webkit-inner-spin-button, 
    .quantity input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }

    Tara