WordPress.org

Forums

Virtue
[resolved] Smaller add to cart button (7 posts)

  1. Joseph
    Member
    Posted 8 months ago #

    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!

  2. sacredpath
    Moderator
    Posted 8 months ago #

    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;
    }
  3. Kadence Themes
    Member
    Theme Author

    Posted 8 months ago #

    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

  4. Joseph
    Member
    Posted 8 months ago #

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

  5. Joseph
    Member
    Posted 8 months ago #

    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?

  6. Kadence Themes
    Member
    Theme Author

    Posted 8 months ago #

    Use this css:

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

    Kadence Themes

  7. Joseph
    Member
    Posted 8 months ago #

    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;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.