We’ll go over how to develop and display WooCommerce custom fields in this article. WooCommerce is one of the most widely used WordPress plugins. It makes it simple to add an online shop to any WordPress dashboard. The plugin is, in fact, one of the most commonly used e-commerce solutions on the planet. The solution should be used to sell both physical and digital goods. It includes all of the required features for setting up a virtual marketplace, such as shopping carts, inventory management, and payment methods. The ability to display standard product data such as name, price, categories, tags, and dimensions is appealing to business owners. They may also make additional custom fields to provide more details about their services. Let’s look at how WordPress users can build and display such fields.
Custom Fields for WooCommerce
Additional fields that can be added to a WooCommerce store’s “Add/Edit Product” page are known as custom fields. Many people believe that for an e-commerce interface, pre-populated fields are appropriate. They aren’t always wrong, but sometimes traders feel compelled to show extra information. Custom fields, for example, may be used to display a limited-time offer or video clips related to a product. They can also boost customer engagement by displaying customization options like customised gifts.
Here we discuss how we can create the custom fields with the help of some steps.
Using a Plugin
Using a plugin, you can easily add a new feature or expand the functionality of a WordPress interface. We’ll use one to add extra fields to a WooCommerce product page as well. For this purpose, the Advanced Custom Fields plugin was chosen. Log in to your installation’s admin dashboard. Locate and click on “Plugins” in the side panel’s menu. Go to “Add new” and type the plugin’s name into the search box. Click on it when it appears in the search results to download its files. After the plugin has been successfully installed on your interface, activate it.
The plugin will now appear in the menu under the “Settings” option. Select the “Add New” tab on the screen that appears after clicking on it.
This will take you to a new page called “Add New Field Group.” In the upper half of the screen, click the blue “+Add Field” button.
You would like to give the new field group a name. This title will be clear in the edit page’s met abox. A label, moniker, and type must be assigned to each field. There’s no need to change any of the other settings in the JPEG below. They can vary automatically depending on the field type. When producing the label, use uppercase and space, and when writing the moniker, use small letters without spacing.
Fill the Location Details
We will define the location rules in the next step of the process to develop and display WooCommerce custom fields. When and where the fields will be added to the editorial page will be determined by these conditions. Go to the “Location” section by scrolling down. To generate the condition “Show this field group if Post Type is equal to Product,” use “and” and “or” declarations. The new field will be visible on the Add/Edit WooCommerce product screen because of this.
Advanced Customization
You’ll find the “Options” section if you scroll down even further. You can make some further changes to the field’s appearance on the editorial page from here. The new section’s position can be specified. There are also ways to conceal and alter the styling of certain components. To finish the custom field creation process, click the “Publish” tab. The new fields will appear when you go to the editorial page. Fill in the blanks with values and save the product.
How You can Display the Custom Fields
Install the Product Table Plugins and Configure it
To display the field, we’ll need another plugin. In the control panel, go to “Plugins> Add new” and look for the WooCommerce Product Table plugin. On the interface, download and instal the files. Move on to the next step after activating it.
On the dashboard, look for WooCommerce in the menu. It will take you to the “Settings” screen if you click on it. Go to “Product Table” under the “Products” tab. In the required location, enter the licence key. Change the logo options to match the look of your brand.
Return to the website’s edit screen. Use the following shortcode to display all of your store’s products:
[product_table]
The brands will now be visible, but you will need to select the columns in which the custom field will be displayed.
The following snippet must be added to the product table shortcode:
[columns]
Between the quotations, make a list of all the columns. After inserting cf:, add your custom field, as shown in the example below:
[product table shortcodes=”true” columns=”image,name,cf:custom-field,reviews,price,add-to-cart”]
This coding will show the price, reviews, and add to cart options, and a custom field called “custom field.” To see how the code will appear on the edit screen, look at the image below.