Template file for CSS of the Add to cart and Quanity woo-commerce areas on Ethos stack

[aminternetdesign]

Hi There,

I’m editing the layout of the woo commerce product pages and think I’ve mostly understood the way X is working with it’s templates.
Struggling a bit though to find what’s controlling the positioning of the Add to Cart button and the Quantity selector.
I want to align them so they site next to each other on the same line, which I think is the default for a base install of WooCommerce. But in Ethos on X it’s separating the Add to cart button below with relative positioning.

Are you able to point me in the right direction please?

Thanks!
Mark

[ruenel]

Hey Mark,

Thank you for the very detailed post information.

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.archive.woocommerce .price {
    float: left;
    width: 40%;
    margin: 15px;
    padding: 0.45em 0.5em 0.575em;
}

.archive.woocommerce li.product .entry-header .button {
    float: right;
    width: 40%;
}

We would love to know if this has worked for you. Thank you.

[aminternetdesign]

Hi,

Thanks for your detailed reply.
Sorry I should of explained this is for the Single Product page.

So right now we have this layout from Ethos:

But what I’m looking to achieve is having those elements inline like this:

[rad]

Hi @aminternetdesign,

In that case, please try this CSS as well.

.woocommerce.single-product .quantity  {
display: inline;
}

Hope this helps

[aminternetdesign]

Perfect… thank you!

[ruenel]

You are most welcome!