• Resolved ojs81

    (@ojs81)


    Apologies for the basic question but I’m having a weirdly difficult time altering the height of the quantity buttons, can anyone suggest how best to achieve this please?

    Screenshot

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Niels Lange

    (@nielslange)

    Howdy @ojs81,

    try using the following wrapper for your CSS statement:

    table.cart .product-quantity .minus,
    table.cart .product-quantity .plus {
      // Your CSS code goed here 
    }
    Thread Starter ojs81

    (@ojs81)

    Thanks very much for this, I’m afraid I’m still having trouble though. I’ve tried matching the line height, padding, and margin to the adjacent button without success, do you know what I might be missing?

    Live link

    Plugin Author Niels Lange

    (@nielslange)

    Howdy @ojs81,

    It seems that the buttons are using different display types. While the buttons and the amount are using display: inline-block; the PRE-ORDER button is using display: flex;. This causes a slight misalignment of the buttons. While providing custom CSS is usually not part of plugin support, I just went ahead and created the following CSS statement to align the buttons:

    
    .woocommerce .quantity .minus,
    .woocommerce .quantity .plus  {
      padding: 18px;
      vertical-align: super;
    }
    .woocommerce .quantity input[type=number] {
      padding: 18px;
      vertical-align: top;
    }
    

    Before:
    https://cld.wthms.co/HDy1Tc

    After:
    https://cld.wthms.co/A5BSIT

    This should do the trick. 😉

    Thread Starter ojs81

    (@ojs81)

    Ah fantastic, thanks so much for your help!

    Plugin Author Niels Lange

    (@nielslange)

    Howdy @ojs81,

    I’m happy to hear that it’s working as expected! 🤗 Would you mind rating the plugin (and potentially the support 😁) via https://wordpress.org/support/plugin/smntcs-woocommerce-quantity-buttons/? 😉

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling buttons’ is closed to new replies.