Position of variations/product add ons

Comments

• Phil

  September 2022

  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

  September 2022

  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

  September 2022

  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

  September 2022

  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

  September 2022 edited September 2022

  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

  September 2022

  So from this:

  

  To this:

  

  
  
• Phil

  September 2022

  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

  September 2022

  Thanks! That's it!