the shopping cart and completes the order within the store, so it is necessary to customize the product page in a professional way to double your store’s sales.
The WooCommerce plugin provides some simple default settings for customizing the product page such as setting the product title, description, image, gallery, price, shipping details, and other basic product data.
But in this article, we will learn about several methods that you can use to customize the product page in a professional manner, whether through the default settings or through the modification options provided by the template, or by using some add-ons that provide advanced options for modification on the product page.
Customize the product page with default settings
The WooCommerce plugin provides several default options that can be used to customize the content and appearance of the product page.
The first default option provided by the WooCommerce add-on is to add the product through the Add New Product tab in the add-on control panel, through which you can start adding the product title and its description. Here you must provide an attractive title for the product, as well as a description that contains the full product details. It answers all the questions that the customer may ask before purchasing the product:
After that, the WooCommerce add-on provides you with the ability to specify the type of product, as you can choose ( simple product ) if you are displaying a tangible product, and you can also choose ( virtual product ) if your product is a service or digital product, as well as the type (downloadable ) that You can choose it if the product is a downloadable file, so that customers will be directed to the product download page after completing the order:
The WooCommerce add-on also provides setting an image for the product as well as an image gallery by default, so through this tab you can upload professional images of the product that encourage the customer to visit the product and add it to the shopping cart:
There is also the option to set ( related products ), which is a very important tab, through which you can choose some products from the store to be displayed and suggested to customers when they visit the product page. This helps increase the possibility of adding more products to the shopping cart.
Therefore, make sure to choose products that are related and closely related to the product you are editing to encourage the customer to add more products to the shopping cart:
Customize the product page through template settings
In addition to the simple default options in the WooCommerce add-on that help you add products and customize the data for each product so that it looks the way you want inside the store, there are also options provided to you by the template that you use inside your store, and they differ from one template to another.
We’ll take an example of two different templates, and see what options each template offers for customizing and controlling the product page.
Storefront template options to customize the product page
The Storefront template is one of the most popular templates that greatly supports WooCommerce, and the template provides very simple options in its free version to customize the product page.
To access the product page options, go to the ( Customization ) tab from within the Appearance tab in the WordPress control panel:
Then go to the Woocommerce tab:
Then go to the ( Product Page ) tab, from which you can use the options to customize the product page provided by the template:
We note that the Storefront template provides only a simple option to customize the product page, which is controlling the way to crop the prominent image of the product, and does not provide additional options in its free version, while the paid version has more control over the product page options:
Astra template options to customize the product page
We will now switch to another template, Astra. You will find that it provides more options in customizing the product page within WooCommerce, as it provides the option to control (container layout), which is an option that allows you to choose more than one shape to display product data such as title, description, images, and price, as well as the ribbon layout. Sidebar in which you can choose one of the shapes and designs that you would like to apply to the sidebar of the product page:
The template also provides the option to control whether to show or hide the navigation path for the link to the product, as well as to show the shipping details for the product as indicated in the following image. Among the options available in the template is also the option to control the display of the button to add the product to the cart:
If we notice that the options for modifying and customizing the product page within WooCommerce differ depending on the template used, as well as the free or paid version of it, but there is another option that you can use to apply other, more professional modifications to the product page within the store, which is by using one of the WordPress plugins specialized in this matter.
Customize the product page using plugins
If the effective template within your site does not provide you with sufficient options to modify the product page exactly the way you want, there is another way to do this, which is by using WordPress plugins that specialize in modifying and customizing the product page.
The Single Product Customizer add-on is considered one of the most popular add-ons specialized in modifying and customizing the product page on WooCommerce. The add-on provides the ability to add any visual, text, or video elements within the product page and in the place you choose yourself.
Install and activate the add-on to start using it to customize the product page within your store. After activating the add-on, go to its settings tab within the control panel, and click on the Add new position button.
The page for adding the required modifications will open for you, and here you will be asked to choose the place where you would like to add the modifications within the product page, and it will give you the following options, among which you will find (before the product), (after the product title), or (after the product price). Choose the place. To which you would like to add modifications:
After choosing the place you want to apply the modifications to within the product page, a text editor similar to the traditional WordPress text editor will appear. Add texts, images, or any other element you wish to add within the product page in the place you have chosen:
Note that we added text encouraging the customer to order today to get free delivery, then we attached an image to attract the customer’s attention, as the visual element is very important to increase the visitor interaction rate and improve the user experience.
After you add all the elements, whether texts, images, videos, or others, click on the update button, and then you can browse one of the product pages within the store, in which you will find the modifications that you applied within the product page:
You can also return to the add-on settings page and click on the Add new position button, then choose another place that you would like to modify within the product page, such as the section (after one product), which allows you to add modifications that appear immediately after the end of the product data.
We can write a text (products with 30% discounts for 24 hours only) and immediately after that we paste the short code [products] that automatically shows other products in the store:
After updating the page, go to the product page now to find that other products in the store appear below the product data, which helps in displaying a greater number of suggested products to customers, and thus increasing the opportunity to double the store’s sales:
You can add some identifiers to the short code [products] to have greater control over the type of products that are displayed instead of displaying all products, such as the limit identifier that you can use to determine the number of products allowed to be displayed, as well as the category identifier that allows you to choose the name of the classification. Only the products you want to display from.
In the following image, we used the short code for displaying the products, then we specified the number of products displayed to be (4) only. We also specified the classification (Disc) so that the products would be displayed from within it without the rest of the other classifications in the store:
The WooCommerce add-on provides you by default with a large variety of short codes that help you show and display products in a more professional manner. You can review the WooCommerce short codes guide for more information.
With the same idea, you can apply any changes you want within the product page. Try to focus only on the elements that help the customer make a purchase decision and encourage him to complete the rest of the steps until reaching the order completion page. Here are some tips while modifying the product page in your store:
- Display the ( Add to Cart ) button in a clear size in front of customers.
- Choose product images very carefully because the first thing one looks at is often the product image.
- Write a brief description of the product and try to answer all the questions asked by customers.
- Display product reviews on the product page because this helps the customer see the experiences of other buyers, and perhaps someone’s review will encourage him to add the product to the cart .
- Use text or images that encourage the customer to order the product to receive exclusive offers.
Customize the product page using code
If you have good knowledge of using CSS formatting codes, you can modify the product page in terms of its look and feel without having to use external add-ons to do so. However, I always advise you before modifying the site’s source code to take a backup copy of the site.
To modify the product page using the code, you first need to access the class name of the item to which you want to apply modifications. For example, if you want to modify the font size of the product title, in this case you need to access the class name of the product title, which is What you can get by right-clicking on the address, and choosing (Inspect) or Inspect depending on the browser you are using:
The page’s source code panel will open in front of you, and when you hover your mouse over the title, you will be presented with its line of code, in which you will find the class name for the title, and here you copy it to begin applying modifications to it:
Now to apply the modifications using the code, you need to access your site’s customization panel from within the Appearance tab:
Then go to the CSS Formatting tab:
Inside the Add CSS Codes tab, you can start writing the formatting codes that you want to apply to the product title or any other element within the product page. For example, the following image shows using the Font-size feature to enlarge the font size of the product title:
.woocommerce div.product .product_title {color: #FF5733}
Here is another example of modifying the button to add the product to the cart, where we used the class name for the button. We wrote some codes to modify the format, such as the Background property, which is used to change the background color, as well as the Font-size property to change the font size, and the Border-radius property. To create rounded edges for the button, here is the result:
.woocommerce div.product .button {background: #000000; font-size:25px; border-radius:15px;}
In the same way, you can delve into using CSS language codes to modify with complete freedom all the elements within the product page until you reach exactly the look and feel that you desire, and do not forget to click the publish button on the customization page so that the codes can be applied to the elements within your site.
Conclusion
Whether you have knowledge of using codes within WordPress or not, you can modify the product page within your store and customize it to look professional, so do not rely on the default appearance provided by the template used within your store if it is not sufficient to display the product page in a way that encourages customers to add product to the cart and complete your in-store purchase.
