How to change product category page & single product page "add to cart" button

I want to increase the size of “add to cart” button & quanity input table in my shop product category and single product page, also increase the font size of “compare” “add to wishlist” link, SKU tag & Category tag.

See the screenshot link in the private content, marked in red arrow.
https://prnt.sc/1rsb2w1

How to do that ?

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

For Single Product page quantity and add to cart:

.single-product div.quantity input[type="button"] {
    min-width: 45px;
}

.single-product div.quantity input[type="number"] {
    width: 45px;
}

.product-image-summary .single_add_to_cart_button {
    width: 200px;
}

For Wishlist and Compare:

.single-product .wd-action-btn.wd-style-text>a {
    font-size: 18px;
}

For Categories and SKU:

.single-product .meta-location-add_to_cart .product_meta>span {
    font-size: 15px;
}

Best Regards

Thank you, the code works, but I am not content with the result, the button width is long, but the height is short.

How to achieve the button circled effect like screenshot below, the input quantity form and button width don’t have to be the same.
https://prnt.sc/1rsx0hk

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-image-summary .single_add_to_cart_button {
    width: 200px;
	border-radius: 50px;
    height: 55px; 

	}

input.plus {
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

input.minus {
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}

Best Regards

The add to cart button doesn’t change at all, only the input quantity form changed to circled round effect

Hello,

Please make sure that you have added the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.product-image-summary .single_add_to_cart_button {
    width: 200px;
    border-radius: 50px;
    height: 55px;
}

If it still doesn’t work then provide the admin panel login details of the website.

Best Regards

Yes， I added all the code you sent, see screenshot.
https://prnt.sc/1rtdhx4

Hello,

Please provide the admin panel login details to let me assist you further.

Regards.
Xtemos Studios.

OK, please check link in the private content, you can login as admin without any password. The link would expire in 24hrs.

Hello,

Your issue has been Resolved. Now the CSS is working.

Please clear cache and check back.

Best Regards

Thank you, sir, I also want to change the font size of the product tab like screenshot below

https://prnt.sc/1s50e03

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.tabs-layout-tabs .tabs li a {
    font-size: 24px;
}

Best Regards.

Also, I want the product tabs title showing capitalized letters, not upper-case letters.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.tabs-layout-tabs .tabs li a {
    text-transform: capitalize;
}

Best Regards

[Author]

Posts