This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Woocommerce shop image size display in fullwidth

Open 5 replies customizationpremiumthemetheme-vantage
Rae Trinity Del Cerro Floreado
10 years ago · Last reply by Support Assistants 10 years ago

Dear SiteOrigin,
I’ve been trying to set a shop that displays 3 products per line, that means I had to enlarge the right-margin and also the width percentage. I did so. I also deleted everything in the sidebar to make it disappear and have a fullwith shop. Te problem is, that the second line shows only one producto, and the other two products are in a third line. Why is that?
http://lamanoediciones.cl/wordpress/tienda/

Thanks in advance!

URL: http://lamanoediciones.cl/wordpress/tienda/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 10 years, 3 months ago

    Hi Rae

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product:nth-of-type(3n) {
	clear: right;
	margin-right: 0;
}
  2. Rae Trinity Del Cerro Floreado 10 years, 2 months ago

    Thank you Andrew!
    :)

  3. Andrew Misplon Staff 10 years, 2 months ago

    For sure :)

  4. Rae Trinity Del Cerro Floreado 10 years, 2 months ago

    Dear Andrew,
    the problem persists. I put the code you told me but images displayed without space between them. After that I put a margin between images because I need them to have space. An also to center everything. Everything was all right, but when I uploaded new products, the problem was still there: there is a line with only one product.
    http://lamanoediciones.cl/wordpress/tienda/

    I hope you can help me with that!
    Thanks!

  5. Support Assistants 10 years, 2 months ago

    Hi Rae

    Let’s try the following:

    1. Download the following child theme which will get WooCommerce to set the products per row to three:

    https://siteorigin.com/wp-content/uploads/2015/12/vantage-child-woo-3-per-row.zip

    2. Install from Appearance > Themes > Add New: Upload Theme.

    3. Activating a child theme will cause menu location and Customizer > Theme Design settings to reset, this is an expected result. Test the child theme out before redoing settings.

    Remove our previous Custom CSS with regards to WooCommerce product widths and margins. Add the following instead:

    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 30.05%;
    }

    This seems to be working well for me in testing.

    Hope it helps.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread