View my basket

Customise the Product Page Above-the-Fold

This quick guide shows how to customise the layout of the WooCommerce Single Product page above-the-fold. We’ll make several changes, using a combination of custom CSS and a plugin.

The CSS in this walk-through has been tested with the GeneratePress theme, and it should work with most themes with little or no modifications.

Things to remember…

  • Make the page’s primary action accessible
  • Square aspect-ratio images are easiest to work with for product photos
  • Test on all types of device

Here’s the standard WooCommerce layout for a variable product.

WooCommerce single product page for a variable product (Desktop)
Product page on an MDPI laptop

The key things to take away from the layout are:

  • The user needs to pick size and colour attributes before the “Add to basket” button is enabled
  • The description, information and reviews (product tabs) are off the bottom of the view (below-the-fold)
  • On an iPhone 11, the “Add to basket” is below-the-fold
WooCommerce single product page for a variable product (phone)
Product page (iPhone)

Optimise for mobile devices

For a clothing shop like this, users will mostly be using mobile devices. So let’s optimise for mobile-first by moving the “Add to cart” button above-the-fold. Add the following CSS snippet to the Customiser’s Additional CSS:

 * Adjust the singleproduct page for mobile devices.
@media(max-width: 768px) {
	body h1 {
		font-size: 26px;

	body.woocommerce div.product form.cart .variations th {
		padding-top: 10px;
		padding-right: 10px;

	body.woocommerce form .quantity.buttons-added .qty,
	body.woocommerce form .quantity.buttons-added .minus,
	body.woocommerce form .quantity.buttons-added .plus {
		width: 30px;
		min-height: 30px;

	.woocommerce div.product div.images img {
		max-height: 280px;
		object-fit: cover;

We’ve used the @media selector to restrict these styles to displays no wider than 768 pixels (i.e. phones in portrait-mode). Then we reduced the font-size of the h1 element, clamped the main image height to 220 pixels and reduced the size of the quantity/minus/plus buttons. This small set of changes is enough to bring the “Add to basket” button back into view on mobile.

Reduce the number of user interactions

For the next stage, we’ll use our Product Variation Radio Buttons plugin to simplify choosing a product variation. When it’s installed, the drop-down lists turn into buttons like this:

Product page with radio buttons on a laptop
Product page with key info and actions above-the-fold

Getting rid of the drop-down lists reduces the number of clicks a customer needs to make. It’s an definite win for mobile devices.

Product page with radio buttons on a phone
Clean product page UX on mobile

InformationWe’ve also used a child-theme based tutorial to insert the variation price into the add-to-cart button.

WooCommerce product page before and after
WooCommerce product page before and after above-the-fold customisation

Wrapping up

There’s no one-size-fits-all way to make a great product page, and you might need to use different techniques for different types of product on your site. They key to the process is to design for the customer, not for yourself.

Power Plugins newsletter

Want to see more articles like this?

For the latest WordPress guides & special offers...

Leave a comment