Support » Plugin: WooCommerce » Woocommerce: My Account – Address details alignment (conflict between two tabs)

  • Resolved josephdreems

    (@josephdreems)


    Wondering if anyone can help please.

    I’m having a problem with lining up the Shipping Address details with CSS (an instance in the “Edit Address” and “View Order” tabs) in the My Account section in Woocommerce.

    By default the Shipping address under “View orders” is properly aligned, however when viewing “Edit Address” the shipping address is not aligned. Too high up.

    I’ve successfully managed to align the instance (under Edit Address) with CSS, however the problem is the same class is connected to the shipping address for any Order under “View Orders”.

    When correcting the alignment under Edit Address it subsequently goes out of alignment under any Order info within View Orders.

    It seems the Shipping Address under View Orders is originally properly aligned, so when correcting the info under Edit Address, it pushes the info out of alignment.

    Can anyone please advise?

    Thanking you in advance.
    Steven

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support John Coy

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @josephdreems

    This is specific to the active theme and the theme author will likely be best to help with this. Others may be able to help here if you’d also post your site address so we can see what theme you have active.

    Thanks,

    Hi John

    Thank you for your feedback.
    I thought this would be a standard Woocommerce styling bug: contacted them, and they just mentioned should try open a question on this support forum as they don’t offer support on their free plugins.

    I’m currently using the Oxygen theme from Laborator:
    https://themeforest.net/item/oxygen-woocommerce-wordpress-theme/7851484

    The site still currently has the Coming Soon page active until 1 October, however excluded this page to view: https://proviid.com/my-account/

    If anyone would give some further feedback would be appreciated.
    Willing to make the site live for a period for a proper look.

    Plugin Support John Coy

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @josephdreems

    Thanks for the followup! It’s likely that the active theme’s styling is what’s causing the issues. Have you tried contacting them? Could you provide us with the Status report found under WooCommerce > Status > Get status report? I’d like to see if the active theme applies template overrides to WooCommerce.

    Hello,
    I have almost the same problem, but on the payment page, with the shortcode [woocommerce_checkout]. I am using bootstrap 4.1 in the frontend of my theme.
    You can start the shopping cart:
    https://mesabienesraices.com/herramientas-para-jardineria/
    Select 1 product (Añadir al carrito) –> clic View cart (Ver carrito) –> clic Finalizar compra –> Showing payment page.
    The Billing Details (Detalles de facturación) and Additional Information (información adicional) columns are very small. However, your order (tu pedido) looks good.
    Checking this with firebug, i see the file plugins/woocommerce/templates/checkout/form-checkout.php, 41-49 lines, has:

    
    <div class="col2-set" id="customer_details">
    	<div class="col-1">
    		<?php do_action( 'woocommerce_checkout_billing' ); ?>
    	</div>
    	<div class="col-2">
    		<?php do_action( 'woocommerce_checkout_shipping' ); ?>
    	</div>
    </div>
    

    And the col-1 and col-2, they are bootstrap selectors, with 8.33% of width.

    I changed the classes to col-sm-2, but the style of the form is disrupted. So I think it’s a WooCommerce problem. Any ideas how to solve it?
    Thanks you.

    Plugin Support John Coy

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @mcamposs

    Is this still an issue after switching back to a default theme like Twenty Seventeen and disabling all plugins except for WooCommerce?

    Hello John,
    Thanks for your reply.
    I already tried it:
    1.- Changing the theme, without disabling the plugins, the problem does not arise.
    2.-Maintaining the theme with Bootstrap 4x, and deactivating all plugins, the problem always occurs.
    As I see it, it’s a conflict with Bootstrap, because WC use the same classes, differently.
    Question: When deleting the col-1 and col-2 classes of woocommerce, the style of the form is lost, where can I modify the style? Because I do not see a custom css.

    Plugin Support John Coy

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @mcamposs

    Changing the theme, without disabling the plugins, the problem does not arise.

    You may want to let the theme author know and I am sure they can direct you in resolving the issue.

    @johndcoy problem is the grid.css which is integrated into this theme. I haven’t seen that used in years. Unfortunately as I told them and someone else the selectors from gridd.css and WC are the same. That’s why most responsive frameworks got away from using col-1 and col-2

    Bootstrap is the author of the theme. Bootstrap is the best grid system in the world, because it is oriented first to mobile devices. So successful is that WC also uses it!

    @mcamposs Bootstrap is making themes now? That’s news to me. They’re an okay framework. We all have our own favs I’m sure. I think foundation is the best.

    And Bootstrap was not the first. The first was the Grid and Audi was the first to use it.

    Plugin Support John Coy

    (@johndcoy)

    Automattic Happiness Engineer

    Hi @mcamposs

    Try reaching out to the theme author and let us know what you find.

    https://laborator.ticksy.com/

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Woocommerce: My Account – Address details alignment (conflict between two tabs)’ is closed to new replies.