Custom Product Pages on Wix: Part 3 - Display Product Information & Product Options

A product page is incomplete without clear and detailed product information. Customers have many questions about the product they want to purchase. One way to answer this is by providing a clear product name, price, description, and additional information they need.

Customizing the product options can also provide customers with a personalized experience by allowing them to select their preferred product options like color, size, and designs, making the product more desirable to customers and leading to increased purchase decisions.

If you want to add similar features to your Wix product page, you have found the right guide. 

This article will walk you through the step-by-step process of displaying product information and customizing product options on your product page.

• How to Add a Product Name to Your Wix Product Page

• How to Add a Product Price to Your Wix Product Page

• How to Add a Discount Price to Your Wix Product Page

• How to Display Product Options on Your Wix Product Page

• How to Add Product Description on Your Wix Product Page

• How to Add Product Additional Information to Your Wix Product Page

• Conclusion

Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive 'Velo for Beginners' course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.

Need help with your site? The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.

Recap

We are implementing the look and feel of this Etsy product page to customize our product page. In our previous article, we explained how to display and customize media items on a product page; you can check it out here.

In this article, we will implement all the product information on the Etsy product page. This involves displaying product information such as name, price, product options, product descriptions, and additional product information on your Wix product page.

Let’s get into it!

How to Add a Product Name to Your Wix Product Page

The first functionality we want to implement is to dynamically display the product name and price on our Wix product page. To do this, we need to set a text placeholder in the Wix editor.

To do this, follow these steps:

Step 1: Navigate to your Wix editor.

Step 2: Click the ‘Add Elements’ button and navigate to the text section.

Step 3: Drag and drop two text placeholders to the canvas.

Step 4: Replace the text with ‘Name’ and ‘Price’ respectively.

Now that we have set our text placeholder, the next step is to dynamically add the name and price using Wix code.

In our previous article, we used the Wix code to dynamically display and customize our media items. The aspect we will be focusing on to display our product name and price is the `dynamicDataset.onReady` function, which is used to execute certain functions when the product item dataset is ready.

The first thing we did was to use the `getCurrentItem()` function to retrieve our product. Then, we set our main media image to one of the images in our product data.

Then we created and invoked the `populateRepeater` function to populate our media items.

We will be picking up our next functionality from there, as we want to display the product name and price once the product item dataset is ready.

Step 5: Replace the ‘Name’ placeholder with a unique ID.

Step 6: Use the `text` element to dynamically add the product name from our product data.

The `text` element is added to the product name ID of `name`, and then its value is set to our product name using `thisproduct.name` to target our product name.

Step 7: Click the ‘Preview’ button to view live changes.

Notice the product name has been added

Now that we have added the product name, the next step is to add a product price to our Wix product page.

How to Add Product Price to Your Wix Product Page

You need to know a few things before displaying the product price on our Wix product page. This involves knowing the different price options we have in our product data and determining which type of price to display. To view this:

Step 1: Console log the variable that stores your product data. In this tutorial, it is the `thisProduct` variable.

Step 2: Click the ‘Preview’ button to view the details.

Step 3: Navigate to ‘Developer Console’ and toggle the arrow button.

Step 4: Scroll through the product details and look for the ‘Price’ element.

Notice we have three different price options in our product data, i.e., formattedDiscountedPrice, discountedPrice, and Price.

The ‘Price’ element is just a number value for the product price; the ‘formattedPrice’ element is a price we can use to directly display our product price. 

But in this case, the product has the same price for the three price options we have but what if we have a product that has two different prices? 

Let’s start out by using the ‘formattedPrice’ rather than using the ‘Price’ element. 

Step 5: Give the price placeholder a unique ID.

To make our code a little bit cleaner, let’s place the `populateRepeater()` function out of the `onReady()` function.

Step 6: Invoke the `populateRepeater()` function.

Now, let’s move on to create a new function to populate the product price.

Step 7: Create a new function.

In the `populatePrices` function, the `text` element is attached to the price placeholder ID of `price` and its value is set to the formatted price of the product data.

Step 8: Invoke the function.

Step 9: Click the ‘Preview’ button to view the changes.

Notice that the formatted price is displayed.

Yes, we have been able to display the product price, but what if there are cases where you want to add a discount price to the product? 

Or maybe you want to add both the original price and the discounted price?

Let’s quickly walk you through the process.

How to Add a Discount Price to a Wix Product Page

To add a discounted price to your Wix product page, there are a few things to put in place through the product dashboard. To do this, follow these steps:

Step 1: Navigate to your Wix dashboard.

Step 2: Scroll through the right navigation bar and select the catalog option.

Step 3:  Click the ‘Store Product’ option and select ‘Product.’

Step 4: Select the particular product you want to add a discount price to and scroll down to the ‘Pricing’ section.

Step 5: Toggle the ‘Onsale’ button on and enter your discount price.

Step 6: Click the save button to save your changes.

Step 7: Navigate back to the code editor.

Step 8: Console log the discounted price to assert that we can target it.

Step 9: Click the preview button to view the price.

Notice that the discounted price is displayed in the developer console.

The next step is to display both the original price and the discount price on our Wix product page.

Step 10: Navigate to the canvas and add a new text element.

Step 11: Enter a discount text placeholder.

Step 12: Swap the position of the discounted price and the original price.

Step 13: Reduce the size of the original price to make it smaller.

Step 14: Give the discounted price element a unique ID.

Step 15: Create a condition that only displays the discounted price when there is a discount.

The `if` statement checks if the original price of the product is greater than the discounted price. If true, it displays the discounted price by targeting the discounted price ID of `discountedPrice` and sets its value to the discounted price we added. Then it also displays the original price of the product.

Otherwise, it displays just the original price of the product.

Step 16: Click the preview button to view the live changes.

Notice that both the original price and the discounted price are displayed.

The next step is to add a visual anchor by striking through the original price. This helps customers to easily notice the price difference between the original price and the discounted price.

Step 17: Create a new variable and use the template literal to add CSS styling to the original price.

The template literal adds a grey color and strikes through the original price by using the `thisProduct.formattedPrice` to target the original price.

Then its value is stored in the `formattedPrice` variable.

Step 18: Use the `html` element to set the value of the original price.

The HTML element sets the value of the original price to the value stored in the `formattedPrice` variable. This will apply the new styling effect to the value.

Step 19: Click the preview button to view the live changes.

Notice that the strikethrough and gray color styling have been added to the original price.

Now that we have added the product name, original price, and discount price, the next step is to add product options. This feature is suitable in cases where a product comes in different options, like color or size. Implementing this will enable customers to choose the best options that suit their needs. 

How to Display Product Options on Wix Product Page

To add product options to a particular product, we need to add the changes through the product dashboard. Then use Wix code to display it on our product page. The steps are as follows:

Step 1: Navigate to the product dashboard.

Step 2: Scroll to the ‘Product options’ section and click the ‘Add options’ button.

Step 3: Enter your product options and click the ‘Add’ button to add the selected options.

Step 4: Enter as many product options as you need to add based on your product variations.

The next step is to display the changes on our Wix custom product page using a repeater.

Step 5: Navigate to your Wix editor.

Step 6: Click the ‘Add Elements’ button and select ‘List.’

Step 7: Select ‘Blank Repeaters’ and drag one of them to the canvas.

Step 8: Readjust the size of the repeater and place it under the ‘Price’ item.

The next step is to add a drop-down inside the repeater. This will enable customers to select from the available options.

Step 9: Click the ’Add Elements’ icon, navigate to the ‘Input’ option, and drag one of the ‘dropdowns’ to the canvas.

Step 10: Place the ‘Drop-down’ element inside the repeater.

The next step is to add styling to the repeater and the dropdown to have the feel and look of the Etsy product page we want to recreate.

 Step 11: Click the repeater container and select ‘Change Background.’

Step 12: Add a white background color.

Step 13: Click the dropdown element and select the ‘Design’ icon.

Step 14: Click the ‘Customize Design’ button.

Step 15: Select the ‘Corners’ option to add a round edge to the drop-down element just like we have it on the Etsy product page.

Step 16: Add a border-radius pixel based on your preference.

The next step is to add a field title to the drop-down element.

Step 17: Click the ‘drop-down’ element and select the ‘Settings’ option.

Step 18: Enter a field title text.

Step 19: Apply a white background color to the other container in the repeater.

The next step is to populate the repeater with our product data using Wix code.

Step 20: Give the drop-down container a unique ID.

Step 21: Give the repeater a unique ID.

Let’s view the options we have in our product data before displaying it on our Wix product page.

Step 22: Console ‘thisProduct.Options’ to view the available options we have in our product.

Step 23: Click the ‘Preview’ button to view the data.

Notice that we have an object of data that contains our product options. In this case, we have ‘Size’ and ‘Color,’ since they are the options we added in the product dashboard. The next step is to display this data.

Step 24: Create a function to populate the repeater with our product options

In the `populateOptionRepeater` function, `optionData` is set as an empty array.

Since the data in our product options is an object, it is passed to the `object.keys`, which returns an array of the object data containing its keys, i.e., Size and Color. 

The `forEach` method iterates over each of the keys in the array. Inside this loop, the `option` variable holds the data for the current product option (e.g., its name and choices).

This `option` object is then pushed into the `optionData` array using the `.push()` method, along with an `_id` property needed for the repeater.

The `if` statement checks if the current loop index (index+ 1)` equals the total number of product options. If this is true, it indicates that it is the last item; then the repeater is populated with the complete `optionData` array by assigning it to `$w("#optionRepeater").data`.

Step 25: Add an `onItemReady()` function to the repeater to set how the product label and product choices will be displayed in the dropdown options.

The `onItemReady` function is attached to the repeater to trigger an action once a new item is displayed. Inside this function, the dropdown label is set to the name of the product option, i.e., Size and Color. Then, the dropdown options are dynamically added by iterating over the product option choices array.

Each dropdown option’s label is set to the choice descriptions (Small, Medium, and Large), and its value is set to the corresponding product choice (‘Small, Medium, Large).

Step 26: Invoke the `populateRepeaterOptions()` function in the `(“#dynamicDataset”).onReady` function to execute the code once the dataset is ready.

Step 27: Click the preview button to view the changes.

Notice the dropdown label and options have been added.

However, there is a slight problem—the font color and the dropdown placeholder.

Let’s first work on changing the font color to black.

Step 28: Click the dropdown container and select the ‘Edit’ icon.

Step 29: Click the ‘Customize Design’ button and select the ‘Border’ option.

Step 30: Select the ‘Dropdown List’ tab and click the color box to change the text color to black.

To change the dropdown placeholder, follow these steps:

Step 31: Click the dropdown container and select the ‘Settings’ option.

Step 32: Enter your placeholder text.

Step 33: Click the preview button to view the changes.

The product options are now displayed just like the Etsy product page we are recreating.

Now that we have product prices and options displaying on our product page, the next step is to add a product description. 

How to Add Product Description to Wix Product Page

The Etsy product page we are recreating doesn’t have the product description feature, but we will be implementing it in this article in case you need to provide more information about the product to your customers. 

Follow these steps to add product descriptions to your product page:

Step 1: Navigate to the product dashboard.

Step 2: Select the particular product you want to add descriptions to. Then, scroll to the ‘Product Info’ section.

Step 3: Enter your product description in the ‘Description’ field.

Step 4: Click the ‘Save’ button to save your changes.

Step 5: Navigate to your code editor.

Step 6: Drag a text placeholder to the canvas.

Step 7: Give the text placeholder a unique ID.

Step 8: Dynamically add the product description using the HTML element.

The product description is set to the description we have on our product dashboard by targeting the text placeholder ID of `description` and attaching the HTML element, then its value is set to the description we have in our product data using thisProduct.description.

Step 9: Click the preview button to view the changes.

In case your product description is lengthy, you might need to add the ‘Read More’ button to only display a part of the text.

Step 10: Drag a button to the canvas and place it under the text placeholder.

Step 11: Give the button a unique ID.

Step 12: Use the `substring()` method to display a certain character length in the product description text.

The substring method extracts 100 characters from our product description. This will only display the first one hundred characters.

Step 13: Add an ellipsis to indicate that there is more text to display.

Step 14: Add an `onClick()` event listener to the ‘Read More’ button. 

Once the ‘Read More’ button is clicked, it displays the entire product description.

Step 15: Click the preview button to view the changes.

The next step is to add an event listener that reduces the product description length once the ‘Read More’ button is clicked, and also change the button text to ‘Read Less.’

Step 16: Add another `onClick()` event listener to the ‘Read More’ button.

This will change the product description back to the first 100 characters.

Step 17: Change the button text to ‘Read Less.’

Your Read More’ evest listener code should look like this:

Step 18: Click the ‘Preview’ button to view the changes.

How to Add Product Additional Information to Your Wix Product Page

To add more product information, such as ‘Refund Policy,’ ‘Shipping Info,’ and more, to your product page, follow these steps:

Step 1: Navigate to the product dashboard.

Step 2: Scroll to the ‘Additional Info’ section.

Step 3: Add necessary additional product information.

Step 4: Click the ‘Save’ button to save your changes.

Step 5: Navigate to the code editor.

Step 6: Drag a blank repeater to the canvas. This will be used to populate the additional product information.

Hint: The repeater can be found in the ‘List’ option.

Step 7: Click the ‘Manage Items’ button.

Step 8: Click the three dots icon and delete two items. Since we will be populating the data, there is no need to have three different items in our repeater.

Step 9: Place the repeater right above the ‘Read More’ button. This is where the additional product information will be placed.

Step 10: Drag a ‘Text’ placeholder inside the Repeater.

Step 11: Add a ‘Title’ placeholder inside the Repeater.

Let’s add a round edge to the repeater container.

Step 12: Click the repeater container and select the design icon.

Step 13: Select the ‘Corners’ option and add a border radius to it depending on your preference.

The next thing we want to do is to hide the additional product information by default and only display it once the ‘Read More’ button is clicked.

Step 14: Click the repeater and select the ‘Collapsed’ checkbox.

Step 15: Give the ‘Title’ and ‘text’ placeholder a unique ID.

Step 16: Give the Repeater a unique ID.

Now, let’s dynamically display the additional product information using Wix code.

Step 17: Add the expand element to the repeater in the `Read More.onClick()` function.

This will expand the repeater once the ‘Read More’ button is clicked.

The next step is to populate the repeater with the additional info data we added to the product through the dashboard.

Step 18: Navigate to the `dynamicDataset,onReady()` function and  Console log `additionalInfoSections` to view the data in the additional info.

Step 19: Click the ‘Preview’ button to view the data.

Notice that the additional info section is an array of objects with ‘title’ and ‘description.’

Step 20: Add the `onItemReady()` function to the additional product information repeater.

The `onItemReady` function is attached to the repeater to trigger an action once a new item is displayed. Inside this function, the `itemData` parameter represents the data we have in the additional info section. The title is set to display the title we have in the additional info section using `itemData.title`, and the description is set to display the title we have in the additional info section using `itemData.description`.

Step 21: Create a function to populate the additional info section repeater.

In the `populateAdditionalInfoSections()` function, the info section repeater is dynamically populated using the data from `thisProduct.additionalInfoSections`. The function iterates over each `item` in the array, spreading its data and adding a unique ID to the repeater to display them correctly.

Step 22: Invoke the `populateAdditionalInfoSections()` function.

Step 23: Click the preview button to view the changes.

Notice that the ‘product Information’ section displays once the ‘Read More’ button is clicked.

However, if you click the ‘Read Less’ button, the ‘Product description’ section becomes hidden, but the ‘Product Info’ still displays.

To correct this, navigate back to the editor.

Step 24: Add the collapse element to the repeater. This will hide the repeater once the ‘Read Less’ button is clicked.

The next functionality we want to implement is that the ‘Read More’ and ‘Read Less’ buttons work as expected, irrespective of the number of times they are clicked.

I.e., once the ‘Product Description’ and ‘Product Info’ are collapsed, we want to change the button text from ‘Read Less’ back to ‘Read More’ and also expand them once the ‘Read More’ button is clicked.

To implement this, we need to create a ‘Read More’ function.

Step 25: Create a new function.

Step 26: Copy the code in the ‘Read More’ event listener and paste it inside the new function.

Step 27: Cut out the code in the ‘Read More’ event listener.

Step 28: Invoke the new function in the ‘Read More’  event listener.

Step 29: Paste the ‘Read More’ event listener line of code in the new function. This will ensure that the new function is evoked continually each time the ‘Read More’ button is clicked.

Your code should look like this:

Step 30: Lastly, add a ‘Read More’ label to the button. This will change the button text from ‘Read Less’ to ‘Read More.’

Step 31: Click the Preview button to view the changes.

The ‘Read More’ and ‘Read Less’ buttons should work as expected.

Conclusion

Providing clear and detailed product information on your product page is essential, as it can help customers know more about the product they want to buy. Implementing a customized product option feature that enables them to select from a range of available options like size, color, and designs can also make the product more desirable, which can lead to more sales.

Implementing these features on our WIX product page is quite straightforward, as we have explained the step-by-step process in this article. We explained how to add a product name and price, then we moved on to how to add a discount price. We also explained how to display product options, descriptions, and additional information on your WIX product page.

But there’s more! In our next article, we will explain how to ...

Want to learn more? Ready to dive deeper into Wix and Velo? Take your skills to the next level with our comprehensive Velo for Beginners course on Udemy. Enroll today to uncover the intricacies of Wix and Velo.

Need help with your site?  The Wix Wiz team is at your side. Schedule a one-on-one consultation or have the entire team onboard with our development and support plans.