Woocommerce Single Product Page Secret Code

How to place your woocommerce single product exactly in the middle of your sales page?

I know your are looking for this woocommerce product code that can align your single product in the middle of  your sales page.

Heck some of you guys just like to wack your keyboard when you try to get things done right.

Most of you already noticed that you turned ‘on’ the ‘featured product’ just to make sure there are no others product should appear on your real sales page.

The sad thing, when your current browser is refreshed, your product was ‘left aligned’ by default, right!

How to make this single product appear exactly in the middle of your web page with any custom size that you want it to be displayed as you wished?


Here’s I shared some of my experience about woocommerce thingy’s.

Put this code inside your sales page wordpress text editor (not visual editor)

<div class=”single_product”>



You know where to find your product id’s?

Then add the code below to  (Appearance > customize > CSS or Additional CSS)

.single_product {
float: none;
margin: 0 35%;

Its works on any of your theme or child theme

Walla, your done.


See you at the next post. Persuade Growth PLT, digital marketing agency malaysia.

You may leave your comments below

Ahmad Riezal, Persuade Growth™
Accredited Google Partners Malaysia

Leave a Reply