Ultimate Guide: How to Customize WooCommerce: Edit your WooCommerce Store Without Coding

WooCommerce is – without a doubt – the most widely used eCommerce online store platform available.

With over 35% market share (as of December 2023) for websites using eCommerce technologies to sell products online, WooCommerce is a great choice for building your next eCommerce store.

In this post I’m going to explain how to customize woocommerce using WooCommerce and StoreCustomizer to customize your online store to what you want.

What is WooCommerce?

WooCommerce is an open-source, powerful and flexible eCommerce plugin built on top of for WordPress.

The WooCommerce plugin can be easily installed directly from the WordPress Plugin Directory within the WordPress Dashboard. Once installed, WooCommerce guides you through a setup wizard to configure essential aspects of your store, such as currency, payment methods, shipping options, and tax settings.

After completing the initial setup, you can start adding products to your store through an intuitive interface that allows you to manage product details, pricing, inventory, and categories quite easily. With a wide range of themes and WooCommerce extensions, WooCommerce offers endless possibilities for creating a tailored shopping experience that meets the unique needs of any business

With WooCommerce, even users without extensive technical knowledge can create a professional and efficient online store on the WordPress platform.

Setting Up Your WooCommerce Store

So, the process of setting up a WooCommerce store goes like this:

Install WordPress & Select a Theme:

The first step is to setup your domain and hosting, and then install WordPress. Often the hosting company you go with will make this a relatively easy process, and they will let you setup WordPress in just a few clicks.

You’ll setup your logins and then be able to login to your Dashboard, and from there the first thing to do is select a Theme, which is the design or frontend look of your website. If you’re definitely setting up an online store with WooCommerce then it’s recommended to install a WooCommerce compatible theme.

This means the theme has implemented design and functionality to work properly with WooCommerce.

Next…

Install WooCommerce & Needed Plugins:

In your WP Dashboard you can navigate to the plugins section and install your needed plugins… The first plugin to search for and install is WooCommerce.

Once you’ve installed and activated WooCommerce, they will take you through a setup wizard which will help with setting up WooCommerce properly with dummy products, shipping and payment gateways, etc.

You can also install any other WooCommerce plugins or Extensions which you may need, to further enhance or extent the functionality on your WooCommerce store.

I’ve curated a list of Top WooCommerce plugins you may want to look at, but for this post I’m going to show you everything included in StoreCustomizer Free & StoreCustomizer Pro, as it really offers a lot!

After that… The next thing is to simply…

Start Selling:

Now… Most people think… You build and launch a website and the customers will come… Unfortunately it doesn’t work like that :/

Once you’ve launched your website, you need to do marketing and/or advertising to get traffic and users to find your website.

I’ve got you there… I’ve built a new blog site on learning digital marketing and everything do with “Empowering Entrepreneurs in the Online World” where I teach you with the latest tip and resources, the latest trends and technologies which are shaping the digital landscape… Read my new blog and sign up to my newsletter to ‘stay updated’.

Ok… Back to it…

Should I use WooCommerce or another platform to build my online store?

When deciding if you should use WooCommerce or another platform to build your online store, I’d say few factors should be considered.

While other all-in-one platforms may offer a potentially simpler setup processes, they might lack the same level of customization and they can be more expensive in the long run due to subscription fees and transaction fees. If you value flexibility, control, and the ability to scale your store as your business grows, WooCommerce is a great option for you.

WooCommerce is open-source, which means you have complete control over your store’s data and functionality… And it is highly adaptable, with thousands of themes and extensions available, allowing you to create a unique and tailored shopping experience without needing extensive coding knowledge.

Having some coding knowledge can help as WooCommerce offers a lot of code hooks to add custom code snippets and further customize your store… But that’s where StoreCustomizer comes in!

Customize WooCommerce with StoreCustomizer

Introducing StoreCustomizer! A free WooCommerce Customizer plugin!

StoreCustomizer is a solution to “how to edit a woocomerce store without code”.

As mentioned above… WooCommerce offers many hooks for customization, but the problem is that it requires custom PHP code to hook into those parts and then to add the needed code depending on what customization you need.

StoreCustomizer is like a little Swiss Army knife… It comes with a bunch of useful customization settings built in… It enhances your WooCommerce store and product pages, the cart page, checkout page, and your user account pages.

Note: If your theme is overriding the WooCommerce templates, then some of these settings might not work as expected.

Some Main Features StoreCustomizer Offers:

• Add Login/Logout Menu Item: Easily add a login or logout menu item to a selected WordPress or theme menu area.
• Product Sales Statistics: Display product sales statistics for admin users directly on the WooCommerce shop page.
• Customize Shop & Product Pages: Edit or remove elements to personalize your WooCommerce shop and product pages.
• Font Size and Color Editing: Adjust font sizes and colors for shop, product, cart, and checkout pages.
• Button Design Customization: Tailor the design of all WooCommerce buttons on shop, product, cart, and checkout pages.
• Edit ‘On Sale’ Banners: Modify the text and colors of ‘On Sale’ banners for WooCommerce products.
• User Account Tab Customization: Edit the tabs and headings of user account pages.
• Product Page Tabs: Edit or remove product page tabs and customize their headings.
• ‘Continue Shopping’ Button: Add a ‘Continue Shopping’ button to your store’s product pages.
• Checkout Field Removal: Remove basic checkout fields from the WooCommerce checkout page.
• ‘Back to Shop’ Button: Add a ‘Back to Shop’ button to your cart page.
• “New Product” Badges: Display “New Product” badges for items created within a specified number of days.
• Auto/Ajax Cart Updates: Enable automatic cart updates when product amounts are changed on the cart page.
• Edit Cart & Checkout Buttons: Customize cart and checkout buttons and add return to shop buttons.
• Login/Logout Redirects: Select login and logout redirect pages and edit the menu item text.
• ‘Add To Cart’ Increments: Set minimum and maximum values for ‘Add to Cart’ inputs, plus the increment value.
• Plus Lots More: Explore additional features for even more customization options.

StoreCustomizer is highly useful because it eliminates the need to create child themes for WooCommerce code snippets and provides extra design options and functionality that your theme may lack.

All settings are integrated into the WordPress Customizer, allowing for live visual editing. Built to be lightweight, it only adds necessary code when needed. Additionally, StoreCustomizer offers dedicated support for any extra customization needs.

Those settings are all FREE… You mayb not even need the Pro version of StoreCusotmizer!

Custom Store Addons for WooCommerce Customization

It’s recommended to try and minimize the amount of plugin you are using on your website, this will prevent plugin conflicts, or your website taking longer to load and other possible issues you may run into.

The initial design of your WooCommerce store is determined by the theme that you’ve chosen, so I do recommend spending a bit of time going through the themes and choose the design of the store pages that you like.

Once you’ve chosen your theme, then install the plugins you need depending on the products you’re selling… Below I’ll list a bunch of useful plugins which you may need… Read through and only install the plugins you need.

StoreCustomizer:

I do recommend StoreCustomizer as it comes with a lot of useful addons you may want on your store such as:

• Add Login/Logout Menu Item: Add a login and logout menu item to the menu area.
• Product Sales Statistics: Display product sales statistics (for admin users only) on the WooCommerce shop page.
• Edit Product Buttons & ‘On Sale’ Banner Text: Modify the text of your shop buttons and ‘On Sale’ banners for WooCommerce products.
• ‘Continue Shopping’ Button: Add a ‘Continue Shopping’ button to your store’s product pages.
• ‘Back to Shop’ Button: Add a ‘Back to Shop’ button to your cart page.
• “New Product” Badges: Display “New Product” badges for items created within a specified number of days.
• Auto/Ajax Cart Updates: Enable automatic cart updates when product amounts are changed on the cart page.
• Login/Logout Redirects: Select login and logout redirect pages and edit the menu item text.
• ‘Add To Cart’ Increments: Set minimum and maximum values for ‘Add to Cart’ inputs, plus the increment value.

Those are just some of the useful FREE settings… There’s lots more like moving product elements around and further customizing the WooCommerce pages that you want to.

Note: If your theme is overriding the WooCommerce templates, then some of these settings might not work as expected.

StoreCustomizer Pro:

Besides all the FREE customization and feature enhancing functionality you get with StoreCusotmizer, the Premium version offers even more…

Usually, you’ll get a plugin that offers a limited version of these features and then try to prompt you to upgrade to their pro version for a cost… StoreCustomizer Pro only adds on these features if you want them.

Extra Features offered in StoreCustomizer Pro:

Catalogue Mode for WooCommerce: Convert your online store into a catalogue by removing the ‘Add to Cart’ functionality. Apply it to all products, selected products, or only for non-logged-in users to encourage account creation and login.

Product Quick View for WooCommerce: Allow users to quickly preview products, add them to the cart, or view image galleries within a popup on your shop page, enhancing their browsing experience.

WooCommerce Ajax Product Search: Implement an Ajax Product Search bar to help users find products faster. Place it anywhere on your site using shortcodes or widgets and customize the settings for predictive search results.

Menu Cart for WooCommerce: Add a WooCommerce cart to your main navigation menu or anywhere on your site using a shortcode. Options include showing the cart only on shop pages or when it contains products, with an optional dropdown mini-cart for quick access.

WooCommerce Custom Thank You Pages: Create customized Thank You pages to engage customers post-purchase. Redirect customers to different Thank You pages based on the products bought or payment method used, utilizing page builders like Gutenberg, Elementor, or Beaver Builder.

HandHeld Menu Bar: Provide a mobile-friendly footer navigation bar to improve user navigation and conversions on mobile devices. Include Ajax Search functionality and customize the bar with your own links and design.

Custom Product Badges: Add attractive product badges to your shop and product pages with options to customize their appearance to match your store’s design.

Extra Pro Features:

• New WooCommerce User Account Tabs: Add custom tabs to the user account dashboard.
• WooCommerce Direct Checkout: Skip the cart page and send customers straight to checkout, with an option to include the cart on the checkout page.
• WooCommerce Sticky ‘Add to Cart’: Display an ‘Add to Cart’ banner when the standard button scrolls out of view.
• Plus & Minus Increment Buttons: Add increment buttons to the ‘Add to Cart’ input on product pages.

You get all of that… All that for the price of only $49 per year

StoreCustomizer Pro saves you money:

You can get all those features as separate plugins with other companies like Yith, but let’s do a quick calculation if you had to purchase them all separately:

VS

Other Recommended Plugins:

Below is my list of other recommended plugins for for all WordPress websites. You want Analaytics, help improving site SEO, Scheduling site backups! and enhancing your core WP Editor… Read through these plugins and see why you need them on your WooCommerce online store.

If you’re interested in seeingother plugins I recommend then please read through my Recommended Resources or Recommended WooCommerce plugins, as I do list different plugins for the different functionality you may need, depending on your WC store and the products you’re selling.

I’ve Installed StoreCustomizer, what next?

Ok… So you’ve taken my suggestion and are going to give StoreCustomizer a go.

You’ve logged into your WordPress Dashboard and have gone to Dashboard -> Plugins -> Add New Plugin.

You’ve searched for StoreCustomizer in the search bar and you’ve clicked Install and Activate.

Then next step is to go to the StoreCustomizer Dashboard

In the StoreCustomizer dashboard you can select which feature addons you’d like to add to your WooCommerce store.

If you want to add Product Quick View, simply click the Product Quick View tab… Turn on the feature by selecting the checkbox and then click Save Settings.

The reason you need to turn on the settings like this is because StoreCustomizer only includes the code if the feature is enables. This is for site loading and optimization, if the code is not used, then it’s not loaded onto the page.

Once you’ve turned on all of the features you want on your website, you can then go into the WordPress Customizer to further edit the settings of each feature. There you will see a StoreCustomizer Setting Panel.

Navigate into the StoreCustomizer Panel and there you will see all of the settings you can edit in a live environment and see what the settings do as you change them.

You should be able to navigate your way around it from there.

Conclusion: Final Tips on Customizing WooCommerce

Customizing your WooCommerce store can improve its look, functionality, and user experience, helping your store stand out.

Use plugins like StoreCustomizer to make changes easily without coding. Align your store’s design with your brand, optimize product pages and checkout, and ensure your site is SEO-friendly.

Make sure you keep all your plugins and themes updated for security.

By following my tips and resources, you can create a strong and engaging online store that meets your business goals and pleases your customers… If you need any further advice or help on customizing your WooCommerce store then please feel free to reach out.

I hope this post has helped in getting your store up and looking beautiful.
Happy Store Customizing!