New update collapsed Extra product option fields on product page

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

  • 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

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

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

  • 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

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

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


  • 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

  • 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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.