WooCommerce's customization nature plays a huge role in WordPress being considered as the most popular eCommerce solution.
Almost anyone can use WooCommerce features and extensions to create a store that suits their customers' needs.
However, sometimes you may want greater control over your website's look and functionality.
By customizing your WooCommerce product pages, checkout page, and store's functionality, you can generate more sales and improve your conversion rate from the website visitors.
To make your eCommerce website stand out and to create a unique shopping experience for your customers, you'll have to customize it.
One of the specific pain points for WooCommerce store owners is the default product and checkout pages that come by default.
Store owners are usually looking for new ways to optimize these pages so they could:
- Increase conversions.
- Improve the customers' shopping experience.
- Improve average order value, lifetime value of their customers, and more.
Thankfully, using the right techniques and plugins, you can extensively customize the WooCommerce pages to improve all of these parameters.
We'll go through what you need to know before starting and then take you through the process of updating your WooCommerce site's checkout process.
In this article, we'll dig into the more advanced ways of how to customize WooCommerce.
How to setup WooCommerce on your WordPress site
First, you have to buy a domain name and hosting.
Here are some of the hosting companies for WordPress:
Then you need to install the WooCommerce plugin on your WordPress site.
How to customize the WooCommerce product page
After installing WooCommerce on your website, the product page will by default look like this:
It's not that bad, but it can be much better after you change some parts of it to improve the shopping experience.
That's we're showing you an easier way to get this done without having to modify your theme's files and how to customize WooCommerce shopping page using the page builder.
Using page builders, it's easy to change the shopping page design, layout, product types, and products to display.
Note: Using page builders you're not in need to write any line of code, but it'd help you if you're familiar with WooCommerce shortcodes.
So, now let's take a look at how to customize your WooCommerce shopping page using a page builder.
You can do this with two steps:
1. Choose a pre-designed product page template
2. Build product page from scratch
Step 1: Choose a Pre-Designed Product Page Template, or build one from scratch
The easiest way to get started and get the product page done is to use pre-designed product page template and customize it in order to fit your website's needs.
Using Elementor there are several different templates of product pages to choose from.
After you choose the page that fits your needs, you have total customization control over the product page and its style.
The other option is to build your product page from scratch. In the Elementor's editing panel, you can see the special widgets for the product.
First what you have to do is create a new page:
In your WooCommerce shop you can choose what products you want to display on it. For example, you can create a shopping page that shows featured and best-selling products.
To add some content on the page you can use some WooCommerce shortcodes. You can use many shortcodes based on the products' categories that you want to display.
These are some of them:
Let's for example add featured products to the shopping page using the shortcode. The principle for the other categories is the same.
To do this:
Go to WordPress admin dashboard > Products page. To mark your featured products click the star icon on the right side.
Then, from the editing page, drag the Text Editor below the Featured Products.
Copy the shortcode [featured_products] and paste it in the Text Editor window.
Click Update, and your featured products will be displayed on this page, just as shown below:
You can also use this for the best selling products, using the [best_selling_products] shortcode, and so on.
Decide what products you want to display on your shopping page in order to provide best shopping experience.
Also, have in mind that there are shortcodes that you may need to set the number of columns, or limit the number of displayed products.
For example, let's say that you want to display 3 columns of 5 products max, you'll need to use something like this:
- [products limit="5" columns="3"]
What's great about shortcodes is that they are very powerful and easy to use.
Now, let me show you how to display the table or any other element on a new page by using the shortcode.
To do that by using a page builder, click Pages > Add New and enter the name of the page.
For example, WooCommerce page. If you are using Elementor as your page builder, you will see this:
Just drag the Text Editor down to the page and paste the shortcode that you just copied.
You'll be shown a page with a product table style.
Step 2: Add the Product Widgets that will make up your page
Note: When creating your shopping page it's important to insert several example products, including their required fields, such as product description, a cart button, and the other needed parts, so you can preview those products in the single product template.
Here we marked 13 most important parts that every product page should have:
When done with that, it's time to build the elements that will make up your single product page.
Know that this page is of huge importance for your conversions, and it needs to provide all the necessacry information about the products that the customers would be interested in.
For this purpose, you can use a wide range of Elementor's widgets such as:
- Product Title widget
- Product image widget
- Woo Breadcrumbs widget
- Short description widget
- Product price widget
- Add to cart widget
- Product rating widget
- Related products widget
- Upsells widget, etc.
Using this widgets in Elementor or any other page builder, you have an absolute freedom to play with the elements and move them around.
Also, you can use other widgets to make your single product page even more engaging, such as: share buttons, CTA widgets, drop-down menus, etc…
You can even add a custom fields to the template using the dynamic content feature.
Step 3: Preview the Product Pages
To make sure that your product page has appropriate design and that it looks good, you should preview it with several different products and after making any change to be sure that everything is good.
Hit the eye icon on the bottom left panel, and then click settings.
Under Preview Settings, choose the specific product that you want to display, apply and review to see how it looks like.
How to Customize WooCommerce Products Catalog Page Using Elementor
To design a products catalog page, go back to Elementor > My Templates, and then create a product archive template.
Then, use an existing template for it, or create one.
Add the Archive Products widget and enter the Archive Title, and customize the design of these pages.
In case you want to adapt the style of this page with the design on your single product pages, go back to the single product page, and then right-click Copy.
Get back to the archive product, right-click and then Paste Style.
Next, in the Archive Products settings, go to Query > Sources, and then choose the option Latest Products.
Then under Product Category, choose rings. By doing this, in the future, only the ring category will appear.
Slide on Pagination in case you have a long list of products for each category.
You can also design the distance between the columns and the rows in the style tab.
Adjust the colors, fonts, and more according to your brand and before publishing, choose the conditions to determine where the archive will appear, the same as you did for the single product template.
Hit Publish, and your archive page is now live.
How to fix the WooCommerce blank issue on the shop page?
The blank shop page display is one of the most common issues users area dealing with on WooCommerce.
There are bunch of reasons why the shop page doesn't show products, but we'll show you how to fix the most common problems if it happens to you.
1. Shop page configuration
Go to WooCommerce > Settings > Products and then make sure that you use the correct page under the Shop page element.
2. Plugin compatibility
Sometimes, your plugins may cause conflicts that make the Shop page appears blank. You can fix it by deactivating all your plugins and gradually checking which one is exaclty causing this problem.
Go to Settings > Permalinks and then hit save to update the permalinks and solve this problem.
4. Catalog Visibility
Make sure that the catalog visibility is properly set. To do that, go to WooCommerce > Products and ensure that the products aren't set as hidden. In case they are hidden, change it.
How to customize the WooCommerce checkout page?
On the WooCommerce store, one of the most crucial pages is the checkout page.
It's where the customer purchases, pay, and where you get a new customer.
Considering the fact that 7 out of 10 potential customers abandon their shopping carts, you should optimize your checkout page to get as many conversions as possible.
Even though WooCommerce provides a solid default configuration, you need to make sure to optimize your checkout page to maximally increase conversion rates on your store.
Some of the changes that you can apply on your WooCommerce checkout page to make it optimized are:
- Create a one-page checkout
- Add, remove, or rearrange the checkout fields
- Change the checkout style and design
- Include upsells and discounts
- Add extra fees for shipping, packaging, etc
We have shown you how to customize the shop page and now we'll see how to customize the WooCommerce checkout page.
Customize the checkout page with a plugin
In case you don't have any coding skills, you can customize the WooCommerce checkout page using a specific plugin.
There are many options available, but for this purpose we'll use WooCommerce Checkout Manager.
The WooCommerce Checkout Manager has been on the market for a couple of years and has a free version with basic functionalities that you can use and there are 3 premium plans with more advanced features starting at $19 (one-time payment).
Let's take a look at what we can do with this tool.
Checkout Manager is one of the plugins you can use to manage your checkout page.
For example, you are able to add shipping, billing, and additional fields to your checkout page by simply enabling these options from the plugin's menu.
What's great about this tool is that it's very easy to use, so it's quite good for the beginners.
It allows you to show, add or hide fields such as the first and last name, country name, city name, zip code, address, phone number, email, and other fields.
To do this, go to WooCommerce > Checkout and then click the Billing, Shipping, or Additional tab.
There, you have a list of all the possible fields that you can display or hide.
Just click to enable it, and you're ready to go.
Your checkout page will look like this:
One helpful option that this plugin provides is to edit the WooCommerce checkout page and to add fees.
You can insert fixed or percentage fees to any core or conditional fields.
This option is useful in case you want to include an additional charges such as:
- Express delivery
- Extra charge for shipping to certain countries
- Fees related to different credit cards or payment gateways
WooCommerce offers by default some of these options with extra charges, but Checkout Manager provides you with more control and flexibility in using it.
To add fees in Checkout Manager, go to WooCommerce > Checkout > Billing, and there you’ll see different billing fields that you can enable on your checkout page.
For example, we can add a fee for Express Delivery and to do that we’ll need to create a new field.
Press the Add New Field button, select the type of field and enter a name of the new field.
Then, go to the Options tab and add two labels: Yes and No.
In case the customer selects Express Delivery, we’ll add an extra charge of $15.
Save your changes and you're done! Now when the customer selects the Express Delivery option on your checkout, an extra shipping fee of $15 will be added to their cart automatically.
Create conditional fields on your checkout page
Besides adding fields and fees, you can also customize the WooCommerce checkout page by creating conditional fields to improve the user experience.
Go to WooCommerce > Checkout > Billing page and then click Add New Field.
Select the type of field that you want to create, fill in the label, description, and other necessary information. It will depend on the type of conditional that you’re creating.
After that, check the conditional checkbox on the right, select the parent field and enter the value that the parent field needs get to display the conditional field.
After you did it, press Save and it's done!
You did it! Congrats
WooCommerce Checkout Manager is a nice choice for beginners that if want to easily edit the checkout page.
The free version is a nice start but in case you want more advanced features, we then you can purchase the premium plans.
Maybe it's not the best designed, but it works.
In case you want an optimized, well-designed, and better-converting checkout, in that case, you'll need some programming skills.
Unless you use some better 3rd-party solution that can provide your customers with a better checkout experience and that will help you increase your conversions.
Put your checkout page on automation
Although this plugin may provide you with a checkout, still it’s important to have your checkout well-optimized.
Choosing a conversion optimization tool that provides you with checkout page and helps you provide discounts, implement cart recovery emails, and increase your conversions can be of the greatest help.
If your customers associate your brand with a good cause, they may be more likely to finish their purchase.
For this reason, we created Inline Checkout.
We believe that customers shouldn't waste time filling in details that can be automatically filled.
That's why we implemented Inline's smart fields - fields that are automatically ticked and pre-selected.
85% of online purchases are made using mobiles.
That's why all customer interactions in Inline are masterfully crafted with a mobile-first approach - to provide the smoothest checkout experience of all time.
With thousands of Ecommerce elites, we've built the ultimate checkout process that redefines the purchasing experience while keeping it secure, easy, and seamless.
Inline helps you leverage the power of social proof and reviews at every step of the checkout process and increase your revenue by 21% through automatic discounts, and the smartest upsells you have ever seen.
Using Inline on your store, customers shouldn't spend more than 25 seconds on the checkout page.
You are two clicks away from setting up the CRO tool that will skyrocket your business - literally.
Things like these shouldn't be hardcoded, and we are here to help you save time and focus on one thing that truly matters - scaling.
Start using Inline today and increase your conversion rate drastically by creating the best checkout pages with a bunch of features in only a few clicks!
If you're ready to minimize checkout abandonment rate and skyrocket your eCommerce performances and increase your revenue, you know what to do.
Sign up and start using Inline NOW!