WooCommerce Product Page Optimisation - Convert More Visitors

The average WooCommerce product page converts at 2-4%. Moving that to 5-7% doubles revenue without any additional traffic. Product page optimisation is one of the highest-ROI activities in e-commerce.

This guide covers the technical and UX changes that reliably improve conversion on WooCommerce product pages.

Product images

Use multiple, high-quality images

The number one buying decision factor for online products is images. Show the product from multiple angles, in use, and at different scales. For clothing: on a model, laid flat, and a close-up of the material. For software: screenshots of the actual interface.

Minimum: 4-6 images per product.

WooCommerce's default gallery supports multiple images and zoom. Ensure the gallery is enabled:

In WooCommerce > Settings > Products > Display, enable "Lightbox" and "Product image zoom".

Image quality and size

Product images should be high resolution (at least 800x800px) but properly compressed. A customer zooming in on a blurry 400px image will not buy.

Compress and convert to WebP using Imagify or ShortPixel (see the image optimisation guide). Large product photos (1-2MB uncompressed) can be reduced to 100-200KB in WebP without visible quality loss.

Set explicit image dimensions in product templates

If you use a custom product template, ensure all product images have explicit width and height attributes:

echo wp_get_attachment_image(
    $attachment_id,
    'woocommerce_single',
    false,
    [
        'width'  => 800,
        'height' => 800,
        'alt'    => esc_attr( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ),
    ]
);

This prevents Cumulative Layout Shift (CLS) when images load.

Product descriptions

Short description (the hook)

The WooCommerce "short description" appears next to the price and Add to Cart button. It is the first text most buyers read. Use it to:

State the primary benefit (not feature) in one sentence
Address the main buying concern
Include size/compatibility information if relevant

Keep it under 3 sentences. This is not the place for a full product description.

Long description (the details)

The main product description appears below the fold. Use it for:

Full specifications and dimensions
Compatibility information
Use cases and applications
Frequently asked questions embedded in the text

Structure with H2/H3 headings so buyers can scan for the information they need.

Pricing and urgency

Display price clearly

The price should be prominent and immediately visible without scrolling. If you offer a sale price, show the original price crossed out:

// WooCommerce shows this automatically when a sale price is set
// Ensure your theme's product template includes:
echo $product->get_price_html();

Stock status

Displaying stock count creates urgency without being manipulative (if it is accurate):

// In single product template
$stock = $product->get_stock_quantity();
if ( $stock && $stock <= 10 ) {
    echo '<p class="low-stock">Only ' . $stock . ' left in stock</p>';
}

Delivery information

Show estimated delivery dates. "Order before 2pm for next-day delivery" is a powerful conversion driver. Many buyers are making a time-sensitive purchase.

Add this below the Add to Cart button:

add_action( 'woocommerce_after_add_to_cart_button', function() {
    echo '<p class="delivery-info">Order before 2pm for next-day delivery</p>';
});

Add to Cart button

Make it obvious

The Add to Cart button should be:

Above the fold on desktop (without scrolling)
High contrast against the page background
Clearly labelled (not just an icon)

Test the button colour against your site's background in a contrast checker. A green button on a white page converts better than a grey button on a grey page.

Sticky Add to Cart on mobile

On mobile, as users scroll down reading product details, the Add to Cart button disappears above. A sticky bar that follows the user converts significantly better:

add_action( 'woocommerce_after_single_product_summary', function() {
    global $product;
    ?>
    <div class="sticky-cart-bar" id="sticky-cart-bar">
        <span class="sticky-product-name"><?php echo esc_html( $product->get_name() ); ?></span>
        <span class="sticky-price"><?php echo $product->get_price_html(); ?></span>
        <button class="button add_to_cart_button" data-product_id="<?php echo $product->get_id(); ?>">
            Add to Cart
        </button>
    </div>
    <?php
}, 15);

Several plugins handle sticky add-to-cart without custom code: Merchant (by Axeptio), WooCommerce Sticky Add to Cart.

Trust signals

Reviews

Product reviews are the most powerful trust signal. Enable and actively encourage reviews:

In WooCommerce > Settings > Products > Reviews: enable "Enable product reviews" and "Show 'verified owner' label on customer reviews".

After purchase emails are the best way to collect reviews. Use AutomateWoo or a post-purchase email sequence to request reviews 7-14 days after delivery.

Display the aggregate rating prominently near the price. WooCommerce shows this by default when reviews exist.

Trust badges

Near the Add to Cart button or below it, add visual trust signals:

Payment method icons (Visa, Mastercard, PayPal)
Security badges (SSL, Stripe powered)
Return policy summary ("Free returns within 30 days")
Satisfaction guarantee

add_action( 'woocommerce_after_add_to_cart_button', function() {
    echo '<div class="trust-badges">';
    echo '<span>Secure checkout</span>';
    echo '<span>Free returns 30 days</span>';
    echo '<span>UK stock</span>';
    echo '</div>';
});

Upsells appear on the single product page below the main product. Set them per-product in the Product Data > Linked Products tab. Show higher-tier versions of the same product.

Related products are automatically generated by WooCommerce based on shared categories and tags. They appear on the single product page and add a database query per page load.

If related products are not driving measurable revenue (check in analytics), disable them to improve page load time:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Replace with manually curated upsells on your high-revenue products.

Cross-sells on the cart page

WooCommerce cross-sells appear on the cart page. These are "goes well with" products. Set them in Product Data > Linked Products > Cross-sells. This is the highest-converting product recommendation placement because the user has already decided to buy.

Page speed for product pages

Product pages are often the slowest pages on WooCommerce stores because they load:

Multiple product images
Product schema (potentially large)
Review scripts
Gallery scripts
Upsell and related product queries

Specific optimisations:

Use fetchpriority="high" on the main product image (the LCP element)
Lazy load secondary gallery images
Defer review scripts until after the page is interactive
Test product page speed separately from the homepage in PageSpeed Insights - they often have different bottlenecks

A/B testing product pages

The changes in this guide are evidence-based, but every store and audience is different. Set up A/B tests for the highest-traffic product pages to measure actual conversion lift:

Tools: Nelio A/B Testing, Google Optimize (discontinued, use VWO or Optimizely), or WooCommerce's own analytics with before/after measurement.

What to test first: Add to Cart button colour and text, short description copy, primary image selection, price presentation (£49.99 vs £50 vs £49).

Measure for statistical significance before drawing conclusions - for most stores, this means at least 200-300 add-to-cart events per variant.