fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 14 MIN READ

Woo Custom Single Product

Customizing the WooCommerce Single Product Page

From the original Fervor library. Examples may use older package versions.

🎨 Tutorial: Customizing a WooCommerce Single Product Page with PHP 🚀

The Single Product Page in WooCommerce is the cornerstone of your store. Customizing it using PHP allows you to control its layout, add unique features, and align it with your store’s branding.

🔧 What You’ll Learn:

  1. How to locate and override the WooCommerce single product template.
  2. How to customize the product layout using hooks and template edits.
  3. Tips and examples for adding custom features.

Step 1: Locate the Default WooCommerce Single Product Template

WooCommerce templates are stored in the plugin directory. The main template for single product pages is:

/wp-content/plugins/woocommerce/templates/single-product.php

This file serves as a wrapper, pulling content from other templates like:

  • content-single-product.php: Defines the main product structure.
  • single-product/tabs/tabs.php: Manages product tabs.

Step 2: Copy the Template to Your Theme

To customize the single product page safely:

  1. Navigate to your theme directory:

    /wp-content/themes/your-theme/

  2. Create a woocommerce folder if it doesn’t already exist:

    /your-theme/woocommerce/

  3. Copy the single-product.php file into this folder:

    /your-theme/woocommerce/single-product.php

Now WooCommerce will use your custom single-product.php template.

Step 3: Customize the Single Product Template

Open your copied single-product.php in a code editor. Here’s what you can do:

1. Modify the Layout

The default single-product.php template uses the following structure:

<?php
defined( 'ABSPATH' ) || exit;

get_header( 'shop' ); ?>

<?php
/**
 * Hook: woocommerce_before_main_content.
 */
do_action( 'woocommerce_before_main_content' );
?>

<?php
while ( have_posts() ) :
    the_post();
    wc_get_template_part( 'content', 'single-product' );
endwhile; // End of the loop.
?>

<?php
/**
 * Hook: woocommerce_after_main_content.
 */
do_action( 'woocommerce_after_main_content' );
?>

<?php get_footer( 'shop' ); ?>

Example: Move the Product Tabs Above the Add-to-Cart Button

The product tabs are hooked using woocommerce_output_product_data_tabs. You can move them by removing the default hook and adding a new one.

Add this to your functions.php:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 25 );

2. Add Custom Content

You can use WooCommerce hooks to insert custom content.

Example: Add a Trust Badge Below the Add-to-Cart Button

In functions.php:

add_action( 'woocommerce_after_add_to_cart_button', 'add_trust_badge_below_cart_button' );
function add_trust_badge_below_cart_button() {
    echo '<div class="trust-badge" style="margin-top: 15px; text-align: center;">
        <img src="https://example.com/trust-badge.png" alt="Secure Checkout" style="max-width: 200px;" />
        <p style="font-size: 14px; color: gray;">100% Secure Payments</p>
    </div>';
}

3. Rearrange the Page Sections

WooCommerce uses the following hooks to build the single product page layout:

  • woocommerce_before_single_product_summary: Outputs the product image gallery.
  • woocommerce_single_product_summary: Outputs the title, price, and add-to-cart button.
  • woocommerce_after_single_product_summary: Outputs related products and upsells.

Example: Move Product Price Above the Title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 4 );

4. Add Custom Fields to the Product Page

Example: Add a Custom Field for Manufacturer Info

  1. Add the custom field to your product settings using Advanced Custom Fields (ACF) or WooCommerce’s custom fields.
  2. Display the field on the product page:
    add_action( 'woocommerce_single_product_summary', 'display_custom_manufacturer_info', 25 );
function display_custom_manufacturer_info() {
    global $product;
    $manufacturer = get_post_meta( $product->get_id(), 'manufacturer_info', true );
    if ( $manufacturer ) {
        echo '<p class="manufacturer-info">Manufacturer: ' . esc_html( $manufacturer ) . '</p>';
    }
}

5. Customize the Product Tabs

You can add or remove product tabs using the woocommerce_product_tabs filter.

Example: Add a New Tab for FAQs

add_filter( 'woocommerce_product_tabs', 'add_faq_tab' );
function add_faq_tab( $tabs ) {
    $tabs['faq_tab'] = array(
        'title'    => 'FAQs',
        'priority' => 50,
        'callback' => 'display_faq_tab_content'
    );
    return $tabs;
}

function display_faq_tab_content() {
    echo '<h2>Frequently Asked Questions</h2>';
    echo '<p>Here are answers to the most common questions about this product.</p>';
}

6. Add Social Share Buttons

Example: Add Social Media Buttons Below the Title

add_action( 'woocommerce_single_product_summary', 'add_social_share_buttons', 6 );
function add_social_share_buttons() {
    echo '<div class="social-share" style="margin-top: 10px;">
        <a href="https://facebook.com/sharer.php?u=' . get_permalink() . '" target="_blank">Share on Facebook</a> |
        <a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=Check%20this%20out!" target="_blank">Share on Twitter</a>
    </div>';
}

To control the number of related products or columns, use this snippet:

add_filter( 'woocommerce_output_related_products_args', 'custom_related_products_args' );
function custom_related_products_args( $args ) {
    $args['posts_per_page'] = 4; // Number of related products
    $args['columns']        = 4; // Number of columns
    return $args;
}

Step 4: Add Custom Styles

Use CSS to style your customizations. Add styles to your theme’s style.css or enqueue a custom stylesheet.

Example:

.manufacturer-info {
    font-size: 16px;
    color: #555;
    margin-top: 15px;
}
.trust-badge img {
    margin-top: 10px;
}

To enqueue a custom stylesheet:

add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );
function enqueue_custom_styles() {
    if ( is_product() ) {
        wp_enqueue_style( 'custom-product-styles', get_stylesheet_directory_uri() . '/product.css' );
    }
}

Step 5: Test Your Customizations

  1. Open a single product page and verify your changes.
  2. Test responsiveness on mobile devices.
  3. Debug any errors by enabling WordPress debug mode (WP_DEBUG).

🚀 Bonus Ideas for Single Product Customization

  1. Add Video to the Product Gallery: Embed a video alongside product images.
  2. Display Stock Levels Dynamically: Show a bar indicating remaining stock.
  3. Add Sticky Add-to-Cart Button: Keep the button visible as users scroll.
  4. Create a Custom Product Template for Specific Categories: Use conditional logic to apply different designs to categories.

🎉 Wrapping It Up

Customizing the WooCommerce single product page with PHP gives you unlimited possibilities to make it uniquely yours. Whether it’s adding custom fields, rearranging content, or styling the page, these steps will help you build a tailored experience. 🛍️✨

Bonus Single Product page codes and ideas

🎁 Bonus Code Snippets & Ideas for WooCommerce Single Product Pages 🚀

To make your Single Product Page stand out, here are bonus code snippets and creative ideas to enhance functionality, design, and user experience. These will help boost engagement, trust, and conversions on your WooCommerce store.

1. Add a Sticky Add-to-Cart Button

Keep the “Add to Cart” button visible as users scroll through the page.

Code Snippet:

add_action( 'wp_footer', 'add_sticky_add_to_cart_button' );
function add_sticky_add_to_cart_button() {
    if ( is_product() ) {
        echo '<div class="sticky-add-to-cart" style="position: fixed; bottom: 0; width: 100%; background: #0071a1; text-align: center; padding: 10px;">
            <a href="#add_to_cart" class="button" style="color: #fff; font-size: 18px;">Add to Cart</a>
        </div>';
    }
}

2. Add a Sale Countdown Timer

Create urgency by showing a countdown timer for products on sale.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_sale_countdown_timer', 15 );
function add_sale_countdown_timer() {
    global $product;
    if ( $product->is_on_sale() && $product->get_date_on_sale_to() ) {
        $sale_end = $product->get_date_on_sale_to()->getTimestamp();
        echo '<div id="sale-countdown" style="margin: 10px 0; color: red; font-weight: bold;"></div>';
        ?>
        <script>
            const saleEnd = <?php echo $sale_end * 1000; ?>;
            const countdown = document.getElementById('sale-countdown');
            const timer = setInterval(() => {
                const now = new Date().getTime();
                const distance = saleEnd - now;
                if (distance <= 0) {
                    clearInterval(timer);
                    countdown.innerHTML = 'Sale Ended!';
                } else {
                    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    countdown.innerHTML = `Hurry! Sale ends in ${days}d ${hours}h ${minutes}m ${seconds}s`;
                }
            }, 1000);
        </script>
        <?php
    }
}

3. Show a Stock Progress Bar

Visually indicate remaining stock to create urgency.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_stock_progress_bar', 15 );
function add_stock_progress_bar() {
    global $product;
    if ( $product->managing_stock() && $product->get_stock_quantity() ) {
        $stock = $product->get_stock_quantity();
        $threshold = 100; // Define a threshold for full progress.
        $percentage = ( $stock / $threshold ) * 100;
        echo '<div class="stock-progress-bar" style="margin: 15px 0;">
            <div style="background: #ccc; height: 20px; width: 100%; position: relative;">
                <div style="background: #28a745; width: ' . $percentage . '%; height: 20px;"></div>
            </div>
            <p style="margin-top: 5px;">Only ' . $stock . ' left in stock!</p>
        </div>';
    }
}

4. Add a Product Video

Embed a YouTube or Vimeo video below the product description.

Code Snippet:

add_action( 'woocommerce_after_single_product_summary', 'add_product_video', 15 );
function add_product_video() {
    echo '<div class="product-video" style="margin-top: 20px;">
        <h3>🎥 Watch Our Product in Action</h3>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/example" title="Product Video" frameborder="0" allowfullscreen></iframe>
    </div>';
}

5. Add a Guarantee Message

Display a custom message about your return policy or product guarantee.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_guarantee_message', 25 );
function add_guarantee_message() {
    echo '<div class="guarantee-message" style="margin-top: 15px; background: #f4f4f4; padding: 10px; text-align: center;">
        <p>✅ 30-Day Money-Back Guarantee. Shop with Confidence!</p>
    </div>';
}

Show related blog articles for a more engaging product page.

Code Snippet:

add_action( 'woocommerce_after_single_product_summary', 'add_related_blog_posts', 30 );
function add_related_blog_posts() {
    $related_posts = new WP_Query( array(
        'post_type'      => 'post',
        'posts_per_page' => 3,
        'orderby'        => 'rand',
        'category_name'  => 'product-tips', // Adjust this to match your category slug.
    ) );

    if ( $related_posts->have_posts() ) {
        echo '<div class="related-blog-posts" style="margin-top: 20px;">
            <h3>📖 Related Blog Posts</h3>';
        while ( $related_posts->have_posts() ) {
            $related_posts->the_post();
            echo '<p><a href="' . get_permalink() . '">' . get_the_title() . '</a></p>';
        }
        echo '</div>';
        wp_reset_postdata();
    }
}

7. Add Bulk Pricing Tables

Show bulk pricing to encourage larger purchases.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_bulk_pricing_table', 20 );
function add_bulk_pricing_table() {
    echo '<div class="bulk-pricing-table" style="margin: 20px 0;">
        <h3>Bulk Pricing</h3>
        <table style="width: 100%; border-collapse: collapse; text-align: left;">
            <tr>
                <th style="border: 1px solid #ddd; padding: 8px;">Quantity</th>
                <th style="border: 1px solid #ddd; padding: 8px;">Discount</th>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">5+</td>
                <td style="border: 1px solid #ddd; padding: 8px;">10% off</td>
            </tr>
            <tr>
                <td style="border: 1px solid #ddd; padding: 8px;">10+</td>
                <td style="border: 1px solid #ddd; padding: 8px;">20% off</td>
            </tr>
        </table>
    </div>';
}

8. Add Social Share Buttons

Allow customers to share products on social media.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_social_share_buttons', 6 );
function add_social_share_buttons() {
    echo '<div class="social-share" style="margin-top: 10px;">
        <a href="https://facebook.com/sharer.php?u=' . get_permalink() . '" target="_blank">Share on Facebook</a> |
        <a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=Check%20this%20out!" target="_blank">Share on Twitter</a>
    </div>';
}

9. Add Personalized Fields

Let customers add custom text for personalization (e.g., engraving).

Code Snippet:

add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_text_field' );
function add_custom_text_field() {
    echo '<div class="custom-field">
        <label for="custom_message">Add a Personal Message:</label>
        <input type="text" name="custom_message" id="custom_message" placeholder="Enter your text here" style="width: 100%; margin-top: 5px;" />
    </div>';
}

add_filter( 'woocommerce_add_cart_item_data', 'save_custom_text_field', 10, 2 );
function save_custom_text_field( $cart_item_data, $product_id ) {
    if ( ! empty( $_POST['custom_message'] ) ) {
        $cart_item_data['custom_message'] = sanitize_text_field( $_POST['custom_message'] );
    }
    return $cart_item_data;
}

add_filter( 'woocommerce_get_item_data', 'display_custom_text_in_cart', 10, 2 );
function display_custom_text_in_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['custom_message'] ) ) {
        $item_data[] = array(
            'name'  => 'Personal Message',
            'value' => $cart_item['custom_message'],
        );
    }
    return $item_data;
}

10. Add Product Badges (e.g., Best Seller)

Show custom badges like “Best Seller” or “Limited Edition” for specific products.

Code Snippet:

add_action( 'woocommerce_before_single_product_summary', 'add_custom_badge' );
function add_custom_badge() {
    global $product;
    if ( $product->get_total_sales() > 100 ) {
        echo '<div class="custom-badge" style="position: absolute; top: 10px; left: 10px; background: gold; color: black; padding: 5px;">
            Best Seller
        </div>';
    }
}

11. Display Frequently Bought Together Products

Suggest complementary products on the single product page.

Idea:

  • Use a plugin like Frequently Bought Together for WooCommerce.
  • Alternatively, use a shortcode:
echo do_shortcode('[products limit="3" columns="3" orderby="rand" ids="123,124,125"]');

12. Show Estimated Delivery Date

Provide an estimated delivery date based on shipping options.

Code Snippet:

add_action( 'woocommerce_single_product_summary', 'add_estimated_delivery_date', 25 );
function add_estimated_delivery_date() {
    $days_to_deliver = 5; // Estimated delivery time
    $delivery_date = date( 'F j, Y', strtotime( "+$days_to_deliver days" ) );
    echo '<p>📦 Estimated Delivery Date: <strong>' . $delivery_date . '</strong></p>';
}

13. Add a Floating Sidebar

Create a floating sidebar that displays product details as users scroll.

Idea:

  • Use CSS with position: sticky to keep details visible.
  • Include critical info like price, stock availability, and CTAs.

14. Include User-Generated Content

Let customers upload photos or reviews of the product in use.

Idea:

  • Use WooCommerce extensions like Photo Reviews.
  • Encourage UGC with a reward system (e.g., discounts for reviews).

15. A/B Test Different Layouts

  • Experiment with variations in layout, button placement, or CTAs.
  • Tools like Google Optimize or VWO can help you identify what works best.

🎉 Wrapping It Up

These bonus ideas and snippets give you endless opportunities to customize your WooCommerce single product page. From trust-building features like badges and guarantees to conversion-boosting features like stock bars and bulk pricing, the possibilities are limitless.🛍️✨

Fun stuff to try to make it look cool

🎨 Fun and Cool Ideas for WooCommerce Single Product Pages 🚀

Let’s make your single product page not just functional but also eye-catching and fun! Below are some creative and playful ideas to spice up your WooCommerce product pages, making them engaging, unique, and cool for your customers.

1. Animated Add-to-Cart Button

Make the “Add to Cart” button bounce, glow, or pulse when hovered over.

Code Snippet (CSS):

.add-to-cart-button {
    animation: pulse 2s infinite;
    background-color: #0071a1;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}

.add-to-cart-button:hover {
    animation: bounce 0.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

How to Use:

  • Add the class add-to-cart-button to your button.
  • Customers will be drawn to the button!

2. 360° Product Viewer

Let users spin the product image to view it from all angles.

Idea:

Use a plugin like WooCommerce 360 Image or embed a 360° viewer using a library like Three.js.

Example:

<div class="product-360-view">
    <iframe src="https://example.com/360-view.html" width="600" height="400" frameborder="0"></iframe>
</div>

3. Confetti Explosion on Add-to-Cart

Celebrate when a customer adds a product to their cart with a fun confetti animation.

Code Snippet (JS with Canvas-Confetti):

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script>
    document.querySelector('.single_add_to_cart_button').addEventListener('click', function() {
        confetti({
            particleCount: 100,
            spread: 70,
            origin: { y: 0.6 }
        });
    });
</script>

4. Glow Around Product Images

Make product images glow or shimmer.

Code Snippet (CSS):

.product-image img {
    border: 5px solid transparent;
    box-shadow: 0 0 20px #0071a1;
    transition: box-shadow 0.3s ease-in-out;
}

.product-image img:hover {
    box-shadow: 0 0 40px #00c3ff;
}

5. Interactive Size Selector

Create a fun, clickable size selector with visual feedback.

Code Snippet (HTML + CSS):

<div class="size-selector">
    <button class="size-button" data-size="S">S</button>
    <button class="size-button" data-size="M">M</button>
    <button class="size-button" data-size="L">L</button>
</div>

.size-button {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-right: 5px;
    transition: all 0.3s ease-in-out;
}

.size-button:hover {
    background-color: #0071a1;
    color: white;
    transform: scale(1.1);
}

6. Floating Product Highlights

Add floating highlights or stickers like “Best Seller” or “Hot Item” over your product image.

Code Snippet (CSS):

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    animation: float 2s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

How to Use:

Add the class product-badge to your badge element, e.g.:

<div class="product-badge">🔥 Hot Item</div>

7. Hover Zoom Effect on Product Images

Let customers hover over images to see a zoomed-in view.

Code Snippet (CSS):

.product-image {
    overflow: hidden;
    position: relative;
}

.product-image img {
    transition: transform 0.3s ease-in-out;
}

.product-image:hover img {
    transform: scale(1.2);
}

8. Background Gradient Animation

Create an animated gradient background for your product page.

Code Snippet (CSS):

body.single-product {
    background: linear-gradient(-45deg, #ff9a9e, #fad0c4, #fbc2eb, #a18cd1);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

9. Add Emoji Ratings for Reviews

Replace boring star ratings with emojis for a fun twist.

Code Snippet (CSS):

.comment-form-rating .stars a:before {
    content: "⭐"; /* Change to any emoji, e.g., "🔥" */
    font-size: 20px;
    color: orange;
}

10. Interactive FAQ Section

Make your FAQ section collapsible and interactive.

Code Snippet (HTML + CSS + JS):

<div class="faq-section">
    <button class="faq-toggle">What is the return policy?</button>
    <div class="faq-content">You can return your product within 30 days, no questions asked!</div>
</div>

.faq-content {
    display: none;
    padding: 10px;
    background-color: #f9f9f9;
    margin-top: 5px;
}
.faq-toggle {
    background-color: #0071a1;
    color: white;
    padding: 10px;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

document.querySelectorAll('.faq-toggle').forEach(button => {
    button.addEventListener('click', () => {
        const faqContent = button.nextElementSibling;
        faqContent.style.display = faqContent.style.display === 'block' ? 'none' : 'block';
    });
});

11. Add Floating Particles Background

Make your product page feel dynamic with floating particles.

Idea:

Use libraries like Particles.js to add cool, floating effects to the background.

12. Create Customizable Themes

Let users switch between light and dark modes for a personalized experience.

Idea:

  • Add a toggle switch using JavaScript.
  • Use CSS variables for colors, and dynamically change them on toggle.

13. Introduce Fun Hover Effects

Add quirky hover effects to buttons, images, or links (e.g., rotating, scaling, or color-changing).

Example:

button:hover {
    transform: rotate(5deg) scale(1.1);
    background-color: #ff4081;
    color: white;
}

🎉 Wrapping It Up

These ideas are guaranteed to make your WooCommerce single product page more interactive, fun, and engaging. Whether it’s subtle animations or bold design changes, these tweaks will create a memorable experience for your shoppers.🎨✨

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY