How to Build a WooCommerce Product Page (Using Product Addons plugin & Woodmart theme)

Maria Elna Akkalya Roy
Technical Content Writer

If you have stumbled across this blog, you might be looking for a way to build a product page from scratch or have been commissioned to work on designing a product page for a client. To run an online store that stands out and creates an exceptional user experience for your consumers, the first stepping stone to cross is to build a WooCommerce product page. Do note that creating a product page is not enough, you have to creatively intricate your product page with a single style that is a visual treat and works flawlessly throughout your website.

Yes, a standard WooCommerce is simple, functional, and looks great. Though the default product templates from WooCommerce are great and conventional, stores search for styles that reflect their individuality, niche, and perspectives that can reach their customers. What if you can do it better if you combine a theme and plugin that are compatible with each other?

Importance of an enhanced product page

It's an image of a WooCommerce product page.

A core and pillar of an eCommerce store are its products. But, even if you have a good collection of products and stunning visuals, what is the point if you don’t exhibit it well enough to reach your consumer?

Let’s not beat around the bush, we all know that customers spend a great quality of time on product pages, and having an optimized product page is far more likely to help you gain more customers. Consumer feeds on every piece of information available on the website about a product before they make a purchase. Visuals, product descriptions, product reviews, ratings, etc., are the vital verticals that let your consumers stay on your website.

A product page should entice your consumers.

We live in an age where virtual markets pop out of the blue one after another. Nowadays, more than having a good collection of products is needed to be relevant in the market. Modern consumers keep an eye on specific key details while navigating through a store, from product placement and creative visualization to easy-to-navigate interfaces.

Gone are the days when consumers bought essentials by going to traditional stores and bought goods by checking them out via touch or feel. What makes consumers tick to complete a purchase? Contrary to a traditional market, e-stores do not have the option to give the consumer know the product and buy option. It is relevant to give shoppers as much information as possible so that they can complete the purchase.

Short descriptions can grab attention, but when it comes to a product page, adequate information on the product is a game changer. E-commerce shoppers tend to pay closer attention to details like product descriptions, prices, ratings, and reviews. Well, these criteria can change from product to product, but these factors can heavily influence the integral decision made by a customer.

Build a reliable brand reputation.

Product pages have been there from the beginning of eCommerce and will be there for generations. No matter the technological evolution, a product page is a window to your virtual marketplace’s brand value. An enhanced product page can build a brand reputation effortlessly.

To strengthen the core value of your brand, it is important how you present your product page. To start with, you have to be on the same page with your customers, and there are certain key points you have to analyze like

  • Does it help your consumers?
  • What are the issues that your brand could resolve?
  • Does your business hold a market value?
  • How is it best in the market?

These are a few of the likely questions that should pop up. It might not look much these are very relevant and important analyses you should growing your business online.

Giving a memorable, unique, content-rich product page that is balanced could quickly help you gain the upper hand over your competitors. Consumers seek out stores that could offer something different from the rest of the crowd. So coming up with a quirky and creative product page that is smooth, sophisticated, and has clever descriptions would undoubtedly impress your shoppers and sellers alike.

Optimize your website through your product page

WooCommerce product page have become increasingly relevant nowadays, there are significant factors we have to focus on optimizing the product page to convert each and every lead into possible profit. The higher the surge of visitors to your site, the more you can sell. The prime reason your website needs to be optimized is that customers don’t know the exact place they can buy the product they are looking for, and in most case scenarios is that they will look for the product online through a simple search through the search engine.

Therefore, optimizing your website with relevant keywords and key phrases in your content is essential. The ideal place to start is your website’s product page, by including long creative descriptions, titles, and images, you can upgrade your ordinary site to an SEO-friendly site. In addition, optimizing your website could create a transparent buzz that doesn’t overwhelm your consumer into buying your product yet give them a reach that is subtle. Including keyword-centric content with page slugs, captions, creative yet simple titles, descriptions, etc., can help your website rank at the top.

Woodmart Theme

A representation of of Woodmart theme on a WooCommerce product page.

Woodmart by Xtemos studio is a premium WooCommerce WordPress theme, this popular theme has been creating a boom in recent times. The theme offers a wide variety of features, an extensive repository of pre-built websites, and compatibility with Elementor making it one of the most sought-after theme in the market. What sets Woodmart apart really is its simplicity to use and versatility. The pre-built website design repository comes with unique templates suitable for any store, making it relatively easy to open a store in minutes. It can be used easily to customize the store in a way that the store owner prefers rather than building it from scratch.

Woodmart & Extra Product option plugin: compatibility

The extra product option by themehigh is a highly compatible plugin with the versatile Woodmart theme. Once the theme is installed, you can create a visually pleasing and stunning website from scratch and customize the elements in the WooCommerce product page with the assistance of the WooCommerce extra product option by themehigh. Both the plugin and theme work effortlessly without any issues.

Woodmart’s setup wizard will help you register your theme license, activate the child theme, help you pick up a page builder ( that is, either Elementor or WPBakery) and a set of prerequisites plugins that ensure your website is running smoothly. It’s a truly multipurpose WordPress theme that offers its customers high-quality designs for WooCommerce stores, portfolio websites, and corporate websites.

To install the Woodmart theme.

Once you have purchased the theme from the xtemos website

  • You can sign into your WordPress dashboard using yourdomain.com/wp-admin
  • Next, from the right side panel of the dashboard, select Appearance >Themes> Add new> Upload Themes.
  • Find and choose the Woodmart.zip file.
  • Upload the file, install it, and activate it

You can upload and activate the theme this way or upload the theme with FTP. To know more, check it out here.

Theme installation guide

Once the Woodmart theme is installed and activated, you will be redirected to a step-by-step wizard with six tabs, “Activation”,” Child Theme” “Page builder”,” Plugins”, “Pre-built websites”, and “Done”.

In the Activation tab, you can activate your “License certificate & purchase code” that you can access from the downloads in your Envato market account. This will notify you and allow you to get future updates related to the theme.

From the child theme, you can install the child theme for a safe parent theme customization. With the child theme, you can add in the necessary changes you need, and the changes will remain even after each update.

Then you will be redirected to the page builder plugin, here, you can pick either Elementor or WPBakery according to your preference. Please note that the demo content will be based on the builder you choose, and you can’t switch builders in the future.

Next, you will be redirected to a window with the prerequisite plugin list that ensures the functionality of Woodmart

Lastly, from the pre-built website, you will be able to access demo content. But before uploading the demo content, make sure to install and activate all the plugins related to it. Also, making a backup before uploading the demo content to the existing site is essential. This is to make sure that you have a copy of the existing site and that you can use it in case something goes wrong once the demo content is uploaded. For more installation information, visit woodmart documentation.

To set up a WooCommerce product page with extra product options:

  • Firstly login to your Themehigh Account and purchase the plugin.
  • From the Accounts Dashboard, you can find the Downloads section.
  • Select the woocommerce-extra-product-options-pro.zip and download the plugin file in the zip format.

Install & Activate Plugin

  • You can upload the plugin through the WordPress Dashboard.
  • Firstly, log in to the admin dashboard of your WordPress site
  • From the right side panel, navigate to the Plugin > Add New page.
  • Select the Upload Plugin button.
  • Choose the plugin zip file and install it using Install Now.
  • Once the Installation is completed, Select Activate Plugin to enable the Installed plugin.

Once you install the Woodmart theme, the store owner can add products to build their store according to their requirements. Then install the extra product option and customize products accordingly.

Traditionally, any product listed on a website has other elements like the product’s title, price, product description, and add to cart. But when it comes to certain kinds of stores require more than just that. Customers are often attracted to what you can offer them more, and so do you.

If you own a website that takes wedding cakes online, you require more than just a product description or catchy title to attract consumers to buy from you. You must present your product with several options that customers can customize according to their needs. This can be quickly done through extra product options, and you can start by customizing sections and move on to fields that can be set with several field types.

A better explanation is if a customer wants to order a red velvet cake with white chocolate frosting, a topping of cream cheese with cake decoration of chocolate panel with fruits, nuts and flowers that serves 45 guests. Yes, that is a complicated order by the namesake. But how can you complete the order if your website looks this.

A before product page of a bakery using just the Woodmart theme

This can easily let a major customer slip through your fingers as they don’t have any idea how to place the exact order. Well, the solution to this problem is to set a WooCommerce product page where you can give your customers the maximum option to customize their order.

A product page of a bakery with woodmart theme and extra product option for WooCommerce

This can easily be achieved by extra product option by themehigh.

Add to cart of a bakery with woodmart theme and extra product option

The Woodmart theme would visually represent the elements you set with extra product options by themehigh most gorgeously.

Extra Product option plugin

A product page of a shoe store

Setting up a website itself can be daunting. Most often, store owners need to remember the fact that setting up a WooCommerce product page is quite an elaborate task. The sheer amount of sub-task involved can easily make you let go of the whole plan to set up an online store. Now, if you check out a traditional store, one of the hardest tasks is checking and updating inventory based on the completed transaction and trade. However, if you own an e-store, you likely know that certain products have multiple variants, some that can be customized and others that might have add-ons.

Even though WooCommerce stores come with built-in tools and forms, they sometimes contain certain limitations. If you cross-analyze today’s market, an ample number of plugins are available, which are often suitable for any business. However, while WooCommerce offer the basic functionality of setting up a store, there is still lacking when it comes to customization option. To tackle these discrepancies, an excellent choice is using WooCommerce’s Extra Product Option by Themehigh while building your website.

WooCommerce extra product option by themehigh has a wide array of customization options for product pages. The plugin does not just limit you to adding extra product fields alone, the plugin offers an overall customization option where you can add text, passwords, labels, headings, price types, etc., on your WooCommerce product page

Benefits of Extra Product option plugin

Altogether there are around 27 field types offered by WooCommerce extra product options by theme high. Field types range from text, number, checkbox, and slider to the color picker, product group, date picker, file upload, etc. Each field type can be used differently according to how a store owner wishes to customize it.

  • With WooCommerce Extra product option, it is easier for an e-store owner to customize their product field with several additional properties like default value, max. length, placeholder, validation, input masking pattern, etc.
  • The display styles can be set in with much more ease, as there are several customization options like title type, title color, title class, title position, etc.
  • Suppose a store owner sells a customizable product(e.g., a custom t-shirt). In that case, WooCommerce’s extra product option has customizing features like a color picker, color, or image group for choosing a pattern, color, or design for the product.
  • If you wish to add in a slider range for a specific product, you can set a slider/range.
  • You can set in select, multi-select, radio, and checkbox groups when you got to ask the consumer to choose multiple options for a single product.
  • Based on certain conditions, you can also alter the fields to be shown or hidden, and this feature is called display rules.
  • You can set up custom validation.
  • An e-store owner can set in price fields to increase or decrease the product price inside the WooCommerce product page.

Final Note

Using a plugin that is compatible with the theme of your website can work wonders for your website. You can easily make use of the features of the plugins along with the theme with much ease.

As we discussed above, both the Woodmart theme by xtemos and Extra product option by themehigh works together seamlessly. They offer users several features to help you curate and create unique stores. With a large set of options available, the store owner can alter the WooCommerce product pageand add changes to the store from time to time.

You might also like