I want to make add to cart button and checkout button width percent of container

[cyberman]

I want to increase the width of button because when the user browse product detail page in desktop. The button is too small. I want to increase this button and make it depend on container size because if I fix button width to px , the button is too big when browse on mobile phone. so I add css below  to claue custom css style. But  the button is smaller than the original before add css. How should I  fix this?

2. How to increase the height of box for selecting number of pieces of item that is on the left of add to cart button?  From image that I attached, its height is smaller than add to cart button because I increase height of add to cart button.

3. For checkout button at checkout page, How I increase button width to percentage ?

Here’s css that I added to increase add to cart button size but it doesn’t work

button.single_add_to_cart_button.button.alt { border:none ; color: #fff; text-transform: uppercase; position: relative; height: 50px; line-height:36px ; width: 40%; background-color : #ff680a ; padding: 0 10 px; }

button.single_add_to_cart_button.button.alt:hover { border:none ; color: #fff; text-transform: uppercase; position: relative; height: 50px; width: 40%; line-height:36px ;background-color : #ff680a ; }

 

a.checkout-button.button.alt.wc-forward, input#place_order.button.alt { border:none ; color: #fff; text-transform: uppercase; position: relative; height: 50px; line-height:46px ;background-color : #ff680a ; padding: 0 34 px; }

a.checkout-button.button.alt.wc-forward:hover, input#place_order.button.alt:hover { border:none ; color: #fff; text-transform: uppercase; position: relative; height: 50px; line-height:46px ;background-color : #ff680a ; }

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Could you send us your site url, we will check and help you solve.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[cyberman]

This reply has been marked as private.

[cyberman]

Did you go to url?

[sebin]

I also want to change the button size too. I want to change it to a bigger green button like in the attached screenshot. Please help me. Thanks in advance.

Live demo of the cart button: https://horsinround.com/products/grandma?variant=31427412749

Attachments:

You must be logged in to view attached files.

[Harry]

@cyberman Sorry i miss your message. I check your site it now work well. Did you fix?

@sebin Do you want hide quantity control box and make add to cart button full width?

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[sebin]

Yup, Quantity control box available in cart popup. So doesn’t matter. Please help me to remove quantity box and make the button full width.

[sebin]

This reply has been marked as private.

[Harry]

@sebin i help you make the button full width please check and let me know.

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[sebin]

Thanks, Harry. But the cart button is not showing in full width.

Could you please check this page- https://www.livedeals.online/product/super-ceramic-coating-waterproof-anti-scratch/

I would like to make it like in the attached screenshot. Color: #4bbd31

Please change sky blue colour to green (#4bbd31). Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Foster]

Hi

I have fixed the problem for you, please check.

BTW: Please remove your website information on this topic, because this ticket is not your ticket. And please kindly open up new tickets for additional questions. In general please avoid adding more than one question per ticket to help us give you a quality service and keep things organized and be able to focus on one problem in details.

[sebin]

Thank you so much. It’s perfect now 🙂 I  hope you added the customization to child theme! Btw how to remove my website details from my old posts? I can’t find any option to edit or delete my posts. Can you do it for me!

[sebin]

Foster wrote:

Hi I have fixed the problem for you, please check. BTW: Please remove your website information on this topic, because this ticket is not your ticket. And please kindly open up new tickets for additional questions. In general please avoid adding more than one question per ticket to help us give you a quality service and keep things organized and be able to focus on one problem in details.

Hi Foster, can you please let me know which file you edited in order to make ATC button full width on the desktop. Becuase after updating to the latest version, I lost the last edit you have done. Now ATC button is not showing full width on the desktop (but it’s responsive on mobile. I think you added first edits to the child theme and forgot to add the last edit to child). I know my support is expired, but it would be a great help if you can tell me which file you edited because I have theme backup of the last version.

[Foster]

@sebin done

[Harry]

@sebin

I checked your site it now the ATC button is full width, did you fix the issue?

We happy if you renew your support.

Thanks!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[sebin]

Harry wrote:

@sebin I checked your site it now the ATC button is full width, did you fix the issue? We happy if you renew your support. Thanks!

The ATC is full width only on mobile. it’s not showing in full width on desktop.

Ss- http://prntscr.com/io6bff

You fixed desktop problem in post #16916. I’ll renew support if i need any further customisation 🙂

[Harry]

Could you send me the link of product.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[sebin]

Harry wrote:

Could you send me the link of product. Thanks

 

Product link- https://www.livedeals.online/product/lazy-neck-phone-tablet-holder/

 

Thanks in advance 🙂

[Harry]

@sebin

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.woocommerce-variation-add-to-cart {width: 100%;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[sebin]

Harry wrote:

@sebin Please add below code to Claue > Theme Option > General Layout > Custom CSS .woocommerce-variation-add-to-cart {width: 100%;} Best regards

Thank you so much, it’s working 🙂

[Author]

Posts