How to Center WooCommerce Products
WooCommerce is a renowned name among the online merchants of WordPress. If we consider the AK-47 as an iconic weapon in history, then WooCommerce is the iconic open-source eCommerce plugin for WordPress. It is tailored perfectly to work for small to large online businesses. It didn’t take much time for WooCommerce to become popular. Since its introduction, it took the place of the best eCommerce plugin for its simplicity in installation and customization.
Being popular, WooCommerce is used by many high-traffic websites. For instance, Small Press Expo has been an active user of WooCommerce for many years. According to surveys -
- 30% of the World’s eCommerce sites run on WooCommerce
- 30 million downloads and 3 million active users worldwide
- 4% of the top HTML pages are being served by WooCommerce
- 29% of the top eCommerce sites in 2021 are using WooCommerce
Despite thousands of compliments, some aspects of WooCommerce can be improved. For instance, the products may not be at the center of your eCommerce website. Sometimes, you need to manually center your WooCommerce products. In this article, we will show you how to center WooCommerce products on your website.
Solutions to Center WooCommerce Products
There are hundreds of eCommerce business owners. And WooCommerce is their best choice for maintaining products or services. Since they try to sell products or services, it is essential to present them in the best possible way.
While researching various forums, we found one WooCommerce user who has been suffering to align the products in the center and also positioning the text in landscape orientation. That is not all, his theme tends to position items at the left rather than at the center.
The problem does not stop there. He doesn’t have any coding skills. Just like him, there are many eCommerce site owners with no coding skills. Considering the situations of these people, we have come up with 2 solutions to center products on WooCommerce.
Solution 1 -
For this solution, we will be working with CSS codes since there is no built-in option to center the alignment. Don’t worry, you don’t need to write any. You just need to copy and paste a few lines of code.
For this solution, we decided to provide codes to center WooCommerce products for various criterias. For instance, you may need to center elements on the Shop page in WooCommerce, center product categories, or center content in the WooCommerce product table.
To center WooCommerce products on the Shop page, open the theme’s stylesheet or WordPress customizer. For this, you can navigate to -
Appearance → Customize → Custom CSS
Then, copy and paste the following lines of CSS codes in the stylesheet -
To center product categories in WooCommerce, copy the following CSS and insert in the theme’s stylesheet.
On the other hand, to center the content in WooCommerce product tables, copy and paste the CSS snippet below.
Solution 2 -
Hopefully, solution 1 will do the job. Solution 1 contains CSS to align WooCommerce products in the center for various scenarios. Solution 2 on the other hand, works for the product lists on the homepage.
When the products are aligned left on the homepage, the CSS code may look something like this -
To center the WooCommerce product list, change the margin from 0 to auto like below -
Bottom Line
Hope you have learnt how to center WooCommerce products after reading this article. If you are familiar with WordPress and WooCommerce, it is not rocket science for you. It is all about copying and inserting a few lines of CSS codes in the right procedure.
If the above solutions in this article could not solve your problem for centering WooCommerce products, then leave a comment mentioning your issue. We will try our level best to solve your problem. Else, you can also get an expert’s help. Aside from WooCommerce products, people also face problems aligning sub-menus and various sections (i.e. “about us”, “how it works”, etc) in the center. We will discuss them in another insightful article like this one.