Woocommerce: How to change size buttons place order in cart and checkout

Hi Lorro,

Thank you very much! It is working now completely! Now I have beautiful buttons on the cart and checkout! I appreciate your help!

I have been looking for a long time for a solution for this issue and finally it is solved now!

With kind regards,

Gaston
https://www.computershop-online.nl

Yes, responsive means the page reformats for a small screen, but, to me, responsive also means that a website responds to the user’s clicks promptly and does the next action. In the case of you shop pages, there is a delay after each click while my cpu and fan max out. I cannot click quickly from page to page.

Maybe its just me. Ask some friends to try out the site and get a spread of views.

Hi Lorro,

Ah okey, in my opinion is that AJAX , i also looked a while for that, but couldn’t find a solution for that. Yes you are correct, that the website is reloading every time from page to page.

Hi Lorro,

FYI

I just checked on Google, Responsive webdesign is indeed that the website scales to the screen resolution off the device. And AJAX is the technology that lets you update the contents of a page without actually having to reload the page in the browser.

As a reference:
https://www.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/

Responsive means “reacting quickly and positively”. The exact manner of the reaction depends on the context.

Responsive web design for reacting to screen size, or responsive web pages for reacting promptly to user input. There are possibly other meanings as well.

Hey lorro. Is it possible to change the button on my product page to get it larger? It’s an external affiliate type
https://weeaboodesu.com/product/virus-capsule-resident-evil-necklace/

any help much appreciated thanks

.woocommerce a.single_add_to_cart_button {width:180px; text-align:center; line-height:22px; font-size:16px}

Wow, great help for the buttons!

Thanks,

Kai · The WpUtd Team
Visit https://wordpressuptodate.com

Awesome! Thanks so much lorro!! ??

Is it also possible to shift the button and price down to be inline with the bottom of the featured image? Like something similar to this page https://www.thisiswhyimbroke.com/heart-shaped-umbrella

Thanks

I think that feature has to be built in to the page template, not added later.

Ah thats ok thanks. On another button related question, the buttons on my homepage are a different colour from the product page as you can see here https://weeaboodesu.com/ but there’s no option in the woocommerce settings to change them like I’ve found in other threads. Can you change the colour through CSS or editing a file in FTP?

Did you try this plugin:
https://www.ads-software.com/plugins/woocommerce-colors/

Come back if it won’t do what you want.

Amazing! Worked like a charm thank you ??

Hi, I’m having a hard time updating my Checkout button ore other cart buttons. The checkout button always covers up other text on my checkout page.

Here’s the page:

https://ldspianohymns.com

I’ve changed the following code in my style-woocommerce.css, but however I change it, it has no effect (changed to width: 10% and did nothing, tried to specify pixels, etc. and it did nothing:

.woocommerce .checkout-button,
.woocommerce-page .checkout-button {
width: 100%;
}

I can’t find anything any references in my style.css to woocommerce or a checkout button.

Any help is greatly appreciated. Thanks!

John Tyler
https://ldspianohymns.com

There’s no text under the checkout button. The words “subtotal and “total” are displaced to the right so they are not covered up. I think this is how its supposed to be. However, there’s some scope for improvement of the checkout page.

You have a cache running and this makes it hard to be sure if one is looking at a cached page or at the result of a recent change, so I’d turn off the cache until any re-development work is complete. I think its the cache that’s minifying the style sheets. This makes it difficult to see what’s happening in browser tools, since the source of each style is masked, so another reason to turn off caching for the time being.

I advise not editing woocommerce.css since any edits will be overwritten by updates. Suggest you restore woocommerce.css to what it was. If your theme does not have a setting where you can enter custom css, you can use a plugin like this one:
https://www.ads-software.com/plugins/simple-custom-css/
This plugin loads styles last so they take precedence.

Suggest updating your theme to the latest version 1.4.1. However, even this version is 18 months old, and WooCommerce has moved on a bit in that time.

Updating program elements is the way to go, but may bring its own problems. You’ll need to consider if you have the resources to do this and if its worthwhile for the present problem. Take a backup if updating.

Unfortunately your site is difficult to work on in its current state.