Can you blame WooCommerce for no advanced options to customize the shop, product, or checkout page? Of course, you shouldn’t. In fact, it’s better to add more customization with plugins, also with free extensions for WooCommerce 🆓.
Contents
- WooCommerce shop page customization
- Customize WooCommerce products
- Design the checkout page with custom fields
- Summary
- WooCommerce advanced custom fields: a FREE product & checkout customizer
- Customize the WooCommerce Checkout Page: Tips & Tools for Success
- How to customize the WooCommerce checkout page & fields with CSS
- Create Custom Fields in WooCommerce Checkout and Product Pages
- Customize the WooCommerce Checkout Page: Top Tips for a Seamless Experience
WooCommerce shop page customization
In short, setting and adjusting the shop page in WooCommerce will close in these 4 steps:
How to customize the shop page?
-
Choose the page
To show the shop page one needs to have it. It can be an existing page or a new one.
-
Customize the product catalog options
The product page can be designed in the Appearance menu → Customize → WooCommerce → Product catalog.
-
Add the page to the menu or widgets
WooCommerce allows showing the link to the product catalog in the menu or/ and widgets (Appearance → Menus/ Widgets).
-
Product catalog customization
Are there more options to adjust the page?
Yes. For example, css styling, adding content, shortcodes, redirects, or custom code.
Thus, the standard page layout may be enhanced with new sections or elements.
Customize WooCommerce products
The obvious part of using WooCommerce is adding new products. By default, it’s possible to use attributes and variations. Attributes will be visible in the additional information (depending on the theme).
Of course, variations can help (they also use attributes):
But in order to build products with more customizable options and custom fields, WooCommerce alone won’t suffice.
As I mentioned in the intro, there are building blocks to extend the WooCommerce capabilities, called plugins. And there is one free plugin to add custom fields and customize the WooCommerce product page.
Flexible Product Fields WooCommerce
Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).
💾 Active Installations: 10,000+ | WordPress Rating:
How to customize the WooCommerce product page with the plugin?
After downloading, installing, and activating the extension, it will be possible to adjust product pages with a few steps.
-
Add field groups for specific products
First, it’s possible to select one or more products for new fields (visible in the screenshot below).
-
Choose the field location
Also, the plugin allows showing the new product options before or after the add to cart button.
-
Adjust the WooCommerce product page with custom fields
The core feature of the plugin is to add new fields. In the free version of Flexible Product Fields, there are 18 field types.
Add custom fields and new options to the WooCommerce product page Each field has its settings e.g. labels, placeholders, tooltips, css classes, max number of characters, etc. The field may be required or optional.
-
WooCommerce product page customization - example
The final effect for one or more products (with a free plugin).
WooCommerce product options with custom fields
As you can see, it’s possible to customize the WooCommerce product pages with a free plugin. You may download it or read more in the WordPress repository.
Flexible Product Fields WooCommerce
Create a product wizard to sell engravings, gift wrapping, gift messages, business cards, stamps and optionally charge for it (fixed or percentage).
💾 Active Installations: 10,000+ | WordPress Rating:
To sum up, the Flexible Product Fields plugin allows building custom products in WooCommerce.
Design the checkout page with custom fields
What’s more, WP Desk also has a free plugin to customize the WooCommerce checkout page.
Flexible Checkout Fields WooCommerce
Edit, add new or hide unnecessary fields from the WooCommerce checkout form. Add pricing to fields and use conditional logic. It's all about conversions and better user experience. NEW: now you can set multiple conditions (OR) under one or more condition groups (AND).
💾 Active Installations: 80,000+ | WordPress Rating:
Flexible Checkout Fields allows managing the existing field as well as adding new custom fields to the checkout page.
WooCommerce checkout page customization quick guide
(after installing & activating the plugin)
-
The default checkout form
The standard (classic) checkout page contains predefined fields.
-
Adjust the form
By deleting or adding new fields, it’s possible to customize the WooCommerce checkout page.
-
Rearrange and manage checkout fields
The visual checkout page editor allows the quick customization of the form. The free plugin supports over 10 custom fields.
Reorder checkout fields in WooCommerce -
Less fields in the checkout
Take a look at the final effect - a simpler form.
Quick order form = faster checkout in WooCommerce
Flexible Checkout Fields WooCommerce
Edit, add new or hide unnecessary fields from the WooCommerce checkout form. Add pricing to fields and use conditional logic. It's all about conversions and better user experience. NEW: now you can set multiple conditions (OR) under one or more condition groups (AND).
💾 Active Installations: 80,000+ | WordPress Rating:
Summary
There are multiple ways to customize WooCommerce, including adjustments to the shop page, product pages, and the checkout form. With free plugins, there is no need to write custom code.
