WordPress.org

Support

Support » Themes and Templates » [Resolved] Smaller add to cart button

[Resolved] Smaller add to cart button

  • I did my best to find a solution but was not able to..
    What I need is to make the add to cart button smaller, meaning, to reduce its height. How can I do that?

    You can see the button here. I need to make it smaller and to show the +/- buttons correctly.

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • sacredpath

    @sacredpath

    Automattic Happiness Engineer

    Hi there, you can edit the font size and line-height for the text within the button and the quantity box with the following CSS. Add this to the child theme style.css file and edit the values as desired.

    .product .kad_add_to_cart {
        font-size: 14px;
    }
    .product .entry-summary .kad_add_to_cart {
        line-height: 30px;
    }
    .woocommerce .quantity input.qty {
        height: 30px;
    }

    Theme Author Kadence Themes

    @britner

    You may want to add this too so the plus minus sign look ok:

    .woocommerce .quantity .plus, .woocommerce-page .quantity .plus, .woocommerce #content .quantity .plus, .woocommerce-page #content .quantity .plus, .woocommerce .quantity .minus, .woocommerce-page .quantity .minus, .woocommerce #content .quantity .minus, .woocommerce-page #content .quantity .minus {
    height: 15px;
    }

    Kadence Themes

    Awesome! Thank you! I really appreciate all your help!

    I checked with Firefox too and I see that next to the +/- sign there are arrows too, up and down arrows. Why is that and how can I remove/hide them?

    Theme Author Kadence Themes

    @britner

    Use this css:

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

    Kadence Themes

    I had to add it like this in order to work:

    /* hides the spin-button for firefox */
    input[type=number] {
        -moz-appearance:textfield;
    }
    /* hides the spin-button for chrome*/
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] Smaller add to cart button’ is closed to new replies.