Home Forums Art WordPress Theme Change size button – Products page

This topic contains 12 replies, has 2 voices, and was last updated by  LLoom 1 day, 7 hours ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #17754

    LLoom
    Participant

    Hi,

    I need to to reduce the size of the “add cart” button in the product page.

    How can I do it?

    Thanks,

    LL

    #17756

    BWSM
    Keymaster

    Hi,

    Do you talk about the single product page?

    Please paste the custom css code to “Appearance > Customize : Additional CSS”

    .woocommerce button.button.single_add_to_cart_button {
        font-size: 12px; 
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
    }
    .woocommerce #content .quantity input.qty, .woocommerce .quantity input.qty, .woocommerce-page #content .quantity input.qty, .woocommerce-page .quantity input.qty {
     font-size: 12px; 
        width: 30px;
        line-height: 30px;
        height: 30px;
    }

    Regards!<br>
    Bwsm – uiueux.comTwitterFacebook

    #17765

    LLoom
    Participant

    hi,

    Thanks. It works pefect.

    Is it possible to remove the title of the “Description” and “additional information” under the picture in the single product page?

    Also to remove the information about “Category”, “Sku”

    Regards,

    LL

    #17769

    BWSM
    Keymaster

    Please use the custom CSS to remove “Description”, “Additional information” and category/sku:

    
    .tab-content > .tab-pane > h2,
    .product-single .product_meta {
        display: none;
    }
    #17774

    LLoom
    Participant
    This reply has been marked as private.
    #17775

    BWSM
    Keymaster

    It shows 502 Bad Gateway when I clicked Enter with the password

    #17781

    LLoom
    Participant
    This reply has been marked as private.
    #17784

    BWSM
    Keymaster

    1. Please use the custom CSS to remove table:

    .tab-pane .shop_attributes {
        display: none;
    }

    It’s not possible to add more text as I know.

    2. To reduce font size:

    .cart-collaterals .cross-sells h2, .entry .cart_totals h2, .woocommerce.woocommerce-cart table.shop_table thead, .woocommerce-page.woocommerce-cart table.shop_table thead, .entry .lined-heading, .entry .cart-summary h3, h3#order_review_heading, .entry #ship-to-different-address > label, .cart-empty, .entry h3#login-form-modal {
        font-size: 11px;
    }

    To reduce button size, it should affect other buttons of Woo:

    .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button {
        height: 30px;
        line-height: 30px;
        padding: 0 12px; 
        font-size: 12px;
    }

    3. The border width has been 2px and 1px now, The current CSS is:
    You could change the vaule as what you want

    .woocommerce table.shop_table thead th, .woocommerce-page table.shop_table thead th,
    .woocommerce.woocommerce-cart table.shop_table, .woocommerce-page.woocommerce-cart table.shop_table  {
        border-bottom-width: 2px;
    }
    .woocommerce.woocommerce-cart .cart_totals table.shop_table, .woocommerce-page.woocommerce-cart .cart_totals table.shop_table {
        border-top-width: 2px;
    }
    .woocommerce-page table.shop_table tbody td, .woocommerce-page table.shop_table tbody th {
        border-bottom-width: 1px
    }

    To reduce the table text, use custom CSS:

    .woocommerce.woocommerce-cart table.shop_table, .woocommerce-page.woocommerce-cart table.shop_table,.woocommerce input {
        font-size: 11px;
    }
    

    4. To align, use the custom CSS:

    .product-single .variations label { 
        padding: 0;
    }
    .woocommerce button.button.single_add_to_cart_button { 
        margin-left: 0;
    }

    Font size:

    .woocommerce-variation > div { 
        font-size: 14px;
    }
    .woocommerce .nav-tabs > li > a,
    .tab-content>.tab-pane { 
        font-size: 11px;
    }
    • This reply was modified 1 week ago by  BWSM.
    #17791

    LLoom
    Participant

    Hi,

    First of all, sorry for the incovenience and thanks for the support.

    It will be possible to add in the css text in the “aditional information” if this text will be the same for all the products?

    Thanks,+

    LL

    #17793

    BWSM
    Keymaster

    Welcome.
    You could add text in CSS like:
    #tab-additional_information:after{content:'xxxx';}
    It will show on all products.

    #17794

    LLoom
    Participant

    Hi

    Thanks, it works perfect.

    One more thing, when the product is variable and I apply an image to each variation then the images are not show in the website when you click in the different variations, do you know the reason?

    Thanks.

    LL

    #17795

    BWSM
    Keymaster

    Hi, welcome.

    It needs to recover the Woo function, please refer to this post: https://www.uiueux.com/forums/topic/woocommerces-variable-product-and-product-gallery-display/#post-15480

    Regards~

    #17862

    LLoom
    Participant
    This reply has been marked as private.
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!