How to customize a WooCommerce product page

To successfully showcase your items on-line, you’ll want product pages which can be visually interesting and straightforward to navigate. The default WooCommerce template affords the necessities, however you could be in search of extra options to accommodate the distinctive wants of your on-line retailer and match your fashion.

With built-in customization instruments just like the block editor and Website Editor, WordPress allows you to make vital adjustments to your WooCommerce product pages with out intensive improvement experience. Plus, you may get particular design options and added performance with totally different WooCommerce extensions. Or, in case you’re a extra skilled WordPress consumer, you possibly can modify your WooCommerce product pages utilizing {custom} code.

On this submit, we’ll take a look at the default WooCommerce product web page and discuss why you would possibly wish to customise it. Then, we’ll present you three other ways you can begin customizing WooCommerce product web page templates. 

What’s a WooCommerce product web page?

While you set up it in your WordPress web site, the WooCommerce plugin immediately creates a Store web page the place you possibly can checklist all of your merchandise. If a customer clicks on any merchandise in your catalog, they’ll be taken to the corresponding product web page. The structure of this web page will largely rely in your theme, however it can include some important details about the product. 

You possibly can add or edit this info by navigating to the Merchandise tab in your WordPress dashboard, finding your merchandise, and choosing Edit Product. Alternatively, you possibly can click on on Add New to create a brand new product.

Begin by including a product title and product description. On the proper, you possibly can connect a product picture.

For those who scroll right down to the Product knowledge part, you’ll see you could create easy merchandise, grouped merchandise, variable merchandise, or affiliate products. Right here, you can too configure delivery settings, attributes, linked merchandise (for cross-sells), and extra.

On this web page, you can too select a class in your product and add tags. These options allow clients to navigate your product catalog with larger ease. 

While you’re completed configuring a product, hit the Replace button. Right here’s what a default product web page would possibly appear like on the entrance finish:

As you possibly can see, this WooCommerce product web page comes with the necessities for promoting your items on-line. Be aware that the template you see on the entrance finish of your website would be the identical for all merchandise. 

Why you must customise your WooCommerce product web page

So, why do you have to customise the WooCommerce product web page if it really works simply nice? 

Nicely, maybe you don’t have to in any respect.

For those who choose a minimalist design and solely need important options to promote your merchandise, you may not have to make any adjustments. There’s actually nothing that claims you should customise WooCommerce product pages and the default choices have labored simply nice for hundreds of profitable retailer homeowners. 

That mentioned, the default WooCommerce product web page design might be limiting. For instance, there’s no possibility so as to add different kinds of media, like video recordsdata or variation swatches.

This simplicity would possibly work for some on-line shops. However others will need extra options to assist improve gross sales.

With this in thoughts, you must customise your WooCommerce product web page in case you’d prefer to:

• Supply extra choices for patrons. Relying in your product and on-line retailer kind, you would possibly want to supply extra choices for patrons. As an example, you can embrace add-ons like gift wrapping, product customization for one-of-a-kind gadgets, or product bundling for comfort. You would possibly even wish to provide wholesale pricing for sure patrons.
• Present extra details about your product. While you give clients all the required info, it might be simpler for them to decide (and a purchase order). You possibly can add a product FAQ tab, variation swatches, 360 pictures, movies, and many others. 
• Assist your visible model. By including distinctive design options to your product web page, you possibly can additional improve your branding. Ideally, your product web page ought to match your brand personality and enchantment to your audience.

All of those extras can contribute to a winning product page design and improve your average order value (AOV). 

3 ways to customise the WooCommerce product web page

Now, let’s take a look at 3 ways you possibly can customise your WooCommerce product web page!

1. Utilizing the Website Editor

The beauty of WordPress is that its native options are very beginner-friendly. Because of the Site Editor, you don’t have to know how you can code in an effort to create beautiful {custom} product pages in WooCommerce.

With the Website Editor, you’re in a position to customise your on-line store utilizing blocks. WooCommerce even has its own set of blocks, which embrace components for displaying filters, search bars, greatest promoting merchandise, and extra.

The Website Editor works in a really related option to the block editor. However whereas the latter is used for pages and weblog posts, the Website Editor allows you to customise world components like your header, footer, and the WooCommerce product web page template. 

Be aware you could solely use the Website Editor with a block theme. For those who’re nonetheless utilizing a basic theme, you’ll have to seek advice from technique three on this information.

Additionally, the content material for every particular person product web page can solely be modified by going to the Merchandise tab and opening the merchandise within the back-end editor (as proven earlier). What we’re about to do is customise the web page elements and elegance of your WooCommerce product web page.

To get began, go to Look → Editor and click on on Templates.

Scroll right down to the WooCommerce part and choose the Single Product template.

Then, click on on the pencil icon to open the template within the editor.

At first, you’ll see that the template is grayed out.

Click on on the template space and also you’ll be prompted to rework the template into blocks. Hit the Remodel into blocks button to proceed.

Now you possibly can edit your WooCommerce product web page utilizing blocks.

In case you’re not conversant in WordPress blocks or the Website Editor, listed here are just a few helpful methods you possibly can tweak this web page:

Change the web page structure

To regulate the web page structure, click on on a bigger block and choose the mother or father block.

Your horizontal menu ought to then show arrows that allow you to maneuver that a part of the web page left or proper.

You’re additionally in a position to transfer blocks or teams of blocks up and down.

Moreover, if you wish to add a block, simply hover over the realm the place you’d prefer to insert it, and click on on the plus image.

If you wish to modify the structure, including blocks for columns or teams makes probably the most sense.

You can too make world adjustments to the template structure by choosing it after which opening your block settings.

Underneath Structure, you’ll have the choice to vary the justification and place of the design. You possibly can even rework it right into a “sticky” component — which implies it received’t disappear when guests scroll down the web page.

While you’re joyful along with your modifications, hit the Save button on the high of your display.

Change colours and typography

While you customize fonts and colours in your product web page, you can also make certain the design aligns along with your visible model. 

To change colours within the Website Editor, select the component you’d prefer to edit and open your block settings on the proper.

The weather you possibly can change will rely on the block, however usually you possibly can modify the textual content, background, and hyperlink colours.

By default, you possibly can select out of your theme’s default colours.

For those who click on on the realm that claims No shade chosen, you’ll get a shade picker.

Right here, you possibly can drag your mouse round to pick out a shade. The Website Editor will even let you recognize in case you’ve picked a poor shade distinction.

You can too enter particular HEX, HSL, or RGB shade codes. That is preferrred because it allows you to match your actual firm colours.

Within the Typography tab, you possibly can change the scale of textual content to small, medium, giant, and many others.

To entry extra font settings, click on on the three dots subsequent to Typography.

You will have tons of choices right here. Simply click on to pick out them and add them to your Typography menu.

You possibly can all the time deselect these settings in case you determine you don’t want them.

Add new blocks

Need to add components to the product web page? The Website Editor makes that doable.

As an example, if you’re working a site-wide sale, you can add a banner block to the highest of your template.

Or if you wish to make navigation easier for customers, you would possibly add a search block to the web page.

It’s a good suggestion to familiarize your self with the accessible WordPress blocks and WooCommerce blocks, so you possibly can see what choices you’ve. 

Create a number of kinds of product pages

As you’ve seen, there are a number of methods to customise the WooCommerce product web page template within the Website Editor. The adjustments you make might be mirrored on all of your WooCommerce product pages.

However in sure instances, you may want a template that’s solely used for a particular product kind or class. As an example, you may want a completely distinctive product web page for a brand new merchandise you’re launching. Or, you would possibly wish to create a sale web page for a sure product class across the holidays.

To create a number of templates for various functions, go to Look → Editor → Templates. Then, click on on the plus image so as to add a brand new template and select Single merchandise: Product.

This allows you to create a brand new product web page template, however for one merchandise. Choose your required product from the menu to launch the Website Editor.

By default, you’ll be prompted to make use of a pre-existing sample. Your first alternative must be your basic product web page template.

Utilizing a pre-existing sample may also help fast-track the design course of. However you possibly can all the time skip this step in case you choose to begin from scratch.

Now, in case you return to the Templates display and hit the plus image once more so as to add a brand new template, you’ll see an possibility to pick out Class (product_cat).

This template might be for a particular class, like equipment, clothes, or decor. 

Merely select your class and begin constructing your template. The steps are the identical as with the Single merchandise: Product possibility.

2. Utilizing WooCommerce extensions

As you’ve seen, if you’re utilizing a block theme, the Website Editor allows you to customise your WooCommerce product web page template in several methods, with out touching a line of code. 

Nonetheless, it doesn’t provide the means to increase the performance of the web page. Fortuitously, there are many WooCommerce extensions that provide help to do that, even in case you’re a newbie with out technical expertise. 

On this part, we’ll take a look at some instruments that allow you to switch your product web page with new options. To make issues simpler, we’ve organized these extensions into three use instances: for creating superior merchandise, optimizing WooCommerce product pages, and growing gross sales.

Create superior merchandise

In case your on-line WooCommerce retailer affords bespoke merchandise or superior product variations, you may want a WooCommerce extension to facilitate the sale of this stuff. Beneath, we’ll discover just a few top-notch choices.

Superior Product Variation

WooCommerce allows you to create variable merchandise by default, however the settings for these things is usually a bit restricted. 

For those who provide a number of items in several types, colours, or sizes, you would possibly think about using the Advanced Product Variation extension. This helps you show product variations extra successfully, so clients will get a greater sense of your choice.

For instance, it enables you to set world attributes to create variation swatches. These swatches can showcase totally different colours, pictures, movies, and textual content, creating effective product displays. 

Moreover, the extension permits you to customise your variation galleries and create tables to obviously present the accessible choices.

Product Designer for WooCommerce

For those who promote one-of-a-kind merchandise like {custom} T-shirts or mugs, you’ll want a software like Product Designer for WooCommerce. This extension provides a “Customise Product” button to your web page.

Your clients will be capable to add pictures, clip artwork, shapes, and templates to your merchandise. And so they’ll even be capable to add them to their carts instantly from the design web page. It additionally creates print-ready recordsdata, which may also help facilitate the manufacturing of {custom} items.

Composite Merchandise

Composite Products is a robust extension that’s excellent for on-line shops that course of complicated orders. It helps clients configure a product with a number of components, streamlining the workflow to be as user-friendly as doable.

As an example, a skate store could enable clients to construct their very own board in 4 steps, customizing all the things to their particular preferences. Superior sorting, filtering, and conditional logic make it straightforward for buyers to seek out what they’re in search of.

The beauty of Composite Merchandise is that it has built-in help for product bundles. Meaning when clients create their distinctive product, they’ll be capable to pull from all of the accessible gadgets in your catalog.

Value by System Calculator for WooCommerce

Some {custom} merchandise require extra assets, like extra cloth or wooden. With out the proper instruments, making a product web page for these things might be logistically difficult.

The standard option to promote such a product could be to get in contact with clients with a quote. However this will drastically decelerate the gross sales course of. The truth is, one of many main reasons that shoppers abandon carts is that they will’t calculate the entire value of the order upfront.

That’s the place the Price by Formula Calculator for WooCommerce extension is useful. With this software, you possibly can add fields with formulation and guidelines to calculate the ultimate value of a product. This will accommodate distinctive measurements like size, quantity, and extra. 

Wholesale For WooCommerce

When you’ve got a big stock, you could be excited about providing your gadgets at wholesale costs. The Wholesale for WooCommerce extension offers you all the things you want to get began.

You possibly can create and handle a number of wholesale consumer roles and arrange role-based pricing. It additionally comes with a drag-and-drop registration kind builder, so you possibly can create a wholesale software.

Moreover, you’ll get the choice to cover wholesale merchandise and costs from common clients. You’ll even get a wholesale dashboard that shows reviews on gross sales, refunds, orders, and extra. This fashion, you possibly can see how your WooCommerce wholesale business is progressing.

Optimize product pages

Having the minimal performance you want to promote your merchandise is crucial. However if you wish to create high-converting product pages, you might have to spice issues up.

Listed here are some extensions that may assist enhance your WooCommerce product pages.

360º Picture for WooCommerce

When clients are looking for huge ticket gadgets like home equipment or furnishings, they’ll doubtless wish to get as a lot element concerning the product as doable earlier than heading to the checkout page. 

Whereas complete product specs, static pictures, and movies can go a good distance, providing a 360º picture may also help convey your merchandise to life. 

When you’ve got the time to photograph your products from each angle, 360º Image for WooCommerce may also help you create this handy visible impact. This extension is extremely user-friendly and absolutely responsive. 

It additionally comes with navigation controls and affords full display mode, so your clients can get take a look at your product.

WooCommerce One Web page Checkout

An extended and sophisticated checkout course of is one other one of many main reasons customers abandon carts. So, you would possibly wish to streamline the method utilizing WooCommerce One Page Checkout.

Because the identify suggests, this extension enables you to construct a {custom} product web page that guides buyers on to buy. They will add or take away gadgets to their cart and full cost with out ever ready for a brand new web page to load.

This software is right for websites with fewer merchandise or focused touchdown pages related to advertising and marketing campaigns. 

WooCommerce Tab Supervisor

Good product descriptions can help increase sales. What’s extra, product-based search engine optimization (SEO) is essential for each ecommerce retailer. You should use your product descriptions as natural alternatives to include key phrases to assist your website carry out higher in search outcomes.

That mentioned, in case you present your clients with an excessive amount of info, you possibly can overwhelm them. Subsequently, you would possibly wish to make the most of product tabs to current product info in a extra organized method.

WooCommerce Tab Manager may also help you do that. It enables you to customise your core tabs and re-order the default tab structure. You possibly can even use it to create world tabs, third-party tabs, or distinctive tabs for particular merchandise.

Enhance product gross sales 

Now, listed here are some instruments that can provide help to improve your WooCommerce gross sales utilizing each conventional and extra refined advertising and marketing strategies.

Sale Flash Professional

Creating a sense of urgency may also help enhance conversions. One wonderful means to do that is by working flash gross sales.

Sale Flash Pro provides this performance to your WooCommerce product web page together with customizable methods to spotlight these gross sales in your website — together with a show of the unique vs. sale value to make gadgets look much more engaging.

WooCommerce Wishlists

Round 40 percent of online shoppers say that their consumer expertise could be higher if retailers provided wishlists. With a quantity that top, each on-line retailer ought to have added this performance on their precedence guidelines.

WooCommerce Wishlists offers your clients full privateness management and the power to create limitless wishlists. They don’t even have to fret about registering in your web site, since they will save their wishlist as a visitor.

Product Suggestions

Upselling and cross-selling methods are essential if you wish to enhance your total income. Recommending related merchandise is among the only methods to do that.

With the Product Recommendations extension, you’re in a position to robotically provide clever recommendations to your clients. As an example, the software can show associated merchandise in the identical class or gadgets which can be incessantly purchased collectively.

It may well even generate automated suggestions based mostly on the patrons’ lately seen historical past. Helpful reviews can even provide help to establish your only suggestion methods.

Product Add-Ons

Product add-ons provide one other refined option to increase your AOV. This may be particularly helpful for smaller boutiques or on-line shops which can be in a position to present a excessive degree of personalization to their orders.

The Product Add-Ons extension helps you do that in just some easy steps. You possibly can incorporate these add-ons utilizing dropdowns, textual content packing containers, checkboxes, pattern pictures, and extra. 

While you’re utilizing this software, you possibly can apply product add-ons globally or to particular person merchandise. Plus, the extension is appropriate with different well-liked instruments like WooCommerce Subscriptions and WooCommerce Bookings.

Product Bundles

So long as you’ve a handful of things within the catalog of your on-line retailer, you possibly can in all probability profit from offering product bundles. Though WooCommerce doesn’t include this characteristic by default, you should utilize the Product Bundles extension to get it.

This software allows you to bundle each easy and variable WooCommerce merchandise. You possibly can even suggest optionally available gadgets and provide bulk amount reductions. Plus, you’re in a position to customise the looks of your bundles and bundled gadgets.

It’s additionally price noting that the extension is appropriate with each bodily and digital items. Meaning it might additionally work for merchandise like online courses and subscriptions.

3. Utilizing {custom} code

You can too modify your product web page utilizing {custom} code. This technique is especially helpful in case you’re utilizing a basic theme and due to this fact don’t have entry to the Website Editor. 

Be aware that tinkering instantly along with your web site’s theme recordsdata is a fragile course of. For those who don’t have the technical experience, you can find yourself damaging your website and inflicting downtime. 

With this in thoughts, you’ll wish to you’ll want to back up your WooCommerce store earlier than you proceed. It may additionally be greatest to use a staging site to experiment along with your customizations. 

Then, when you’re able to make your adjustments dwell, ensure that to use a WordPress child theme. This fashion, your customizations received’t be misplaced with any updates to your mother or father theme.

Now, listed here are some methods you possibly can modify your WooCommerce product web page utilizing {custom} code.

Utilizing {custom} CSS

If you wish to customise the fashion of your WooCommerce product web page utilizing code, CSS is the best choice. It allows you to modify issues like colours, fonts, hyperlinks, and extra. 

There are just a few methods you are able to do this. Let’s check out them.

Within the Website Editor

So as to add CSS to your product web page utilizing the Website Editor, go to Look → Editor → Types → Further CSS.

You possibly can place your code within the Further CSS field.

As an example, if you wish to modify the colour of a product title, you can use a code snippet like this:

h2.woocommerce-loop-product__title, .woocommerce div.product .product_title {

    shade: #ffffff;

    letter-spacing: 1px;

    margin-bottom: 10px !vital;

}

You’d merely exchange “ffffff” along with your most popular shade code. 

Or, in case you’d like to vary the font measurement you should utilize this CSS snippet:

.woocommerce div.product .product_title { font-size: 25px; }

Simply ensure that to Publish your adjustments.

After all, these are just some easy examples, however the alternatives are limitless. For those who’re excited about studying extra, you possibly can try the WordPress documentation on CSS.

Within the Customizer

In case your theme doesn’t help full website modifying, you’ll have so as to add your CSS code within the Customizer. To do that, go to Look → Customise → Further CSS.

CSS will perform the identical method right here because it does within the Website Editor.

In your baby theme’s fashion.css file

The final location the place you possibly can add CSS to WordPress is in your theme’s fashion.css file. Once more, you’ll wish to work along with your baby theme to make sure that your modifications aren’t misplaced in updates.

Go to Look → Theme File Editor.

By default, your fashion.css file must be chosen. If it isn’t, merely choose it on the proper hand facet of the display beneath the Theme Information menu.

Then, you possibly can add any CSS to the very backside of the file. You’ll simply have to replace it if you’re completed.

Utilizing PHP

CSS is nice for altering the looks of WordPress, however it will probably’t provide help to add performance to your WooCommerce product pages. 

To try this manually with code, you’ll want to make use of PHP. You possibly can add PHP code to your baby theme’s features.php file or utilizing a plugin like Code Snippets.

Listed here are just a few choices you would possibly wish to strive in case you’re an skilled WordPress consumer or developer:

WooCommerce hooks (actions and filters)

For customers preferring modifying components of WooCommerce manually, you’re ready to make use of WooCommerce hooks. These PHP code snippets allow you to hold out “actions” and “filters” to switch your WooCommerce product web page.

Right here’s an instance of a helpful motion:

/**

 * Permit shortcodes in product excerpts

 */

if (!function_exists('woocommerce_template_single_excerpt')) {

   perform woocommerce_template_single_excerpt( $submit ) {

      world $submit;

       if ($post->post_excerpt) echo '<div itemprop="description">' . do_shortcode(wpautop(wptexturize($post->post_excerpt))) . '</div>';

   }

}

While you implement this hook, you’ll be capable to add shortcodes to your product excerpts. 

In the meantime, in case you needed to display product attribute archive links, you can use this code snippet:

/**

 * Show product attribute archive hyperlinks 

 */

add_action( 'woocommerce_product_meta_end', 'wc_show_attribute_links' );

// if you would like to indicate it on archive web page, exchange "woocommerce_product_meta_end" with "woocommerce_shop_loop_item_title"

perform wc_show_attribute_links() {

world $submit;

$attribute_names = array( '<ATTRIBUTE_NAME>', '<ANOTHER_ATTRIBUTE_NAME>' ); // Add attribute names right here and bear in mind so as to add the pa_ prefix to the attribute identify

foreach ( $attribute_names as $attribute_name ) {

$taxonomy = get_taxonomy( $attribute_name );

if ( $taxonomy && ! is_wp_error( $taxonomy ) ) {

$phrases = wp_get_post_terms( $post->ID, $attribute_name );

$terms_array = array();

        if ( ! empty( $phrases ) ) {

        foreach ( $phrases as $time period ) {

      $archive_link = get_term_link( $term->slug, $attribute_name );

      $full_line="<a href="" . $archive_link . '">'. $term->identify . '</a>';

      array_push( $terms_array, $full_line );

        }

        echo $taxonomy->labels->identify . ': ' . implode( ', ' . $terms_array );

        }

     }

    }

}

WooCommerce hooks additionally provide you with a number of helpful filter functions to edit product data. As an example, you possibly can reorder product tabs with this snippet:

/**

 * Reorder product knowledge tabs

 */

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );

perform woo_reorder_tabs( $tabs ) {

$tabs['reviews']['priority'] = 5; // Opinions first

$tabs['description']['priority'] = 10; // Description second

$tabs['additional_information']['priority'] = 15; // Further info third

return $tabs;

}

Or, you can add a {custom} tab:

/**

 * Add a {custom} product knowledge tab

 */

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

perform woo_new_product_tab( $tabs ) {

// Provides the brand new tab

$tabs['test_tab'] = array(

'title' => __( 'New Product Tab', 'woocommerce' ),

'precedence' => 50,

'callback' => 'woo_new_product_tab_content'

);

return $tabs;

}

perform woo_new_product_tab_content() {

// The brand new tab content material

echo '<h2>New Product Tab</h2>';

echo '<p>This is your new product tab.</p>';

}

For extra info on utilizing these features, try this whole list of WooCommerce hooks.

A world web page template

While you’re working with PHP code for WooCommerce, another choice is to create a global custom product page template from scratch. Remember that this technique received’t work for block themes.

To start, you’ll want to call your new file template-custom-product.php and write a gap PHP remark on the high, stating the template’s identify:

<?php /* Template Identify: Instance Template */ ?>

On this state of affairs, you would possibly wish to exchange “Instance Template” with “World Customized Product Web page Template” or one thing related.

This template might be modeled after the default WooCommerce product web page. Then, you possibly can modify it as you want utilizing net hooks.

Enhance gross sales with a {custom} WooCommerce product web page

Customizing your WooCommerce product web page may also help you successfully showcase your choices. It additionally allows you to provide extra choices to clients and create a singular expertise that engages your viewers. As we have now seen, there are a number of methods to edit this web page.

When you’ve got a block theme, you should utilize the Website Editor to switch the looks of the worldwide template. So as to add extra performance, you possibly can set up WooCommerce extensions. For those who’re an skilled WordPress consumer, you might wish to use CSS or PHP, however this is usually a delicate course of.

Are you able to customise WooCommerce product pages to drive extra conversions? With WooCommerce extensions you possibly can add all the things from product bundles to flash sale options — all with out touching a line of code!