Add Custom Background to WooCommerce Product Pages Easily

Code

<?php
// Hook into 'wp_enqueue_scripts' to add custom styles for WooCommerce product pages
add_action('wp_enqueue_scripts', 'wp_dudecom_add_custom_background_to_product_page');

function wp_dudecom_add_custom_background_to_product_page() {
    // Check if WooCommerce is active
    if (class_exists('WooCommerce')) {
        // Check if we are on a single product page
        if (is_product()) {
            // Enqueue custom CSS
            wp_enqueue_style('wp-dudecom-custom-product-background', get_stylesheet_directory_uri() . '/custom-product-background.css');
        }
    }
}

// Hook into 'wp_head' to add inline styles for WooCommerce product pages
add_action('wp_head', 'wp_dudecom_add_inline_background_style');

function wp_dudecom_add_inline_background_style() {
    // Check if WooCommerce is active
    if (class_exists('WooCommerce')) {
        // Check if we are on a single product page
        if (is_product()) {
            // Define the custom background image URL
            $background_image_url = get_stylesheet_directory_uri() . '/images/custom-background.jpg';
            
            // Output the inline CSS
            echo '<style>
                .single-product .site-main {
                    background-image: url("' . esc_url($background_image_url) . '");
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            </style>';
        }
    }
}
?>