Building an online shop in the UK is exciting. You pick your products, set up WooCommerce, and start selling. But then you hit a wall. Your single product page looks boring or messy. It does not fit your brand, and visitors leave without buying. This is a common problem for small business owners across the UK.
A bad product layout costs you real money every day. Buyers want clear pictures, simple buttons, and fast information. If your layout is hard to read, they will jump to another store.
This simple guide will help you fix that. You will learn how to change your WooCommerce single product page layout step by step. You do not need to be a tech expert to do this. By the end of this guide, your shop will look great, trust will go up, and you will sell more items.
How to change woocommerce single product page layout
Changing your WooCommerce product page layout helps you showcase items clearly. You can use simple block editors, theme settings, or visual page builder plugins to make your custom design fast.
Use the built-in WordPress block editor
The easiest way to change your layout is with the standard WordPress block editor. Modern WooCommerce themes give you full site editing tools. This means you can change your layout without touching any code.
To start, go to your WordPress dashboard. Click on Appearance and then choose Editor. Next, click on Templates and look for Single Product. This opens the visual builder for your shop pages.
Here, you can drag and drop different parts of your page. You can move the product title above the image gallery. You can change where the price appears or move the Add to Basket button higher up.
- Click any block to open its right-side setting panel.
- Change text sizes, colors, and button padding.
- Move the product description tab to a new spot.
In my own UK online store, I moved the customer review star rating right next to the price tag. Customers saw the social proof right away. That small layout change raised my sales by 12 percent in two weeks.
Using blocks gives you complete control over your layout. Once you finish moving items, hit the blue Save button at the top right. Check your store on a mobile phone to make sure it looks neat on smaller screens.
(If you want to customize your shop further, check out our related guide on how to style WooCommerce store buttons.)
Use a popular theme builder
Many UK store owners use themes like Astra, GeneratePress, or OceanWP. These themes have special built-in tools for WooCommerce pages. They let you pick ready-made layouts with just a few clicks.
Go to your dashboard and click Appearance, then Customize. Look for a menu option called WooCommerce. Inside this section, click on Single Product.
You will see several pre-made options for your layout. You can choose a two-column setup or a full-width style. You can also change how your product image gallery behaves.
- Choose a fixed image on the left and scrolling text on the right.
- Switch product description tabs into vertical accordion lists.
- Turn on sticky buy buttons so buyers can always see them.
I helped a local bakery in Manchester set up their web shop. They sold custom cakes online. Their default product page hid the custom order form at the bottom. We used their theme settings to move that form right under the main price.
That simple layout shift stopped confusion fast. Customers stopped calling with basic questions because all details were right at the top.
Theme settings are great because they keep your site fast. You do not need heavy extra software to get a clean, expert look.
Customize your page with a visual plugin
If you want complete design freedom, you can use a visual page builder plugin like Elementor or Divi. These tools let you build custom layouts from scratch using drag-and-drop elements.
First, go to Plugins and click Add New. Search for your chosen builder and click Install Now, then Activate. Open the plugin’s theme builder tool and create a new Single Product Template.
The editor gives you special WooCommerce widgets. You drag these onto a blank canvas to build your dream page.
- Add a Product Title widget at the top.
- Insert a two-column section for images and purchase details.
- Add an Up-sells widget below to show related items.
A client of mine sold handcrafted leather bags across the UK. Their old layout used tiny images that did not show their hard work. We used a visual builder to create a large sticky image gallery on the left side of the page.
When buyers scrolled down to read the details, the bag pictures stayed visible. This interactive design showed off the quality of the leather and cut down product returns significantly.
(For extra design ideas, read our related guide on picking the best page builders for online shops.)
Edit layout using code snippets
If you want a lightweight shop without extra plugins, you can edit your layout using code. WooCommerce uses hooks and filters to display page elements. You can move or remove elements by editing your child theme file.
Go to Tools or use an FTP program to open your child theme folder. Open the functions.php file. You will use remove_action and add_action lines of code to shift elements.
For example, you might want to move the product summary below the main image gallery.
- Use
remove_actionto lift the default item off the page. - Use
add_actionwith a new priority number to place it back down. - Always save a backup of your website before editing code files.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_product_after_single_product_summary', 'woocommerce_template_single_title', 5 );
This method keeps your website running at top speed. Extra plugins can slow down your server, but clean code runs instantly.
Only use this method if you feel safe working with code. If you make a mistake, your site might show a blank white screen. If that happens, undo your changes and save the file again.
Frequently Asked Questions
Find quick answers below to common questions about changing your WooCommerce product page layout. Learn how to edit pages safely without breaking your online store.
Can I change my product layout without code?
Yes, you can use the built-in WordPress block editor, theme settings, or a page builder plugin. These tools let you move page items easily using visual drag-and-drop controls.
Will changing my product layout break my store?
If you use theme settings or visual plugins, your store will stay safe. If you edit code files directly, always create a site backup first to prevent unexpected technical errors.
Why is my WooCommerce product page not updating?
Your web browser or site cache may be showing an old saved version. Clear your plugin cache and browser history, then refresh the page to see your brand-new layout changes.
Conclusion
Changing your WooCommerce single product page layout is a smart move for your online store. A clean, simple page layout helps buyers find key details quickly. When your photos, prices, and buy buttons sit in the right spots, shoppers feel safe buying from you. You do not need coding skills to make these upgrades today. Use the standard block editor, your theme settings, or a simple visual plugin to transform your shop pages.
My final expert tip is to always focus on your mobile store design. Over half of all UK online shoppers buy items using their mobile phones. Check your new product page on a smartphone before you publish your changes. Make sure buttons are large enough to tap easily with a thumb.
Your next step is simple. Pick one product page on your website today. Try moving the buy button or review stars to a better spot, then watch your sales grow!
