Konfigurator 3D WordPress i WooCommerce - jak zbudować dedykowany bez płatnej wtyczki (koszty + kod)

Konfigurator 3D na WordPress - nie płacić 200 zł/mies. za wtyczkę która wygląda jak każda inna

WordPress obsługuje 43% wszystkich stron w internecie. WooCommerce trzyma 30% globalnego rynku sklepów. Jeśli masz WordPress i chcesz konfigurator 3D produktu, prawdopodobnie już widziałeś oferty typu Yith Advanced Product Options (79$/rok), Product Configurator by Uni (149$/rok) albo WooCommerce Product Add-Ons Ultimate (49$/rok). Wszystkie mają jedną wspólną cechę: wyglądają jak każdy inny sklep który używa tych samych wtyczek.

Dla sklepu z bluzkami po 79 zł to nie problem. Dla producenta okien dachowych po 4000 zł/szt., producenta mebli po 12 000 zł/kompletu, producenta bram po 8000 zł/szt. - konfigurator wygląda jak template z wtyczki jest bezpośrednią stratą wiarygodności marki premium.

Ten tekst wyjaśnia jak zbudować dedykowany konfigurator 3D na WordPress + WooCommerce, który wygląda 100% Twój, integruje się natywnie z koszykiem, i kosztuje jednorazowo (nie 200 zł/mies. w nieskończoność). Cztery podejścia techniczne - od najprostszego do headless - realne koszty, i konkretne wzorce z ośmiu konfiguratorów, które zbudowałem.

Cztery podejścia - od najszybszego do najczystszego

Podejście 1: Płatna wtyczka z Envato / WooCommerce Marketplace

Kiedy ma sens: mały katalog (do 20 wariantów per produkt), akceptujesz template UI, chcesz startować w 2 tygodnie.

Koszt: 49-500$/rok + setup + custom dev płatny dodatkowo.

Popularne opcje: Yith Advanced Product Options, WOOF Product Filter, Product Configurator by Uni, Ultimate Product Options.

Ograniczenia:

• Wygląd jednolity - Twój sklep wygląda jak 5000 innych sklepów używających tej samej wtyczki
• Kod zamknięty - jak potrzebujesz custom logikę pricingu, płacisz twórcy wtyczki za extension
• Uzależnienie od twórcy - jak przestaje aktualizować wtyczkę, migracja jest bolesna
• Wydajność - większość wtyczek dodaje 30-50 requestów AJAX na stronie produktu, TTFB idzie w górę
• Brak prawdziwego 3D - większość „konfiguratorów" z Marketplace pokazuje zestaw statycznych PNG-ów, nie realny WebGL model

Real 3D w płatnych wtyczkach jest rzadkością. Jeśli chcesz obrotowego modelu z materiałami które zmieniają się w czasie rzeczywistym - musisz szukać dużo dalej albo zbudować własne.

Podejście 2: Custom Three.js + WordPress shortcode (rekomendowane dla większości)

Osobiście robię tak dla 80% klientów którzy przychodzą ze stroną na WordPress i chcą konfigurator.

Jak to działa:

1. Piszesz plugin (albo dodajesz do child theme) który rejestruje shortcode [configurator product_id="123"]
2. Shortcode renderuje <div id="configurator-root"> + <canvas>
3. Enqueue Three.js + Twojego skryptu konfiguratora
4. Skrypt czyta metadane produktu WooCommerce (przez REST API /wp-json/wc/v3/products/123)
5. Renderuje 3D, obsługuje interakcje, komunikuje się z WooCommerce Cart przez AJAX endpoint /?wc-ajax=add_to_cart

Zalety:

• Wygląd 100% Twój - theme, kolory, typografia
• Kod należy do Ciebie, jeden plik .php w plugins + jeden .js
• Integracja z WooCommerce natywna - konfigurator dodaje wariant + variation_data do koszyka jak każdy inny produkt
• Zero miesięcznej opłaty
• Wydajność - konfigurator ładowany TYLKO na stronach produktów z shortcodem, nie na całej witrynie

Wymaga: developer znający WordPress + WooCommerce + Three.js. Więc raczej agencja specjalizująca się w konfiguratorach, nie „standardowy" WP developer.

Podejście 3: WooCommerce Product Add-Ons + custom JavaScript

Kiedy ma sens: mały katalog gdzie 3D nie jest krytyczne, ale chcesz podstawowe „wybór wariantów" bez płatnej wtyczki.

WooCommerce ma natywne warianty (Variable Product). Dodajesz do child theme własny JS który zamiast standardowego selecta pokazuje wizualnie kolory/materiały (kliknięcie na próbkę). Dodaje customowe pole properties do koszyka.

Koszt: 3-8 tys. zł. Nie ma prawdziwego 3D, ale wystarczy dla produktów gdzie wariant to głównie kolor.

Podejście 4: Headless WordPress + własny frontend (React/Next.js)

Kiedy ma sens: duży katalog (500+ produktów), planujesz PWA/mobilne app, chcesz absolutnej kontroli nad UX.

WordPress zostaje jako backend + WooCommerce jako źródło produktów i zamówień, ale frontend piszesz w Next.js/Nuxt. WooCommerce REST API + Store API dostarcza produkty, warianty, koszyk, checkout.

Koszt: 30-80 tys. zł. Dłuższy time-to-market (3-5 mies), ale najczystsza architektura dla dużych sklepów.

Dla większości klientów jest to overkill - podejście #2 daje 90% korzyści za 30% ceny.

Custom Three.js w WordPress - jak wygląda kod

Struktura pluginu (uproszczona):

wp-content/plugins/product-configurator/
├── product-configurator.php    # główny plugin, rejestruje shortcode
├── assets/
│   ├── configurator.js         # logika Three.js
│   ├── configurator.css        # style
│   └── models/                 # modele glTF (skompresowane Draco)
└── includes/
    ├── ajax-handlers.php       # endpoints AJAX (wycena, dodaj do koszyka)
    └── product-meta.php        # metadane WooCommerce dla konfiguratora

Rejestracja shortcode w PHP:

add_shortcode('configurator', function($atts) {
    $atts = shortcode_atts(['product_id' => 0], $atts);
    $product = wc_get_product($atts['product_id']);
    if (!$product) return '';
    
    wp_enqueue_script('threejs', 'https://unpkg.com/three@0.170/build/three.min.js');
    wp_enqueue_script('configurator', plugin_dir_url(__FILE__) . 'assets/configurator.js', ['threejs'], '1.0');
    
    wp_localize_script('configurator', 'ConfigData', [
        'productId'  => $atts['product_id'],
        'modelUrl'   => get_post_meta($atts['product_id'], '_configurator_model', true),
        'variants'   => get_post_meta($atts['product_id'], '_configurator_variants', true),
        'ajaxUrl'    => admin_url('admin-ajax.php'),
        'nonce'      => wp_create_nonce('configurator_nonce')
    ]);
    
    return '<div id="configurator-root"><canvas id="configurator-canvas"></canvas></div>';
});

Integracja z koszykiem WooCommerce (AJAX handler):

add_action('wp_ajax_add_config_to_cart', 'ajax_add_config_to_cart');
add_action('wp_ajax_nopriv_add_config_to_cart', 'ajax_add_config_to_cart');

function ajax_add_config_to_cart() {
    check_ajax_referer('configurator_nonce', 'nonce');
    
    $product_id = intval($_POST['product_id']);
    $config = $_POST['config']; // array wybranej konfiguracji
    
    $cart_item_data = ['configurator_data' => $config];
    WC()->cart->add_to_cart($product_id, 1, 0, [], $cart_item_data);
    
    wp_send_json_success(['cart_url' => wc_get_cart_url()]);
}

// Wyświetlanie konfiguracji w koszyku
add_filter('woocommerce_get_item_data', function($item_data, $cart_item) {
    if (isset($cart_item['configurator_data'])) {
        foreach ($cart_item['configurator_data'] as $key => $value) {
            $item_data[] = ['name' => ucfirst($key), 'value' => $value];
        }
    }
    return $item_data;
}, 10, 2);

Wynik: konfigurator pełni funkcję strony produktu. Klient konfiguruje, klika „Dodaj do koszyka", widzi w koszyku pozycję z pełną konfiguracją (materiał, wymiar, kolor, itp.), przechodzi do standardowego checkoutu WooCommerce.

Ile kosztuje custom konfigurator 3D na WordPress

Widełki zależą od trzech rzeczy: skomplikowania konfiguracji (5 wariantów vs. 100), jakości modeli 3D (masz CAD czy trzeba modelować), integracji dodatkowych (CRM, ERP, generacja PDF oferty).

Zakres	Cena	Czas
MVP - prosty konfigurator 1 produkt, kilka wariantów	15-20 tys. zł	4-6 tyg
Standard - pełen katalog, wycena live, PDF	25-40 tys. zł	6-10 tyg
Pro - AR, kalkulator dostawy, wielojęzyczność	40-55 tys. zł	10-14 tyg
Enterprise - headless + integracja ERP + panel dilerów	55-80 tys. zł	3-4 mies

Do tego doliczyć:

• Modele 3D (jeśli producent nie ma CAD): 800-3000 zł za typ
• Integracja z CRM/ERP: +5-15 tys. zł
• Wielojęzyczność (EN/DE): +3-8 tys. zł

Pełny cennik: grodev.pl/konfigurator-produktowy-3d.

Portfolio - 8 wdrożonych konfiguratorów 3D

Wszystkie zbudowane na własnym stack (Laravel/PHP + Three.js), ale identyczna logika przenosi się 1:1 do WordPress/WooCommerce - zamiana POST /api/quote na WordPress AJAX handler + REST API WooCommerce zamiast custom bazy produktów.

• basen3d.grodev.pl - konfigurator basenów ogrodowych
• brama3d.grodev.pl - bramy segmentowe i ogrodzenia
• lampy3d.grodev.pl - lampy dekoracyjne (white-label)
• opakowania3d.grodev.pl - opakowania kartonowe
• oranzeria3d.grodev.pl - oranżerie ogrodowe
• pergola3d.grodev.pl - pergole bioklimatyczne
• sauna3d.grodev.pl - sauny ogrodowe

FAQ

Czy custom konfigurator na WordPress spowolni moją stronę? Nie, jeśli jest napisany dobrze. Skrypty konfiguratora ładują się TYLKO na stronach produktów z shortcodem [configurator]. Nie ładują się na stronie głównej, blogu, ani stronach kategorii. TTFB dla stron bez konfiguratora pozostaje identyczne. Sam konfigurator ładuje się progresywnie - model 3D jest lazy-loaded po pierwszym paint.

Czy działa z każdym motywem WordPress? Tak, jeśli motyw prawidłowo obsługuje shortcode i enqueue_scripts (99% motywów tak). Konfigurator wchodzi jako komponent w treść posta/strony produktu - nie ingeruje w templates motywu.

Czy działa z Elementor / WPBakery / innym page builderem? Tak. Każdy popularny builder obsługuje custom shortcode. W Elementor dodajesz widget „Shortcode" i wklejasz [configurator product_id="123"].

Co jeśli aktualizacja WordPressa / WooCommerce coś zepsuje? Dedykowany konfigurator używa stabilnych, publicznych API WordPressa/WooCommerce (shortcode API, wp_enqueue_scripts, REST API v3, cart API). Te API są bardzo stabilne między wersjami - nie znam przypadku żeby update WP/WC złamał konfigurator zbudowany na dobrych wzorcach.

Czy dostanę kod źródłowy? Zawsze. Plugin zostaje w Twoim repo (najczęściej GitHub Private), dostęp masz Ty. Każdy developer PHP+JS może w przyszłości rozbudować konfigurator - nie ma vendor lock-in.

Ile kosztuje utrzymanie po wdrożeniu? Konfigurator jak każdy inny kod - jak WordPress/WooCommerce się nie zmieniają (dużych breaking changes), utrzymanie ~0. Realny hosting-related maintenance: 200-500 zł/mies za monitoring, kopie zapasowe, SSL. Nie ma miesięcznej opłaty za samą wtyczkę.

Jak długo trwa wdrożenie? MVP (1 produkt, 5 wariantów, wycena live) - 4-6 tygodni. Standard katalog (pełna kategoria produktów, wycena + PDF + integracja z e-mailem) - 6-10 tygodni. Pro (AR, wielojęzyczność, headless) - 10-14 tygodni.

Podsumowanie

Konfigurator 3D na WordPress to nie miejsce na płatną wtyczkę z Marketplace za 200 zł/mies., jeśli sprzedajesz produkt premium (meble, okna, bramy, sauny - wszystko powyżej 3000 zł/szt.). Dedykowany konfigurator kosztuje 15-55 tys. zł jednorazowo, wygląda 100% Twój, integruje się natywnie z WooCommerce Cart i Checkout, i skaluje bez zmiany planu Enterprise.

Podejście #2 (custom Three.js + WordPress shortcode) daje 90% korzyści z 30% budżetu headless. Rekomenduję to dla praktycznie wszystkich klientów sprzedających na WordPressie.

Jeśli rozważasz konfigurator 3D dla swojego sklepu WooCommerce - napisz do mnie, zrobię wycenę dla Twojego konkretnego katalogu i integracji z Twoim procesem sprzedaży. Pierwsza rozmowa zawsze bez opłaty.

Powiązane teksty:

• Konfigurator produktów 3D dla Shopify - dla producentów sprzedających na Shopify
• Konfigurator 3D - WooCommerce, Shopify czy custom? - porównanie ekosystemów
• Ile kosztuje konfigurator produktowy 3D - pełny cennik
• Jak działa konfigurator produktu 3D - techniczne podstawy

Często zadawane pytania

Czy konfigurator 3D działa na WordPress / WooCommerce?

Tak. Konfigurator instaluje się jako JavaScript embed (iframe albo shortcode) na dowolnej stronie WordPress. WooCommerce integracja - zamówienie z konfiguratora ląduje jako Product w WooCommerce z custom fields (opcje, cena obliczona, warianty). Full integration z checkoutem.

Ile kosztuje konfigurator 3D dla sklepu WordPress?

MVP z 3-4 produktami i podstawowymi opcjami: 8-15 tys zł. Standard z 6-8 produktami, mobile responsive, panelem admin: 18-35 tys zł. Enterprise z integracją WooCommerce checkout, custom shaderami, wielojęzycznością: 45-90 tys zł.

Czy potrzebuję drogiego hostingu żeby konfigurator działał na WordPress?

Nie, standard shared hosting wystarczy dla frontendu WordPress. Konfigurator serwuje modele 3D z CDN (Cloudflare darmowy plan) - nie obciąża Twojego hostingu. Backend konfiguratora (panel admin, cennik) na osobnym VPS 20-50 zł/mies.

Czy konfigurator spowolni moją stronę WordPress?

Nie, jeśli poprawnie zaimplementowany. Konfigurator ładuje się TYLKO na stronie produktu (lazy loading), nie na całej stronie. Modele 3D 3-8 MB per produkt, ładowanie 1-3s na 4G. PageSpeed WordPress zostaje bez zmian dla stron bez konfiguratora.

Czy mogę używać istniejących modeli 3D z Solidworks/CAD?

Tak. Konwersja z Solidworks, AutoCAD, Fusion 360, Inventor do glTF/GLB dla przeglądarki: 200-500 zł per model. Modele produkcyjne 500k polygonów redukujemy do 30-80k bez zauważalnej różnicy wizualnej. Klient dostarcza pliki CAD, dostarczamy glTF gotowy do konfiguratora.