Support Center Visit Demo License manager Buy @ envato

New update collapsed Extra product option fields on product page

joicejosejoicejose
in WooCommerce

Hello,

I've been using extra product option plugin extensively on my website product pages and after the latest theme update, the product option fields collapsed.

I have used fields before and after the "add to cart" button and now the fields have moved sideways to the Add to cart button, making them obsolete. I would appreciate your support in solving this issue as this is a live website.

I have disabled most of the fields now but here is an example. https://opticone.ae/product/fila-eyewear-vf-1033-stylish-full-metal-eyewear-for-men/ . The paragraph field were under the Add to cart button and now it has moved up next to the button, making the button contracted. Also ,the button color is different here.

Here's a link to another product where no extra product options are given. The cart button color is same as I have opted in the theme option. https://opticone.ae/product/armani-exchange-mens-eyeglass-frame-ax3067-8029/


Cart button color is a secondary issue though. The main issue is the product options' change in the positions.

Hoping for some good news!

Comments

  • PhilPhil

    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
  • joicejosejoicejose

    Hi,

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

    Screen Shot 2022-04-25 at 3.51.34 PM.png


    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?

  • joicejosejoicejose

    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/

  • PhilPhil

    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
  • joicejosejoicejose

    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.

  • joicejosejoicejose

    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.

    Screen Shot 2022-04-25 at 7.19.00 PM.png


  • PhilPhil

    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
  • joicejosejoicejose

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


    Many thanks for your support to fixing the other issues.


    Cheers

    jo

Sign In or Register to comment.