Changing WooCommerce button layout and color scheme

Please post the url of your site so the markup can be examined with browser tools.

https://cowfunding.se/produkt/894/

“L?tt i varukorg” is Swedish for add to cart.

The add to cart button is now at the bottom, I know how to change that using hooks. (https://wordpress.stackexchange.com/questions/114734/how-to-customize-position-of-add-to-cart-of-woocommerce-on-product-page/115097#115097)

But what if I want to change the add to cart button to the right instead? And for example add some space between the button and other elements?

Thanks for your help!

Try this in your custom css:

.woocommerce button.single_add_to_cart_button
{margin-left:50px}

Thank you so much, it worked! I’ve been trying to solve this for ages. So if I wanted to change the position of the price, and where I select the amount of units. What code would that be? And what do I look for in the inspect menu?

It depends on where you want to move it to. To move it rightwards, use:

.price {margin-left:50px}

To change its position in relation to other elements you would use the relevant remove_action and add_action functions.

The amount of units is either by trial and error or the number can be changed in real-time in the inspector.

Thanks once again.

My guess would have been something like:

.woocommerce span.amount
{margin-left:100px};

By just looking with the inspector. What made you consider .price?

Trying to figure out how to move the item quantity https://gyazo.com/c71f666362446f274739c0ce54a6db9a
The one to the left.

The price is held in element <p class=”price”> and I tried it out. I have a Chrome extension called Styler which allows testing of styles.

And the quantity would be:

.woocommerce-page .quantity {margin-left:50px}

Ahh I see, will definitely try out that chrome extension. So if I wanted to change the individual color of the “Add to cart button” .

woocommerce button.single_add_to_cart_button {color:#2d525d;}

But it doesn’t seem to work.

Don’t forget the full stop before woocommerce, and in this case, its necessary to increase the precedence to overwrite another style:

.woocommerce button.alt.single_add_to_cart_button {color:#2d525d !important;}

Thank you again. Ive made some great progress. One last question, when trying to change color I cant seem to overide a css stylesheet named (index):139. You can see it below cowfunding.se/style.css?ver=2.3 when inspecting the add to cart button with chrome.

I see it. The section higher up in the inspector takes precedence, and the reason is the styles in that section start with “body.”, so they are better specified. So do what you are doing but start:
body.woocommerce etc

Thanks! The issue was a function.php in the main theme interfering with the child theme css.

I still quite dont get how you know the code of the buttons, using inspect. For example in the cart https://cowfunding.se/kundvagn/ (You need a product in the cart to see it https://cowfunding.se/produkt/894/ )

I now want to edit the color of the “Fors?tt till kassan” (Proceed to checkout) button.

But when trying with body.woocommerce a.checkout-button nothing happens.

In the inspector, the style that is controlling the appearance is generally near the top. Where there are several selectors, the active selectors are the ones in bold.

body.woocommerce-page a.button.alt,
body.woocommerce a.button
{background-color:#f00 !important; color:#0f0 !important}

That worked! Awesome. But if I look at the “Add to cart button” the one you helped me with first there seem to be at least four line of codes, and none match the one you gave me. Did you use a different method then? Because both worked.

The add-to-cart button colours were controlled by woocommerce.css and the proceed-to-checkout colours were controlled by your theme’s style.css.

By the time different developers have had a go at styling a site on different occasions, its not unusual for the styles to be inconsistent. To my mind, as long as the end result is what’s wanted that’s OK. New requirements will come along soon!