There are a few options if you want to Edit the WooCommerce Shop Page on your WooCommerce store. Your options will vary depending on which WordPress / WooCommerce Theme you’re using and which WordPress Page Builder you’re using (assuming you’re using one).
So before diving right into answering how to edit the WooCommerce Shop Page Layout – let’s establish YOUR options.
Before I get started though…
If you’ve not read any of my other articles at Future State Media – you might not be familiar with our “mantra” of trying to make WooCommerce Customization “Codeless”.
We HATE custom code on WooCommerce. It demands maintenance – and will continually break with updates. This doesn’t make for a hassle free life in eCommerce (which is why many people end up turning to Shopify instead of WooCommerce)
You don’t NEED to touch any code to have a highly converting, high profit website built with WooCommerce. It just so happens the community of developers (and WooCommerce themselves) seem to obsess over unnecessary code customizations.
So Future State Media is here to help you create the WooCommerce store YOU want without touching any code!
WooCommerce Shop Page Layout Customization – Your Technology = Your Options
Here are a few questions and answers to allow you to understand your options when it comes to editing the Shop Page Style in WooCommerce
Question 1: Are you using a page builder?
If you Answered “I Don’t Know”:
If you don’t know what a page builder is, I’ll give you a brief intro…
WordPress Page Builders like Elementor or Divi simply allow you to edit your pages, posts and more in WordPress without being limited to the Gutenberg Editor or Classic Editor (if you’re still using that).
In essence you get to “build the page” using drag and drop visual builders with a whole variety of cool options.
We recommend Divi Theme and Page Builder (they come as one highly effective and compatible item) – it’s simply awesome.
Back to the answer – are you using a page builder on your WooCommerce store?
If you Answered “Yes”:
If you are – you can use a page builder to edit the layout of your shop page COMPLETELY.
You can put whatever you want on your WooCommerce Shop Page layout, change the order of products, display only products from certain categories, insert headings and more.
Here are a couple of custom WooCommerce shop page examples
WooCommerce Custom Shop Page 1
WooCommerce Custom Shop Page 2
Both of these were made with Divi Builder on the Divi Theme.
But you can get far more inventive with your Shop page if you so wish.
We happen to invest a lot more time in refining the WooCommerce Product Page Layout to maximise add to cart conversions and overall checkout conversions.
If you Answered “No”:
This doesn’t mean you haven’t got options when it comes to customizing the Shop Page in WooCommerce. But it does mean that your options for editing the shop page with be specific to your theme. So I’ll list some popular WooCommerce themes below.
Question 2: Are you using the WooCommerce Storefront Theme?
If you Answered “I Don’t Know”:
If you don’t know which theme you’re using, go to the WordPress dashboard / admin area
Then find the option on the left hand side called “Appearance” then click on “Themes”
You’ll be presented with a screen of all of your installed WordPress Themes
The one in the top-most left corner will be your “Active” theme
If this says “Storefront” – then you’re using Storefront Theme!
You might also be using a “Storefront Child Theme” – if this is the case then this advice will still be applicable to you when wanting to change the WooCommerce Shop Page Layout.
If you Answered “Yes”:
There’s isn’t a “codeless” solution to editing the free Storefront Theme for WooCommerce (Sorry!)
You have a limited set of options for changing the WooCommerce Shop Page under Appearance > Customize > WooCommerce > Product Catalogue
But if you buy the WooCommerce Storefront Extensions Bundle from the official WooCommerce Extensions Marketplace on WooCommerce.com – Click here to see the bundle.
If you buy this bundle – you’ll be able to change the layout of the WooCommerce Shop Page so it’s customized to your liking (without a single piece of code) at $69 per year, this bundle is absolutely AWESOME value if you’re committed to using the WooCommerce Storefront theme – which isn’t a bad idea for maximum compatibility with WooCommerce itself. We however still always advise the Divi Theme over the default Storefront Theme for WooCommerce.
It’s worth noting it’s the “Powerpack” plugin for Storefront which delivers the customization capability – but ultimately, the bundle gives you a bunch of other plugins which are helpful with Storefront too for the same price as buying the powerpack plugin on it’s own!
If you have the Storefront Powerpack plugin installed on your website you’ll now see these options under Appearance > Customize > Powerpack > Shop
By no means are these WooCommerce Shop Page Layout Options “Extensive”
In combination with the other layout options the the Powerpack Plugin offers you, there’s a certain amount of look and feel you can create with the default Storefront Theme (which is free) in combination with the Powerpack Plugin (which is paid).
This might not meet your definition or demands of WooCommerce Shop Page Design Customization – but it’s more than is available by default with the Storefront theme.
If You Answered “No”:
If you’re not using the Storefront theme, we’ll drop in some more options below for editing the Shop Page Design in WooCommerce as we come across some specific examples
Our Advice for Editing WooCommerce Shop Page Design
Use the Divi Theme and Divi Builder to edit the WooCommerce Shop Page Design – it looks awesome and performs really well across the board. It’s also great for customizing the WooCommerce Product Page Design without custom code – which is much more of a priority based on our data. It’s the product page that ultimately triggers the conversion process – never forget that!
You searched for:
woocommerce shop page layout
how to edit woocommerce shop page
how to customize woocommerce shop page
woocommerce shop page template
woocommerce custom shop page
woocommerce customize shop page
how to customize woocommerce shop page in wordpress
customize woocommerce shop page
edit woocommerce shop page
customize shop page woocommerce
storefront woocommerce customiser
woocommerce storefront customizer
woocommerce change shop page layout
woocommerce edit shop page
woocommerce shop page customization
custom woocommerce shop page
customizing woocommerce shop page
edit shop page woocommerce
custom shop page woocommerce
woocommerce shop layout
