Cannot Center Woocommerce Shop items

[taffy]

Hello!

I’ve googled for css and tried to use many suggestions to center align the products in my shop page using Custom CSS (I tried Additional CSS – WP Setting as well as some others) to no avail. Only two products so far, and they are left aligned. No luck searching Woocommerce support (yet) See:

https://dixieaaoffice.com/dco-store/

Any suggestions appreciated. Thanks!

 

[scrambler]

Are you trying to center the three items in the page, or center the product description at the bottom?

The first one would not be very useful as ultimately you will have more product and they will take the whole space.

[taffy]

Thanks Scrambler

I was asked to center the three items (not the descriptions underneath), but you are right – eventually there might be more items later on. We’re going to trash the first test item soon, leaving the two which will be over to the left. Not sure if it would hurt to have items centered even if products grow to more than one line or if centering would have a negative effect later. But if it were just pasting in some CSS I could always delete it later. Any ideas would be appreciated. Roger

[scrambler]

Doing that would necessitate top undo woocomerce styling and redo it differently and may cause problems when you will have more products on several rows

.woocommerce .products ul, .woocommerce ul.products {text-align:center;}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {float:none;display:inline-block;}

But that may break other part of the site

[Weaver]

Note: We’ve just discovered a problem with how Weaver lays out products on a shop page depending on the sidebar layout you use. This may or may not be relevant to your issue described here.

This will be fixed in a new release of Weaver Xtreme within a week.

[MikeDrum]

This might not help long term, but I just used Woocommerce short codes instead of actual pages.

[taffy]

Thanks MikeDrum. Using shortcodes still does not allow formatting such as centering. I did a test page using [products] shortcode, centering it on the page. All are still left justified.

At this point I will tell our team it’s not practical to center products. It’s really not that important and there is no easy risk-free fix. Thanks to Scrambler and the forum.

[Weaver]

Are you talking about products on the shop page (where multiple items are listed), or on a single item’s page (WordPress single page view of a post – which is actually what Woo each Woo product is)?

If the latter, it is possible there may be issues until the new version of Weaver Xtrem is released later this week.

[taffy]

shop page.

[Weaver]

I don’t think that is anything that can be easily controlled by the theme or custom css.

Woocommerce wraps the product list in <ul class=”products columns-6″>. There seems to also be rules for switching to 2 columns for mobile devices.

There might be options in Woo to set these, or you could contact Woo support to see if they have custom css or other ways to change the layout of the products on the shop page.

 

[Author]

Posts