Change size button – Products page

[LLoomParticipant]

Hi,

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

How can I do it?

Thanks,

LL

[BWSMKeymaster]

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.com – Twitter – Facebook

[LLoomParticipant]

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

[BWSMKeymaster]

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

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

[LLoomParticipant]

This reply has been marked as private.

[BWSMKeymaster]

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

[LLoomParticipant]

This reply has been marked as private.

[BWSMKeymaster]

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 4 months, 1 week ago by  BWSM.

[LLoomParticipant]

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

[BWSMKeymaster]

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

[LLoomParticipant]

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

[BWSMKeymaster]

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~

[LLoomParticipant]

This reply has been marked as private.

[Author]

Posts