Taming Woo's button positioning

  • Hi

    My installation is on a local staging server so I have posted screen shots here to described the problem. I am an experienced programmer but not in php / css / wordpress.

    I wanted to overcome the age-old WC problem of the ‘add to cart’ buttons not aliging. I used the following code in my themes custom CSS.

    ‘
    .woocommerce ul.products li.product.woocommerce-page ul.products li.product {
    min-height: 315px !important;
    margin-bottom:10px !important;
    }
    .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    bottom: 0!important;
    vertical-align: bottom!important;
    position: absolute!important;
    margin-bottom: 10px !important;
    }
    ‘

    Note that using ‘!important’ is just temporary for testing; making sure the code does prevail. The result is that the buttons now align.

    https://postimg.org/image/ipcibfecb/

    However, it appears that all WC buttons have inheritied the style and that misaligns other buttons on the page (for example, here is the single product page, with the cart and checkout buttons shunted to the bottom.)

    https://postimg.org/image/5p9vof5ox/

    I tried to over-ride the woo.css by targeting the element; (which appears to be a subclass of a woo button.) This works live on a browser, but the code does not get injected via the themes custom CSS (but other code does.)

    https://postimg.org/image/43kbggx6r/

    Maybe I’m approaching this all wrong? Is there some way of having the add to cart buttons aligned without messing up the alignment of the other buttons?

    Thanks if you can help.

    Richard

    https://www.ads-software.com/plugins/woocommerce/

Viewing 1 replies (of 1 total)
  • Thread Starter rlincoln

    (@rlincoln)

    Ok.. solved my own problem.

    Adding the following code into your themes custom CSS will align the add to cart buttons on the product page while leaving other buttons in their correct position (including on other pages.)

    /* This code aligns the add to cart buttons; leaving other buttons untouched */

    .woocommerce ul.products li.product.woocommerce-page ul.products li.product {
    min-height: 315px;
    margin-bottom:10px;
    }
    #wrapper #content a {
    position: absolute;
    }
    .woocommerce ul.products li.product .button {
    bottom: 0;
    vertical-align:bottom;
    margin-bottom: 10px;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Taming Woo's button positioning’ is closed to new replies.