New update collapsed Extra product option fields on product page

Comments

• Phil

  April 2022

  Hi,

  Please, put the following CSS code in Betheme -> Theme options -> Custom CSS & JS -> CSS, and check if the problem persists.

  .single-product .entry-summary .variations_form .woocommerce-variation-add-to-cart{
     flex-direction: column!important;
  }
  

  Thanks

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

  April 2022

  Hi,

  I used the css. It put those fields down but the quantity selector position has affected, which has moved up.

  

  
  

  Secondly, I've been using extra product options extensively on product page and I have different field types for different category of products. The css provided had effect only on the product link I provided. The rest is still collapsed. For example this https://opticone.ae/product/acuvue-oasys-1-day-for-astigmatism/ . These fields are further styles with css. Do you suggest to re-do the css for these?
• joicejose

  April 2022

  Here's another product which has used a simple selector above the Add to cart button, and an upload button below. Now everything has gone to same line, squeezed and collapsed. https://opticone.ae/product/sports-basketball-goggles-with-prescription-medium-size-258/
• Phil

  April 2022

  Please, try this code:

  .woocommerce form.cart{
   flex-direction: column!important;
  }
  .woocommerce form.cart .select2-selection{
     height: 100%!important;
  }
  .woocommerce form.cart .select2-selection .select2-selection__arrow{
     top: 25px!important;
  }
  

  But unfortunately, I cannot help with the quantity and add-to-cart button alignment.

  
  

  Best regards

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

  April 2022

  Hi Phill

  
  

  Thank you for the help. I have replaced the first line of css with the latest one you just provided, and everything back to normal, except for some products.

  The fields which were collapsed and squeezed are back to their position now.

  
  

  But there were some products with their fields were fine with the previous code are now collapsed. here is an example https://opticone.ae/product/luminous-yearly-color-contact-lenses-yearly-colored-lenses-with-power/.

  
  

  These affected fields share the same section, uses the same wrapper class & input classes and contains same type of field (selection) of https://opticone.ae/product/sv-1-67-blue-uv-capture-crizal-alize/ these ones. But this field looks fine.

  The products which has affected fields belong to a single product category- if that has anything to do with this. I tried to create new fields for those products but the result is same.

  I really appreciate your help and thanks a lot for putting your time into this.
• joicejose

  April 2022

  Hi,

  Well, I used both css and the fields are working fine. Sorry, I thought you wanted me to replace the first one with second set of css.

  Thank you so much !

  Before closing this thread, can you help to align the quantity selector as it used to be? The css worked very well for the fields but moved the quantity selector above the Add to cart button. ( it used to be before the button, on the same line) This probably be the last thing I would ask, at least for now.

  
  

  Thanks a ton again.

  

  
  
• Phil

  April 2022

  Unfortunately, I am not able to get these two in the same row.

  It would require more advanced CSS or file modification, and with that, you should contact your web developer because we do not provide help with that.

  
  

  Best regards

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

  April 2022

  Alright. No worries. I'll check with our developer.

  
  

  Many thanks for your support to fixing the other issues.

  
  

  Cheers

  jo