Return to previous page

Single product page: “Add to Cart & Quantity” Layout always centered

This topic has 5 replies, 3 voices, and was last updated 1 years, 5 months ago ago by Rose Tyler

Kris

Participant

May 11, 2023 at 09:58

Hi Support Staff,

I tried to adjust the style of the “Add to Cart & Quantity” under single product page. Whenever I switch to “column” under “direction”, it always become centered, but I want it to be left aligned.

I want the quantity to be on top of the “Add to Cart” but it should be left aligned as the text / titles.

For screencap please check private content area

thank you

Please, contact administrator
for this information.

#356339 Copied Theme version: 9.0.5

4 Answers
Tony Rodriguez

Support staff

May 11, 2023 at 11:21
Hello, Kris,

In order to solve your issue, please choose “column” under “direction” and then please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache:
```
.single-product-builder form.cart .quantity .quantity-wrapper.type-square {
    left: 0 !important;
    position: fixed !important;
}
```
The result should look like this: https://postimg.cc/nC6GbXKM

Best Regards,
8Theme’s Team
#356351 Copied
Kris

Participant

May 11, 2023 at 15:15

Hi Tony,

Sorry but it does not work. In additionally, I also need the “add to cart” to be on the left as well, in your screenshot, it is only the quantity that moved to the left, the add to cart is still centered.

But regardless, even I added the provided code to the css, but nothing changed after clearing the cache.
pls check below screencaps:
https://drive.google.com/file/d/1biP_LXRl-6tuXjJ0ibHnG7pAe27dky6B/view?usp=share_link

https://drive.google.com/file/d/1Q91r15q0y_MWnPA7PqJz5hW2q3z1ApBo/view?usp=share_link

Please contact administrator
for this information.

#356391 Copied
Tony Rodriguez

Support staff

May 12, 2023 at 07:07
Hello, Kris,

In order to solve your issue, please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache:
```
.single-product .woocommerce-tabs.et-clearfix.et_element.wc-tabs-wrapper.type-accordion.toggles-by-arrow.loaded {
    float: right !important;
}
.single-product-builder form.cart {
    float: left !important;
    margin-top: 40px !important;
}
.single-product .et_product-block .single-wishlist {
    position: absolute !important;
}
```
The result should look like this: https://ibb.co/4t14rYy

Best Regards,
8Theme’s Team
#356433 Copied
Rose Tyler

Support staff

May 12, 2023 at 07:33
Hello, Kris,

Sorry for the inconvenience, please use the next custom CSS code:
```
/* set align left for form.cart */
body .single-product-builder form.cart {
    align-content: flex-start;
}
/* set quantity even more left aligned if needed */
body .et_product-block .cart span.dir-column~.quantity {
    margin-inline-end: auto;
}
```
https://prnt.sc/t_xuU1QWTe8_

Kind Regards,
8theme team
#356436 Copied
Tagged: add to cart, centered, layout, quantity, templates, woocommerce, wordpress
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Single product page: “Add to Cart & Quantity” Layout always centered’' has been successfully resolved, and the topic is now closed for further responses

Single product page: “Add to Cart & Quantity” Layout always centered

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection