TemperStack
Find Tools
Intermediate8 min readUpdated Mar 18, 2026

How to customize product pages on WooCommerce

Quick Answer

Customize WooCommerce product pages through the WordPress Customizer, theme settings, or custom code modifications. You can modify layouts, add custom fields, change styling, and reorganize product information sections.

Prerequisites

  1. Active WooCommerce plugin on WordPress site
  2. Administrator access to WordPress dashboard
  3. Basic understanding of WordPress themes
  4. Knowledge of CSS for styling customizations
1

Access WordPress Customizer

Navigate to your WordPress dashboard and go to Appearance > Customize. Look for the WooCommerce section in the customizer menu. Click on Product Catalog to access basic product page settings including shop page display, product sorting, and catalog visibility options.
Tip
Make sure your WooCommerce plugin is active and up-to-date before accessing customization options.
2

Customize Product Image Settings

In the customizer, navigate to WooCommerce > Product Images. Here you can adjust:
  • Main image dimensions
  • Thumbnail dimensions
  • Gallery thumbnail columns
  • Image zoom functionality
  • Lightbox settings
Set your preferred dimensions and enable features like Enable image zoom and Enable lightbox for better user experience.
Tip
After changing image dimensions, regenerate thumbnails using a plugin like 'Regenerate Thumbnails' to apply changes to existing products.
3

Modify Product Page Layout

Go to WooCommerce > Single Product Page in the customizer. Configure the layout options:
  • Product gallery layout (vertical/horizontal thumbnails)
  • Product summary position
  • Related products display
  • Cross-sells positioning
Many themes also provide additional layout options under Theme Options > WooCommerce or similar sections.
Tip
Preview changes in real-time using the customizer's preview feature before publishing.
4

Add Custom Product Fields

Install a plugin like Advanced Custom Fields or use built-in custom fields. Navigate to Products > Add New or edit an existing product. Scroll down to the Custom Fields section or ACF field groups. Add fields such as:
  • Additional specifications
  • Care instructions
  • Custom descriptions
  • Extra images or videos
Use get_field('field_name') in your theme files to display these fields.
Tip
Create field groups in ACF and set location rules to 'Post Type is equal to Product' for automatic display.
5

Customize Product Information Tabs

Edit your theme's functions.php file or use a child theme. Add custom code to modify tabs:
add_filter('woocommerce_product_tabs', 'custom_product_tabs', 98);
function custom_product_tabs($tabs) {
    // Remove a tab
    unset($tabs['reviews']);
    
    // Add custom tab
    $tabs['custom_tab'] = array(
        'title' => 'Custom Info',
        'priority' => 50,
        'callback' => 'custom_tab_content'
    );
    return $tabs;
}
Tip
Always use a child theme when modifying theme files to prevent losing changes during theme updates.
6

Style Product Pages with CSS

Navigate to Appearance > Customize > Additional CSS or edit your theme's CSS file. Add custom styles for product elements:
.woocommerce div.product .product_title {
    font-size: 2.5em;
    color: #333;
}

.woocommerce div.product p.price {
    font-size: 1.8em;
    font-weight: bold;
    color: #e74c3c;
}
Target specific elements like product titles, prices, buttons, and gallery images.
Tip
Use browser developer tools to inspect elements and identify the correct CSS selectors for styling.
7

Configure Product Page Elements

Use action hooks to reposition or remove elements. Add to your functions.php file:
// Remove product meta
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);

// Move price position
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 25);
Common elements you can modify include breadcrumbs, product meta, related products, and add to cart buttons.
Tip
Reference WooCommerce's template hierarchy and hook documentation for a complete list of available actions and filters.

Troubleshooting

Changes not appearing on product pages
Clear any caching plugins and browser cache. Check if you're using a child theme and ensure custom code is in the correct functions.php file. Verify that WooCommerce templates aren't being overridden by your theme.
Custom CSS not applying to product elements
Use more specific CSS selectors or add !important to override theme styles. Check that custom CSS is being loaded after theme stylesheets. Use browser developer tools to inspect elements and verify correct class names.
Product images not displaying correctly after customization
Regenerate product image thumbnails using WooCommerce > Status > Tools > Regenerate shop thumbnails. Check image dimensions in WooCommerce > Settings > Products > Display and ensure they match your theme requirements.
Custom fields or tabs not showing on frontend
Verify that custom field display code is properly added to your theme template files. Check that ACF field groups have correct location rules set. Ensure callback functions for custom tabs are properly defined and accessible.

Related Guides

More WooCommerce Tutorials

How to install WooCommerce plugin

How to complete setup wizard

How to configure basic store settings

How to add simple products

Other Tool Tutorials

K

Kajabi Tutorials

S

Shopify Tutorials

T

Teachable Tutorials

Ready to get started with WooCommerce?

Put this tutorial into practice. Visit WooCommerce and follow the steps above.

Visit WooCommerce →