Centering WooCommerce Products with D5 Creation

[D5 Creation]

You may know that all of our Extended Version Themes are ready for E-Commerce with WooCommerce Plugin. Some of your Themes can show the Products in Front Page if you activate the options from WP-Admin > Appearance > Theme Name Options > E-Commerce.

Some of you may want to center the Products. But, the styling is controlled by WooCommerce Plugin. You may set the Products with or without parameters like this

[products ]

[products columns="4" ]

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

[products limit="4" columns="2" visibility="featured" ]

[products limit="3" columns="3" best_selling="true" ]

[products tag="business" limit="4"]

[products category="something" limit="9" columns="3"]

You can find a details list of WooCommerce ShortCode Here. You can use those with our Themes.

The products on the product page cannot be centered unless you do that on your own with code customization. Unfortunately the default setup for woo shop page is 4 columns. To change that will require custom coding. There is not an easy way to center the 3 posts either, it’s looking for 4 posts so centering 3 will still show an empty 4th spot. But you can still make the products centering with our Themes following This Technique.

You can add this in the WP-Admin > Appearance > Theme Name Options > General > Custom Code within Head Area Box

<style> .woocommerce ul.products { display: flex; justify-content: center; flex-wrap: wrap; margin: 5px -10px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin: 10px 10px 20px !important; min-width: 170px; } @media screen and (max-width:900px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(33% - 20px) !important;} } @media screen and (max-width:600px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(50% - 20px) !important;} } @media screen and (max-width:500px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(100% - 20px) !important;} } </style>

1 2 3 4 5 6 7

<style> .woocommerce ul.products { display: flex; justify-content: center; flex-wrap: wrap; margin: 5px -10px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { margin: 10px 10px 20px !important; min-width: 170px; } @media screen and (max-width:900px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(33% - 20px) !important;} } @media screen and (max-width:600px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(50% - 20px) !important;} } @media screen and (max-width:500px){.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{min-width: calc(100% - 20px) !important;} } </style>

[Ian Harden]

hi

i have small business extended installed. i want to ad woocommerce which i did but when i try to get the homepage to look the way i want, it doesn’t – i want two lines of pictures of laptops and desktops that would then go through to a product page. the dashboard on woocommerce also doesn’t work, just blank boxes everywere and no otpions to upload stock. it did work the first time but not now. i stopped all addins too, no joy.

is there an easy guide for using small business with woocommerce?

[D5 Creation]

Please consider, Small Business is a Theme and WooComemrce is a Plugin. Small Business can show what you will configure with the WooCommerce Plugin. Theme can not control the functionalities of Plugins. You can show your desired Products easily in Front Page from WP-Admin > Appearance > Small Business Options > E-Commerce

You can use WooComemrce ShortCodes as per your choice. You can show products according to the Product Categories, Tags etc. You can find detals of the WooCommerce ShortCodes Here. There is a New Version of Small Business Theme. You can Update your Site with the New Version for more features of the Theme.

You can Seperate Products with different Categories, Tags and then use them with ShortCode like [products tag="business" limit="4"] or [products category="something" limit="9" columns="3"]

You can also set the Number of Colums and Centering Items from Small Business Options, too.

[Ian Harden]

thanks for the reply, didn’t see it. ok, i’ve updated the theme and set those parametors above. still no joy.

i have now uninstalled woocommerce and most of the other plugins and clkeared the cache. reinstalled woocommerce and still doesn;t show the dashboard. it should work with your theme as well. no joy. very annoying.

when creating shop pages, well, i assume woo does that, can you control them or is it controlled via the theme settings?

[D5 Creation]

We believe that you are facing some issues which are not related to the Themes. It may be a JavaScript problem.
We recommend you checking the following options:

– Clear the Cache/History from your site and from your browser. Then press Ctrl+F5 for a hard refresh of the browser
– If you have CloudFlare activated with your site by you or by your host, you should add the CloudFalre’s IPs in your Server’s whitelist
– Disable all other Plugins except WooCommerce
– Temporarily activate Twenty Twenty Theme and check the issue

You can provide us the Site URL, One Temporary Admin Username and Password at [email protected] if you want us to check your site.

[Author]

Posts