WooCommerce shop layout

  • Resolved Ely1

    (@ely1)


    9 years, 6 months ago

    I have added the Woocommerce plugin to a parallax theme for a new shop website.

    I have added the products where they need to go but it does not look good on the page when I view in a ‘live’ state. The buttons do not fit inside the boxes and they don’t line up.
    https://onwardtradingdev.freshapproachpr.co.uk/lighting/

    I am guessing this is to do with the plugin, is there anyway I can work on adjusting how the layout looks or how the boxes are displayed?

    Thanks in advance.

Viewing 10 replies - 1 through 10 (of 10 total)

  • Add the below code into your css, it makes the button fit into the border.
    The heights of the different product boxes will still be a bit different because some of them have 2 line titles, but it’ll look a LOT better ??

    .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
   font-size: 14px !important;
}

.woocommerce ul.products li.product .button {
   width: 100% !important;
}

    Let me know how that works for ya

    The problem is most likely in your theme, not the plugin.

    @wp Gurus, the code I submitted is a good patch tho. It’ll work well.

    Yes it should work just fine ??

    Thread Starter Ely1

    (@ely1)

    Thank you jakedohm, the code does work but I am still experiencing some alignment issues. See this page – https://onwardtradingdev.freshapproachpr.co.uk/sample-page/

    Is there a way to align the text in the button to sit to the left so it all fits in the box?

    Thread Starter Ely1

    (@ely1)

    WP Gurus, would you recommend that I use a specific theme?

    Hi Ely1,

    Replace the code I gave you for .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button

    With this:

    font-size: 12px !important;
margin-left: 0px;
text-align: center;
height: 24px;

    EDIT: Also add a height to the same div class as above:
    `height: 24px;’

    Let me know if you have ANY more trouble ??

    Thread Starter Ely1

    (@ely1)

    Thank you jakedohm

    Thread Starter Ely1

    (@ely1)

    It worked!

    I would also recommend adding this code: 

    .woocommerce ul.products li.product h3 {
padding: .5em 0;
margin: 0;
text-align: center;
padding-right: 2px;
padding-left: 2px;
font-size: 1em;
}

.woocommerce ul.products li.product .price {
padding-left: 10px;
}

    I just makes the titles and prices look a bit better ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘WooCommerce shop layout’ is closed to new replies.