Position of variations/product add ons

apollonaudio

Hi!

We just bought your theme and we want to set up a woocommerce shop. But when we add "product add ons" from woocommerce it shows them left of the add to cart button... we want to show product add ons/variations above or below the add to cart button. Can you please help?

Screenshots below.

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.

Screenshot 2022-09-19 at 16.14.00.png

274.39 KB

This is an embed external element. It can be deleted using the delete key or the backspace key. To view the full element, press the preview button below.

Screenshot 2022-09-19 at 16.26.48.png

236.42 KB

Thanks!

Phil

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

apollonaudio

Hi,

this is a link to one of our products (website is still in the making): https://dev.apollonaudio.com/product/apollon-pet950-stereo-amplifier/

It only moves the add to cart button on "simple products" not on "variable product" where we have some extra options in variables. Example: https://dev.apollonaudio.com/product/apollon-purifi-1et400a-stereo-amplifier/

Thanks

apollonaudio

Somewhere on google i found this:

The theme appeared to be unmodified, but the theme author had defined .summary .cart {display: flex; } which was causing “woocommerce_before_add_to_cart_button” and “woocommerce_after_add_to_cart_button” to be positioned on the side of the button.

Maybe this is related to my problem? But I don't know the solution or how to solve it.

Phil

Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS, and check if it is what you wanted to achieve.

.single-product .cart{
 flex-direction: column;
}
.single-product .cart .quantity{
  margin-bottom: 15px!important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

apollonaudio

Thank you, it works! But now it is positioned center. I want it positioned left or more importantly that everything is the same width. .Also could the "quantity" and "add to cart" be on the same line, not quantity above the add to cart?

Big thanks!

apollonaudio

So from this:

To this:

Phil

Please, try the following CSS code instead:

.single-product .cart{
 flex-wrap: wrap;
}
.single-product .cart > *:not(.quantity):not(.single_add_to_cart_button){
 flex-basis: 100%;
}
.single-product .cart .single_add_to_cart_button{
   width: 50%!important;
}

The button cannot be 100% wide because then it will go to the next row.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

apollonaudio

Thanks! That's it!