Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Customize WooCommerce Product Pages (No Code Method)

Do you want to customize your WooCommerce product pages without having to write any code?

By fine-tuning your WooCommerce product pages, you can get more sales and improve your store’s conversion rates.

In this article, we’ll show you how to customize WooCommerce product pages without any technical knowledge.

How to customize WooCommerce product pages (no code method)

Why Customize WooCommerce Product Pages in WordPress?

Your product pages are some of the most valuable pages in your online store. The problem is that the default WooCommerce product pages aren’t optimized for conversions.

The default WooCommerce product page

By customizing your WooCommerce product pages, you can create unique product landing pages that will convert your visitors into customers at a much higher rate.

This means your store can earn more revenue without needing additional traffic.

Before you start customizing your WooCommerce product pages, you need to make sure you have the fastest WooCommerce hosting to support your online store because speed impacts conversion rates.

Once you’ve done that, let’s take a look at how you can customize WooCommerce product pages with no code.

How to Customize Your WooCommerce Product Pages in WordPress

The easiest way to create a custom WooCommerce product page is by using SeedProd.

SeedProd is the best drag and drop WordPress page builder and comes with over 180 professionally-designed templates. This includes templates that you can use to promote your products, such as sales pages and landing pages.

Even better, SeedProd comes with special WooCommerce blocks that you can use to easily create a custom product page and get more sales.

First thing you need to do is install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Note: There is a free version of SeedProd, but for this guide we’ll use the Pro version because it has the built-in WooCommerce blocks we need. It also integrates with the email marketing services you may already be using to promote your products and services.

Upon activation, go to SeedProd » Settings and enter you license key.

SeedProd license key

You can find this information under your account on the SeedProd website. After entering the license, click on the ‘Verify Key’ button.

After that, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

SeedProd's page design templates

Next, you need to choose a template for your custom WooCommerce product page.

SeedProd’s templates are organized into different campaign types such as coming soon and 404 pages. Since we want to build a high-converting WooCommerce product page, click on the ‘Sales’ tab.

To select a template, hover your mouse over it and then click the ‘Checkmark’ icon.

Select SeedProd page template

We’re using the ‘Dinner Sales Page’ template in our images, but you can use any template.

Next, go ahead and type in a name for the custom product page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.

When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.

Name WooCommerce product page

This will launch the drag and drop page builder interface, where you can build your custom WooCommerce product page.

The SeedProd editor shows a live preview of your design to the right, and some block settings on the left.

SeedProd page editor screen

The left-hand menu also has blocks that you can drag onto your layout.

To start, you’ll want to replace any placeholder images with your own product photos. To do this, simply click to select an Image block in the live preview.

In the left-hand menu you’ll see all the settings you can use to customize this block.

Edit product image

In the menu, click on the ‘Select Image’ button.

You can then either choose a product image from the media library or upload a new file from your computer.

Adding a product image to the custom WooCommerce product page

After that, you’ll want to add the product title to the ‘Headline’ block, and a product description to the ‘Text’ block.

Simply click each block in turn, and then type the text into the little editor.

Change product headline and copy

You can also use the settings to change the font size, add links, change the alignment and color, and more.

Next, you’ll need to create an ‘Add to Cart’ button just like the default WooCommerce product page. In the menu, find the ‘Add to Cart’ block and drag it onto your page.

Insert add to cart button

At this point, you have all the basics for a successful product page. However, we want to get as many sales as possible so let’s add some items to boost your conversion rates.

First, let’s add a product star rating so customers can see that your products are high quality. Simply drag the ’Star Rating’ block and drop it where you want it to appear.

Add star rating block

You can then use the settings to change the total number of stars, the color, size, and more.

It’s also a good idea to add a customer testimonials block, as this can act as powerful social proof that encourages shoppers to trust your online store.

If you’re looking for a way to collect customer testimonials, then check out our expert pick of the best testimonial plugins for WordPress.

To display customer reviews, simply drag the ‘Testimonials’ block onto your product page.

Add product testimonials block

You can now customize the testimonial by adding images, changing the text, adding the customer’s name, and more.

If you want to add multiple testimonials to the block, then click on the ‘Add Testimonial’ button. This will turn the block into a rotating carousel of customer testimonials.

Adding a customer testimonial block to a WooCommerce product page

Next, you may want to add a product FAQ section, similar to the question and answer section on Amazon product pages.

To do this, just drag an ‘Accordion’ block onto your page, which creates a section with two collapsible sections.

Add FAQ drop down accordion

In the left-hand menu, click on each ‘Accordian’ field.

You can then go ahead and type the question and answer into the two text editors.

Adding a product FAQ to a custom WooCommerce page

Simply repeat these steps to create more questions and answers.

To add more items to the accordion block, simply click on the ‘Add New Item’ button.

Adding FAQs to your product page

You can also use the settings to style the FAQ section, similar to how you changed the appearance of your text and headlines.

SeedProd has a few additional WooCommerce blocks you can help you get more sales.

If you’re running a spring giveaway sale or Black Friday sale, then you can add a ‘Countdown’ block and use FOMO to increase conversions.

Product countdown timer

For more information, please our guide on how to add a countdown timer widget.

You can also highlight other products that shoppers may be interested in buying by adding a ‘Featured Products’ or ‘Top Rated Products’ block.

WooCommerce featured products block

For more details on adding popular products to WooCommerce, see our guide on how to display popular products on WooCommerce product pages.

You can continue to customize your product page by adding blocks and changing the settings in the left-hand menu.

When you’re happy with how the custom product page looks, it’s time to publish it by clicking on the dropdown arrow next to ‘Save.’

Publish WooCommerce product page live

Now if you visit the page on your WordPress website, you’ll see all of your changes live.

This will make it easier to convert visitors into buyers, and get more sales on your online store.

WooCommerce product page customized

How to Improve Your WooCommerce Product Page Conversions (2 Ways)

Once you’ve published your WooCommerce product page, there are more steps you can take to improve your conversion rates.

Add Purchase Activity Notifications in WooCommerce

Social activity notifications show all the products that shoppers are buying, in real time. This creates a FOMO and encourages shoppers to take a look at these different products.

The best way to add social proof to WooCommerce is using TrustPulse. It’s the best WordPress popup plugins and social proof apps, and has been proven to increase conversions by 15%.

It allows you to show real-time purchase notifications across your WooCommerce store.

TrustPulse real-time purchase notifications

For more details, see our guide on how to create a live sales notification for WooCommerce.

Create Personalized Marketing Campaigns in WooCommerce

You can also show personalized marketing messages to your customers. With dynamic text, you can display the visitor’s name, location, or even the day of the week.

This helps you show the right message to the right person at the right time, which can greatly improve your engagement rates and get you more sales.

The best way to add dynamic text is by using OptinMonster. It’s the best popup, and email capture tool for WordPress used by over 1.2 million websites.

OptinMonster WooCommerce

First, you need to visit the OptinMonster website and create an account. You’ll need at least the Pro level plan to create dynamic text with smart tags.

Next, you need to install and activate the OptinMonster plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin connects your WordPress website to the OptinMonster app. Upon activation, you’ll need to enter the license key from your account on the OptinMonster website.

In your WordPress dashboard, go to OptinMonster » Settings, click ‘Connect an Existing Account’ and enter your account details.

Connect OptinMonster account

Next, you’ll want to connect OptinMonster with WooCommerce.

This gives you additional display rules that you can use to customize your campaigns. On the same page, click ‘Auto-Generate Keys + Connect WooCommerce’.

Connect OptinMonster and WooCommerce

After connecting to OptinMonster, go to OptinMonster » Campaigns and then click the ‘Add New’ button.

This will take you to the OptinMonster campaign builder tool.

Create new OptinMonster campaign

There are dozens of templates to choose from.

We’re going to create a popup with a WooCommerce smart tag. To do this, select the ‘Popup’ campaign type and then choose one of the templates.

We’ll use the ‘Offer’ template, but you can use any design you want.

Select OptinMonster template

Simply hover over the template and then click ‘Use Template’.

Then, type in a name for your campaign and click ’Start Building.’ You’ll now be taken to the drag and drop campaign builder.

OptinMonster campaign editor screen

You can customize every single part of the popup by clicking it and then changing the settings in the left-hand menu.

We’re going to add dynamic text to the header so it shows today’s date and offers shoppers a coupon that’s only valid for today.

First, double click on any text element to bring up the menu. Then, click the ‘Smart Tags’ icon ‘{ }’ to bring up a list of available smart tags.

Select dynamic smart tag

Simply click on the smart tag you want to add to your campaign.

These smart tags use dynamically generated text to show a unique messages to shoppers.

Save dynamic text popup

When you’re happy with how the popup looks, make sure to click ‘Save’.

After that, click on the ‘Publish’ tab and then select the ‘Publish’ option.

Publish dynamic text popup

After that, exit the popup builder and you’ll be taken to a screen where you can confirm your display settings.

To make the popup live, change the status to ‘Published’ in the ‘Visibility & Status’ meta box and then click ‘Save Changes’.

WooCommerce popup visibility settings

Your WooCommerce popup with dynamic text will now be live on your online store.

You can continue to test different dynamic text and display settings to see which campaigns get you the most sales.

OptinMontster dynamic text popup

We hoped this article helped you customize your WooCommerce product pages without coding. You may want to see our guide on how to increase your blog traffic, or our expert pick of the best WooCommerce plugins for your store.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 CommentsLeave a Reply

  1. Lovely and insightful tutorial. I’m guessing this is relatively easier for stores with one product or a few products. If you have over a hundred products is there a way to make this a global template and apply automatically to all products without having to build one after the other? Thanks in advance

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.