Prispôsobte si stránku produktu WooCommerce bez pluginu

by | WordPress

Ak ste už na stránku produktu WooCommerce pridali „malý úryvok“ a zrazu cena zmizne alebo sa tlačidlo „Pridať do košíka“ ocitne na nesprávnom mieste, narazili ste na skutočný problém: prispôsobiť bez zapojiť neznamená drotárčenie bez metódy.

Čo dosiahneme

Prispôsobíte si produktovú stránku (produktový list) WooCommerce bez inštalácie pluginu pre úryvky kódu a bez toho, aby sa dotkol srdca WordPress/WooCommerce, na webovej stránke WordPress 6.9.4 (apríl 2026) s PHP 8.1+.

Konkrétny výsledok pre obchod:

  • Kľúčové prvky (cena, hodnotenie, úryvok, tlačidlo košíka, meta) sú preusporiadané lepšie konvertovať.
  • Un upokojujúci banner sa zobrazuje na správnom mieste (napr. „Vrátenie tovaru do 30 dní / Dodanie do 24 hodín“).
  • Správa podmienený (napr. doprava zdarma od 60 €) sa zobrazuje podľa ceny produktu.
  • Les záložky (popis, ďalšie informácie, recenzie) sú premenované, ich poradie je zmenené a môžete ich odstrániť/pridať.
  • Un CTA (odkaz na tabuľku veľkostí, kontakt, WhatsApp…) sa zobrazí hneď za „Pridať do košíka“.
  • Načíta sa minimálny CSS kód iba na stránkach produktov.

Nakoniec budete vedieť:

  • kam správne vložiť kód (mu-plugin alebo vlastný plugin a kedy použiť podradenú tému),
  • ktoré hooky WooCommerce použiť,
  • Ako sa vyhnúť konfliktom s Divi 5, Elementor a Avada.

Rýchle zhrnutie

  • Ak je to možné, vyhýbame sa súboru functions.php: vytvárame mu-plugin (načíta sa automaticky).
  • Produktový list prispôsobujeme prostredníctvom Háčiky WooCommerce (akcie/filtre) namiesto prepísaní šablón.
  • Zmeníme poradie blokov pomocou remove_action() / add_action() a les priority.
  • Karty upravujeme pomocou filtra woocommerce_product_tabs.
  • CSS pridávame cez wp_enqueue_scripts a obmedzujeme to na is_product().
  • Testujeme pomocou kontrolného zoznamu + očakávame konflikty medzipamäte a stavitelia.

Kedy použiť toto riešenie

Tento prístup je ideálny, ak:

  • Chcete efektívnejšiu stránku produktu (konverziu) bez inštalácie 3 rozšírení,
  • Musíte udržiavať stabilnú webovú stránku (menej pluginov = menej potenciálu pre chyby).
  • Máte k dispozícii cielené úpravy (poradie blokov, texty, karty, mikrovýzvy na akciu),
  • Používate tému kompatibilnú s WooCommerce (väčšina) a súhlasíte s testovaním v testovacom prostredí.

Podľa mojich skúseností je to najlepší spôsob pre 80 % „klasických“ obchodov: oblečenie, doplnky, digitálne produkty, remeselné výrobky, malé značky.

Kedy toto riešenie NEPOUŽÍVAŤ

Vyhnite sa tomuto návodu ako primárnemu riešeniu, ak:

  • Ak chcete prerobiť celé rozloženie so zložitými sekciami (mriežky, stĺpce, podmienené bloky s variáciami): vhodnejší bude nástroj na tvorbu WooCommerce alebo špecializované šablóny.
  • Potrebujete konfigurátor produktov, rozšírené možnosti (doplnky) alebo komplexnú obchodnú logiku (B2B, ceny založené na rolách, komplexné balíčky),
  • Nemáte prístup k súborom (uzamknutý hosting): v tomto prípade niekedy zostáva jedinou možnosťou plugin.

Ďalší bežný problém: ak vaša téma úplne nahradí stránku produktu WooCommerce (niektoré témy „shopu“ to robia), štandardné hooky môžu byť čiastočne ignorované. V takom prípade je potrebné problém vopred diagnostikovať.

Predtým, ako začnete (predpoklady)

Verzie a prostredie

  • WordPress: 6.9.4 (alebo novšie)
  • PHP: 8.1+ (odporúča sa 8.2/8.3, ak to váš poskytovateľ hostingu umožňuje)
  • WooCommerce: najnovšia verzia (skontrolovať) Rozšírenia> Nainštalované rozšírenia)
  • Un dieťa téma Ak plánujete prepísať šablóny (v tomto návode voliteľné, ale vo všeobecnosti užitočné)

Zálohovanie a testovanie

Vytvorte zálohu (súbory + databáza) a ak je to možné, otestujte ju v testovacom prostredí. Mnoho chýb pramení z chýbajúcej bodkočiarky... a v živom obchode to môže viesť k prázdnej stránke.

Kam vložiť kód (odporúčaná možnosť)

Máte tri možné lokality. Tu je poradie preferencií:

  • MU-plugin (odporúčané): súbor PHP v /wp-content/mu-plugins/Načíta sa automaticky, aj keď zmeníte témy.
  • vlastný doplnok malý domáci plugin v /wp-content/plugins/Povoliť/zakázať.
  • functions.php podradenej témy To je prijateľné, ale ak zmeníte témy, stratíte možnosť prispôsobenia. A často som videl, ako stránky zlyhali, pretože rodičovská téma bola aktualizovaná a podradená téma obsahovala neotestovaný kód.

Prístup k užitočným nastaveniam WooCommerce

  • Všeobecné nastavenia: WooCommerce> Nastavenia
  • Dane/doprava: WooCommerce > Nastavenia > Doprava
  • Stav systému (diagnostika): WooCommerce > Stav

Pojmy: háčik, akcia, filter (v jednoduchej angličtine)

Un háčik je „háčik“ v kóde. WooCommerce ich mnohé zobrazuje na stránke produktu.

  • Une akčná vykoná kód na konkrétnom mieste (napr. zobrazí blok). V PHP: add_action().
  • Un filtre upravuje hodnotu (napr. úprava tabuľky kariet). V PHP: add_filter().

WordPress má svoje hooky, WooCommerce pridáva svoje vlastné. Praktický rozdiel: hooky WooCommerce sú umiestnené podľa štruktúry šablón WooCommerce (napr. „pred súhrnom produktu“).

Použité hooky WooCommerce

Tu sú tie, ktoré budeme používať, spolu s ich úlohami:

  • woocommerce_single_product_summary (Akcia): Centrálna oblasť stránky produktu (názov, cena, hodnotenie, úryvok, tlačidlo košíka atď.). Toto je najziskovejší háčik na opätovné objednanie.
  • woocommerce_before_single_product_summary (akcia): pred zhrnutím (často galériou obrázkov).
  • woocommerce_after_single_product_summary (akcia): po súhrne (karty, doplnkové ponuky, súvisiace produkty).
  • woocommerce_product_tabs (filter): umožňuje upraviť karty (názov, poradie, odstránenie, pridanie).
  • wp_enqueue_scripts (Akcia WordPressu): načítať CSS/JS na front-end.

Užitočná referencia: Zoznam hookov WooCommerce sa líši v závislosti od šablóny, ale štruktúra jedného produktu je dlhodobo stabilná. Keď stránka tieto hooky „ignoruje“, takmer vždy je to téma/nástroj na tvorbu, ktorý nahradí šablónu.

Krok 1: Vytvorte miniplugin (odporúčané) namiesto vkladania náhodného kódu

Cieľ: umiestniť vaše prispôsobenie do izolovaného, ​​verziovateľného súboru, ktorý sa dá ľahko deaktivovať, ak niečo pokazíte.

Možnosť A (odporúčaná): MU-plugin

Vytvorte priečinok /wp-content/mu-plugins/ Ak neexistuje, vytvorte súbor:

/wp-content/mu-plugins/bpcab-wc-single-product-custom.php

<?php
/**
 * Personnalisations WooCommerce - Fiche produit (sans plugin)
 *
 * Emplacement : wp-content/mu-plugins/bpcab-wc-single-product-custom.php
 * Compatible : WordPress 6.9.4+, PHP 8.1+, WooCommerce récent
 */

defined('ABSPATH') || exit;

/**
 * Petite sécurité : ne chargez ce fichier que si WooCommerce est actif.
 * (woocommerce/woocommerce.php est le plugin principal)
 */
function bpcab_wc_is_active(): bool {
	return class_exists('WooCommerce');
}

/**
 * Point d'entrée : on attend que WordPress soit prêt.
 */
add_action('plugins_loaded', function () {
	if (!bpcab_wc_is_active()) {
		return;
	}

	// Les étapes suivantes vont s'accrocher ici (hooks WooCommerce et WordPress).
}, 20);

Pourquoi plugins_loaded Pretože WooCommerce sa musí načítať. Často som videl chyby „Volanie nedefinovanej funkcie“, keď sa kód spustí príliš skoro.

Možnosť B: vlastný plugin

Ak chcete funkciu povoliť/zakázať z administrátorského panela, vytvorte:

/wp-content/plugins/bpcab-wc-single-product-custom/bpcab-wc-single-product-custom.php

Kód je identický, ale pridajte hlavičku pluginu pre WordPress. Referencia: Požiadavky na hlavičku pluginu.

Krok 2: Zmena poradia prvkov hárku produktu (bez prepísania šablóny)

WooCommerce zobrazuje obsah „súhrnu produktu“ prostredníctvom série preddefinovaných akcií s prioritami. Odstránite určité prvky a vráťte ich na správne miesto.

Konkrétny cieľ

  • Zobraziť vyššia cena (hneď za názvom)
  • Zobraziť na vedomie po cene
  • Presunúť meta (SKU/kategórie) pod tlačidlom košíka

Pridajte tento kód do spätného volania funkcie plugins_loaded (vo vašom mu-plugine) alebo priamo za ním, ak ho neštruktúrujete:

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

add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	/**
	 * On réordonne les éléments du résumé produit.
	 * Le hook woocommerce_single_product_summary est déclenché dans le template single-product.php.
	 *
	 * Note : on garde les fonctions WooCommerce natives (wc_template_*),
	 * on ne réécrit pas la logique.
	 */
	add_action('wp', function () {

		// Retirer (pour les réinsérer dans un autre ordre)
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);

		// Réinsérer : titre est à 5 par défaut, on place le prix à 6
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 6);

		// Note après le prix
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 7);

		// Extrait un peu plus bas (après le bouton panier qui est souvent à 30)
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31);

		// Meta sous l'extrait
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 35);

	}, 20);
}, 20);

Prečo prechádzať wp Pretože akcie odstránenia/pridania sú spoľahlivejšie, keď WordPress určí typ stránky. Na niektorých stránkach téma/tvorca interaguje s hookmi neskôr a nastavenie priority vám ušetrí peniaze.

Očakávaný výsledok

Na stránke produktu uvidíte cenu hneď pod názvom a za ňou hodnotenie. Zvyšok nasleduje po vašej objednávke.

Krok 3: Pridajte upozorňujúci banner a informácie o podmienenom doručení

Jednoduchý banner na správnom mieste je často lepší ako ťažkopádny plugin s „odznakmi“. Zobrazíme ho hneď po uvedení ceny.

Pridať pevný banner

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	/**
	 * Affiche un bandeau de réassurance après le prix.
	 * Hook : woocommerce_single_product_summary
	 */
	add_action('woocommerce_single_product_summary', function () {
		if (!is_product()) {
			return;
		}

		echo '<div class="bpcab-reassurance" role="note">';
		echo '<strong>Expédition 24/48h</strong><br>';
		echo '<span>Retours 30 jours • Paiement sécurisé</span>';
		echo '</div>';
	}, 8);
}, 20);

Pridajte podmienené informácie na základe ceny

Príklad: „Doprava zdarma pri objednávkach nad 60 €“, ak je cena produktu nižšia. Získame cenu WooCommerce s prihliadnutím na variabilné ceny produktov (minimálna cena).

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_action('woocommerce_single_product_summary', function () {
		if (!is_product()) {
			return;
		}

		global $product;
		if (!$product || !is_a($product, 'WC_Product')) {
			return;
		}

		// Seuil : à adapter
		$free_shipping_threshold = 60.0;

		// Prix affichable : pour les variables, on prend le prix min
		$price = (float) $product->get_price();
		if ($product->is_type('variable')) {
			$price = (float) $product->get_variation_price('min', true);
		}

		if ($price > 0 && $price < $free_shipping_threshold) {
			$missing = $free_shipping_threshold - $price;

			echo '<div class="bpcab-shipping-hint">';
			echo 'Livraison offerte dès ' . esc_html(wc_price($free_shipping_threshold)) . '. ';
			echo 'Plus que <strong>' . esc_html(wc_price($missing)) . '</strong>.';
			echo '</div>';
		}
	}, 9);
}, 20);

Bezpečnostný bod: HTML výstupu unikneme pomocou esc_html(). wc_price() vráti HTML (symbol, rozpätie), takže ho tu escapujeme ako HTML text. Ak chcete zachovať HTML formát wc_price(), použite wp_kses_post() miesto.

Krok 4: Správne prispôsobte karty (popis / recenzie)

Karty sú spravované prostredníctvom filtrovanej tabuľky pomocou woocommerce_product_tabs. Je to filtre : dostanete hodnotu, upravíte ju, vrátite ju.

Premenovanie a zmena poradia kariet

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	/**
	 * Personnalise les onglets produit.
	 * Filtre : woocommerce_product_tabs
	 */
	add_filter('woocommerce_product_tabs', function (array $tabs): array {

		// Renommer l'onglet description
		if (isset($tabs['description']['title'])) {
			$tabs['description']['title'] = 'Détails';
			$tabs['description']['priority'] = 10;
		}

		// Renommer l'onglet infos supplémentaires
		if (isset($tabs['additional_information']['title'])) {
			$tabs['additional_information']['title'] = 'Caractéristiques';
			$tabs['additional_information']['priority'] = 20;
		}

		// Mettre les avis en dernier
		if (isset($tabs['reviews']['priority'])) {
			$tabs['reviews']['priority'] = 30;
		}

		return $tabs;
	}, 20);
}, 20);

Odstránenie karty (napr. „Doplňujúce informácie“)

Ak váš obchod nepoužíva atribúty, táto záložka je často prázdna. Jej odstránením sa vyhnete nepotrebnej záložke.

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_filter('woocommerce_product_tabs', function (array $tabs): array {
		// Supprime l'onglet "additional_information"
		unset($tabs['additional_information']);
		return $tabs;
	}, 30);
}, 20);

Pridajte kartu „Doprava a vrátenie tovaru“

Pridali sme kartu, ktorá zobrazuje jednoduchý obsah. Nie je tu žiadne administrátorské pole: ponechávame to „bez pluginov“. Ak chcete upraviteľný obsah, nižšie vám ponúknem alternatívu.

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_filter('woocommerce_product_tabs', function (array $tabs): array {

		$tabs['bpcab_shipping_returns'] = [
			'title'    => 'Livraison & retours',
			'priority' => 25,
			'callback' => function () {
				echo '<h2>Livraison & retours</h2>';
				echo '<p>Expédition sous 24/48h ouvrées. Retours sous 30 jours (produit non utilisé).</p>';
				echo '<p>Pour les produits volumineux, un transporteur peut vous contacter.</p>';
			},
		];

		return $tabs;
	}, 25);
}, 20);

Poznámka: Spätné volanie vypíše HTML. Ak vkladáte obsah z administračného panela, použite ho ako escape (riziko XSS).

Krok 5: Pridajte výzvu na akciu za „Pridať do košíka“ + technické pole

Háčik woocommerce_after_add_to_cart_button je klasika: zobrazuje sa hneď za tlačidlom nákupného košíka. Praktické pre odkaz na sprievodcu veľkosťami, kontaktné tlačidlo alebo pripomienku „Potrebujete pomoc?“.

Pridajte jednoduchú výzvu na akciu

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_action('woocommerce_after_add_to_cart_button', function () {
		if (!is_product()) {
			return;
		}

		// Exemple : lien vers une page "Guide des tailles"
		$url = home_url('/guide-des-tailles/');

		echo '<div class="bpcab-after-cart-cta">';
		echo '<a class="bpcab-cta-link" href="' . esc_url($url) . '">Voir le guide des tailles</a>';
		echo '</div>';
	}, 20);
}, 20);

Pridajte skryté pole (napr. interné sledovanie) a zároveň zachovajte čistotu

Bežný príklad: chcete pridať skryté pole do formulára „pridať do košíka“ na sledovanie zdroja (bez pluginu). Poznámka: Ak spracovávate dáta na strane servera, použite nonce. Tu zobrazujeme iba vloženie poľa bez akejkoľvek logiky spracovania.

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_action('woocommerce_before_add_to_cart_button', function () {
		if (!is_product()) {
			return;
		}

		// Champ hidden simple (pas de donnée sensible)
		echo '<input type="hidden" name="bpcab_source" value="single_product" />';
	}, 20);
}, 20);

Ak začnete v príkaze zaznamenávať toto pole, vstupujete do oblasti „používateľských údajov“: validáciaČistenie a bezpečnosť sa stávajú povinnými.

Krok 6: Pridajte čistý CSS (a načítajte ho iba na stránke produktu)

Narýchlo zostavený CSS kód vložený do prispôsobiteľa funguje… až do dňa, keď sa stane nezvládnuteľným. Tu načítame malý súbor CSS iba na stránky produktov.

Vytvorte súbor CSS

Vytvoriť:

/wp-content/mu-plugins/assets/bpcab-wc-single.css

.bpcab-reassurance{
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  border-radius: 8px;
}

.bpcab-shipping-hint{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 4px solid #1e73be;
  background: rgba(30,115,190,.06);
}

.bpcab-after-cart-cta{
  margin-top: 10px;
}

.bpcab-cta-link{
  display: inline-block;
  text-decoration: underline;
}

Front na strane PHP

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	/**
	 * Charge le CSS uniquement sur les pages produit.
	 * Hook WordPress : wp_enqueue_scripts
	 */
	add_action('wp_enqueue_scripts', function () {

		if (!is_product()) {
			return;
		}

		// URL du fichier (MU-plugin)
		$css_url  = content_url('mu-plugins/assets/bpcab-wc-single.css');
		$css_path = WP_CONTENT_DIR . '/mu-plugins/assets/bpcab-wc-single.css';

		// Version : utile pour casser le cache quand vous modifiez le fichier
		$ver = file_exists($css_path) ? (string) filemtime($css_path) : null;

		wp_enqueue_style(
			'bpcab-wc-single',
			$css_url,
			[],
			$ver
		);

	}, 20);
}, 20);

Častou chybou je použitie nesprávnej cesty (URL vs. CESTA), čo má za následok, že sa CSS nikdy nenačíta. Tu vypočítame oboje.

Kompatibilita s Divi 5 / Elementor / Avada

Pravidlo: ak tvorca používa štandardné šablóny WooCommerceVaše háky fungujú. Ak to úplne nahrádza stránku produktu, je potrebné to upraviť.

Divi 5

  • Divi môže používať „Šablóny produktov“ (Nástroj na tvorbu tém). Ak vaša šablóna Divi obsahuje modul „Súhrn produktu Woo“, často sa spolieha na hooky, ale nie vždy.
  • Rýchly test: dočasne deaktivujte šablónu produktu Divi (na pracovisku) a skontrolujte, či sa vaše zmeny zobrazia na „natívnej“ stránke WooCommerce.
  • Tip: Ak sa vaša výzva na akciu nezobrazuje, umiestnite ju na háčik nižšej úrovne, ako napríklad woocommerce_after_add_to_cart_form (podľa štruktúry modulu).

Elementor

  • S Elementor Pro môžu šablóny „Single Product“ nahradiť vykresľovanie WooCommerce.
  • Ak používate natívne widgety WooCommerce Elementor (Pridať do košíka, Cena produktu…), niektoré hooky sa už nevolajú.
  • Pragmatický prístup: ponechajte si hooky pre logiku (podmienky, text) a v prípade potreby použite HTML widget/shortcode v Elementore. Napríklad: vytvorte shortcode, ktorý zobrazuje váš banner, a potom ho vložte kamkoľvek chcete.

Avada (výrobca fúzií)

  • Avada ponúka rozloženia WooCommerce a dokáže vložiť vlastné obaly. Väčšina hookov zostáva k dispozícii, ale priority sa môžu zdať ignorované, ak Avada prekladuje stránku.
  • Ak sa poradie nezmení: hľadajte prepísania šablón Avada v téme (alebo podtéme), ktoré nahrádzajú šablóny WooCommerce.

Univerzálne riešenie pre staviteľov: shortcode

Keď nástroj na tvorbu webu zablokuje vaše hooky, krátky kód vám vráti kontrolu. Napríklad: krátky kód pre upokojujúci banner, ktorý umiestnite do textového modulu.

<?php
add_action('plugins_loaded', function () {
	if (!class_exists('WooCommerce')) {
		return;
	}

	add_shortcode('bpcab_reassurance', function (): string {
		if (!is_product()) {
			return '';
		}

		ob_start();
		echo '<div class="bpcab-reassurance" role="note">';
		echo '<strong>Expédition 24/48h</strong><br>';
		echo '<span>Retours 30 jours • Paiement sécurisé</span>';
		echo '</div>';
		return (string) ob_get_clean();
	});
}, 20);

Divi 5: Textový modul + [bpcab_reassurance]. Elementor: Widget Shortcode. Avada: Prvok „Shortcode“.

Kompletný kód

Skopírujte a vložte toto do /wp-content/mu-plugins/bpcab-wc-single-product-custom.phpTento súbor obsahuje všetky kroky (zmena poradia, bannery, karty, výzva na akciu, CSS).

<?php
/**
 * Personnalisations WooCommerce - Fiche produit (sans plugin)
 *
 * Emplacement : wp-content/mu-plugins/bpcab-wc-single-product-custom.php
 * Fichier CSS : wp-content/mu-plugins/assets/bpcab-wc-single.css
 *
 * Compatible : WordPress 6.9.4+, PHP 8.1+, WooCommerce récent
 */

defined('ABSPATH') || exit;

function bpcab_wc_is_active(): bool {
	return class_exists('WooCommerce');
}

add_action('plugins_loaded', function () {

	if (!bpcab_wc_is_active()) {
		return;
	}

	/**
	 * 1) Réordonner les éléments du résumé produit
	 */
	add_action('wp', function () {

		// On ne touche qu'aux pages produit
		if (!function_exists('is_product') || !is_product()) {
			return;
		}

		// Retirer des éléments pour les réinsérer dans un autre ordre
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
		remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);

		// Réinsérer avec des priorités adaptées
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 6);
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 7);
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31);
		add_action('woocommerce_single_product_summary', 'woocommerce_template_single_meta', 35);

	}, 20);

	/**
	 * 2) Bandeau de réassurance
	 */
	add_action('woocommerce_single_product_summary', function () {
		if (!is_product()) {
			return;
		}

		echo '<div class="bpcab-reassurance" role="note">';
		echo '<strong>Expédition 24/48h</strong><br>';
		echo '<span>Retours 30 jours • Paiement sécurisé</span>';
		echo '</div>';
	}, 8);

	/**
	 * 3) Info livraison conditionnelle selon le prix
	 */
	add_action('woocommerce_single_product_summary', function () {
		if (!is_product()) {
			return;
		}

		global $product;
		if (!$product || !is_a($product, 'WC_Product')) {
			return;
		}

		$free_shipping_threshold = 60.0;

		$price = (float) $product->get_price();
		if ($product->is_type('variable')) {
			$price = (float) $product->get_variation_price('min', true);
		}

		if ($price > 0 && $price < $free_shipping_threshold) {
			$missing = $free_shipping_threshold - $price;

			echo '<div class="bpcab-shipping-hint">';
			echo 'Livraison offerte dès ' . esc_html(wc_price($free_shipping_threshold)) . '. ';
			echo 'Plus que <strong>' . esc_html(wc_price($missing)) . '</strong>.';
			echo '</div>';
		}
	}, 9);

	/**
	 * 4) Onglets : renommer/réordonner + ajouter un onglet
	 */
	add_filter('woocommerce_product_tabs', function (array $tabs): array {

		if (isset($tabs['description']['title'])) {
			$tabs['description']['title'] = 'Détails';
			$tabs['description']['priority'] = 10;
		}

		if (isset($tabs['additional_information']['title'])) {
			$tabs['additional_information']['title'] = 'Caractéristiques';
			$tabs['additional_information']['priority'] = 20;
		}

		if (isset($tabs['reviews']['priority'])) {
			$tabs['reviews']['priority'] = 30;
		}

		$tabs['bpcab_shipping_returns'] = [
			'title'    => 'Livraison & retours',
			'priority' => 25,
			'callback' => function () {
				echo '<h2>Livraison & retours</h2>';
				echo '<p>Expédition sous 24/48h ouvrées. Retours sous 30 jours (produit non utilisé).</p>';
				echo '<p>Pour les produits volumineux, un transporteur peut vous contacter.</p>';
			},
		];

		return $tabs;
	}, 20);

	/**
	 * 5) CTA après le bouton "Ajouter au panier"
	 */
	add_action('woocommerce_after_add_to_cart_button', function () {
		if (!is_product()) {
			return;
		}

		$url = home_url('/guide-des-tailles/');

		echo '<div class="bpcab-after-cart-cta">';
		echo '<a class="bpcab-cta-link" href="' . esc_url($url) . '">Voir le guide des tailles</a>';
		echo '</div>';
	}, 20);

	/**
	 * 6) Champ hidden (exemple technique)
	 */
	add_action('woocommerce_before_add_to_cart_button', function () {
		if (!is_product()) {
			return;
		}

		echo '<input type="hidden" name="bpcab_source" value="single_product" />';
	}, 20);

	/**
	 * 7) CSS : chargé uniquement sur la page produit
	 */
	add_action('wp_enqueue_scripts', function () {

		if (!function_exists('is_product') || !is_product()) {
			return;
		}

		$css_url  = content_url('mu-plugins/assets/bpcab-wc-single.css');
		$css_path = WP_CONTENT_DIR . '/mu-plugins/assets/bpcab-wc-single.css';

		$ver = file_exists($css_path) ? (string) filemtime($css_path) : null;

		wp_enqueue_style('bpcab-wc-single', $css_url, [], $ver);
	}, 20);

	/**
	 * 8) Shortcode de secours (utile avec certains builders)
	 */
	add_shortcode('bpcab_reassurance', function (): string {
		if (!function_exists('is_product') || !is_product()) {
			return '';
		}

		ob_start();
		echo '<div class="bpcab-reassurance" role="note">';
		echo '<strong>Expédition 24/48h</strong><br>';
		echo '<span>Retours 30 jours • Paiement sécurisé</span>';
		echo '</div>';
		return (string) ob_get_clean();
	});

}, 20);

Vysvetlenie kódu

Prečo MU-plugin

WordPress automaticky načíta MU-plugin bez aktivačnej obrazovky. Pre obchod je to výhoda: aj keď niekto „omylom deaktivuje plugin“, vaše dôležité prispôsobenie zostane zachované.

Pourquoi plugins_loaded

Je potrebné načítať WooCommerce. Ak použijete funkcie/triedy WooCommerce príliš skoro, dostanete fatálne chyby. plugins_loaded je jednoduchý a spoľahlivý bod rovnováhy.

Zmena poradia s odstránením/pridaním + priority

woocommerce_single_product_summary je akcia, ktorá „rozvíja“ niekoľko funkcií v poradí definovanom ich priorite (číslo). Čím menšie číslo, tým skôr sa objaví.

Mechanizmus:

  • remove_action(hook, fonction, priorité) odstráni funkciu, ktorá je už pripojená.
  • add_action(hook, fonction, priorité) umiestni to niekam inam.

Častá chyba: odstránenie akcie s nesprávnou prioritou. Ak WooCommerce priradil funkcii prioritu 10 a vy to urobíte remove_action(..., 20)Tým sa nič neodstráni. Výsledok: máte duplikáty.

Záložky cez woocommerce_product_tabs

Je to filter: dostanete tabuľku $tabsKaždá záložka má:

  • title znenie
  • priority : objednávka
  • callback : funkcia, ktorá zobrazuje obsah

Vrátite upravenú tabuľku. Ak zabudnete returnZlomíš úchytky.

CSS cez zaradenie do frontu (a nie pevne naprogramované)

Správne načítanie CSS predchádza prekvapeniam a kolíziám vo vyrovnávacej pamäti. Okrem toho s filemtime()Pri úprave súboru vynútite opätovné načítanie.

Záverečná kontrola

Vykonajte tieto testy v tomto poradí (ušetrí vám to 2 hodiny hľadania problému s vyrovnávacou pamäťou):

  1. Otvorte stránku produktu v režime súkromného prehliadania (znížená vyrovnávacia pamäť prehliadača).
  2. Skontrolujte poradie: názov → cena → hodnotenie → banner → tlačidlo košíka → výňatok → meta.
  3. Skontrolujte, či sa zobrazuje karta „Doručenie a vrátenie tovaru“.
  4. Otestujte variabilný produkt: správa „doprava zdarma od…“ by mala byť založená na minimálnej cene.
  5. Skontrolujte stránku: CSS bpcab-wc-single.css je plne nabitý.
  6. Test pridania do košíka: žiadna chyba, žiadne viditeľné pole (skryté).

Ak to nefunguje

Tu je diagnostická tabuľka (prípady, s ktorými sa najčastejšie stretávam pri riešení problémov s WooCommerce).

symptóm Príčina pravdepodobná overenie Riešenie
Na stránke produktu sa nič nemení Kód je na nesprávnom mieste alebo MU-plugin nie je načítaný Skontrolujte, či je súbor v /wp-content/mu-plugins/ (nie v plugins) Presuňte súbor a potom ho znova načítajte. Pozrite si tiež wp-content/debug.log
Cena/recenzia sa zobrazuje dvakrát. remove_action so slabou prioritou Hľadajte pôvodnú prioritu (často 10) Opravte prioritu v remove_action
CSS sa nenačítava Nesprávna URL adresa alebo agresívne ukladanie do vyrovnávacej pamäte Otvorte kartu Sieť (DevTools) a vyhľadajte bpcab-wc-single.css check content_url(), cestu k súboru a potom vymažte vyrovnávaciu pamäť pluginu/CDN
Zdá sa, že háky sa nevolajú Šablóna produktu nahradená Divi/Elementor/Avada Zakázať nástroj na tvorbu šablón pri príprave na testovanie Použite shortcode alebo znova aktivujte natívne šablóny WooCommerce.
Chyba 500 / prázdna strana Chyba PHP (zátvorka/bodkočiarka) alebo príliš stará verzia PHP Skontrolujte protokoly servera a súbor debug.log. Opravte syntax, skontrolujte PHP 8.1+ a dočasne vypnite plugin MU

Ladenie WordPressu (na pracovisku)

Ak potrebujete povoliť ladenie, postupujte podľa oficiálnej dokumentácie a nepovoľte zobrazovanie chýb v produkčnom prostredí: Ladenie vo WordPress.

Časté úskalia a chyby

Chyba Spôsobiť Riešenie
Vložte kód do nesprávneho súboru Zmätok medzi rodičovskou témou, podradenou témou, pluginom a MU-pluginom Použite MU-plugin pre úryvky WooCommerce „business“ kódu
Zabudnutie bodkočiarky Neúplné kopírovanie a vkladanie Prečítaj si znova predchádzajúci riadok a skontroluj PHP logy.
Mätúca akcia a filter urobíte a echo vo filtri alebo zabudnete return Akcia = zobrazí/vykoná. Filter = upraví a vráti
Použitie nevhodného háčika Blok „po košíku“ pripojíte k hooku „pred súhrnom“. Späť na woocommerce_single_product_summary a upraviť prioritu
Nesprávne zvolená priorita háčika Téma tiež pridáva akcie k rovnakému hooku Zmeňte prioritu (napr. 8, 9, 31), kým nedosiahnete požadované poradie.
Vyrovnávacia pamäť nebola vymazaná Vyrovnávacia pamäť pluginov, vyrovnávacia pamäť servera, CDN Vymažte vyrovnávaciu pamäť pluginu, servera a CDN. Otestujte v režime súkromného prehliadania.
Testovanie v produkcii bez zálohy Tlak, „len malý kúsok“ Príprava + záloha. Vždy.
Úryvok poškodený doplnkom pre úryvky Sú aktívne dve verzie toho istého kódu. Zakážte jeden zo zdrojov (MU-plugin ALEBO úryvky pluginu, nie oba)
Kód zo starého, nekompatibilného tutoriálu Zastarané funkcie, stará logika, PHP je príliš staré Cieľový WP 6.9.4 + PHP 8.1+. Vyhnite sa nedatovaným úryvkom.

Variant / alternatíva

Alternatíva 1: Prepísanie šablóny (podradená téma)

Keď potrebujete zmeniť štrukturálny HTML kód (obaly, stĺpce, presné umiestnenie), hooky už nestačia. V tomto prípade použijete prepísanie šablóny WooCommerce v podradenej téme.

Typická trasa:

  • zdroj: wp-content/plugins/woocommerce/templates/content-single-product.php
  • cieľ: wp-content/themes/votre-theme-enfant/woocommerce/content-single-product.php

Riziko: Pri každej aktualizácii WooCommerce musíte skontrolovať zmeny šablóny. WooCommerce zvyčajne zobrazuje upozornenie v WooCommerce > Stav ak sú vaše prepísania zastarané.

Referencia: Štruktúra šablóny WooCommerce.

Alternatíva 2: Použite plugin (keď je to rozumnejšie)

Ak sa vaša potreba stane „vizuálnym editorom stránok produktu“, plugin/tvorca WooCommerce môže byť časovo efektívnejší (a niekedy aj bezpečnejší, ak je dobre udržiavaný). V tomto prípade si vyberte široko používaný a dobre udržiavaný plugin a otestujte jeho vplyv na výkon.

Tipy na bezpečnosť, výkon a údržbu

  • Nikdy neupravujte jadro (WordPress/WooCommerce). Vaše zmeny budú po aktualizácii prepísané.
  • Uniknite svojim východom : esc_url(), esc_html()a ak zobrazujete „povolený“ HTML kód, wp_kses_post()Referencia: Overenie údajov / Escaping.
  • Obmedzte svoje dopyty Iba CSS/JS na is_product()Je to viditeľné na Core Web Vitals.
  • Zdokumentujte svoje priority Keď sa vrátiš o 6 mesiacov, budeš rád, že pochopíš, prečo je cena 6 a nie 11.
  • Dávajte si pozor na prepísania Ak ho vytvoríte: WooCommerce sa vyvíja. Neudržiavané prepísanie je klasickým zdrojom chýb pri platbe/produkte.
  • Kompatibilita s PHP Ak váš poskytovateľ hostingu omylom prejde na PHP 8.0, niektoré vzory nemusia fungovať správne. Skontrolujte verziu PHP vo svojom ovládacom paneli. Referencia PHP: Podporované verzie PHP.

zdroje

Často kladené otázky

Je to naozaj „bez pluginov“, ak používam MU plugin?

Áno, v duchu hesla „žiadne rozšírenia tretích strán“. MU-plugin je kód, ktorý vlastníte, bez akýchkoľvek externých závislostí. Technicky vzaté, ide o plugin, ale nie o plugin nainštalovaný z online trhu.

Prečo sa vyhýbať vkladaniu tohto kódu do súboru functions.php?

Pretože prepájate logiku WooCommerce s vašou témou. Ak zmeníte témy (alebo ak tvorca nahradí šablónu), stratíte svoje prispôsobenia. Pri riešení problémov často obnovujem obchody, kde bola téma zmenená a všetko správanie produktu zmizlo.

Moje úpravy sa nezobrazujú v Elementore/Divi, čo mám robiť?

Použite poskytnutý skrátený kód (napr. [bpcab_reassurance]a umiestnite ho do nástroja na tvorbu šablón. V opačnom prípade skontrolujte, či váš nástroj na tvorbu šablón správne volá natívne sekcie WooCommerce.

Ako nájsť „správnu prioritu“ háčika?

Začnete s predvolenými hodnotami WooCommerce (často 5, 10, 20, 30, 40) a vložíte hodnoty medzi ne. Ak vaša téma pridáva bloky, upravíte ich podľa potreby. Keď sa poradie zdá nemožné, často je to preto, že bola nahradená šablóna.

Môžem úplne odstrániť karty a zobraziť všetko v jednom stĺpci?

Áno, ale potom často vstupujete do úplnej prestavby štruktúry HTML. Hooky môžu stačiť (obsah zobrazíte inde a zakážete karty), ale prepísanie šablóny je niekedy čistejšie.

Správa „doprava zdarma od…“ musí zohľadňovať akcie, je to tak?

Kód používa get_price() (aktívna cena) a v prípade variabilnej ceny minimálna cena prostredníctvom get_variation_price('min', true)Vo všeobecnosti to zahŕňa propagačné ceny. Ak máte zložité pravidlá stanovovania cien (B2B), musíte ich prispôsobiť svojej logike.

Spomaľuje tento kód môj obchod?

Nie výrazne: je to len pár háčikov a trochu ľahkého CSS a CSS sa načíta iba na is_product()Skutočné riziko pre výkon pochádza skôr z náročných pluginov a zle optimalizovaných nástrojov na tvorbu.

Prečo sa zobrazuje „wc_price()“ s cudzími znakmi?

pretože wc_price() vráti HTML. Ak ho escape-ujete pomocou esc_html()Konvertujete HTML na text. Nahraďte. esc_html(wc_price(...)) odsek wp_kses_post(wc_price(...)) ak chcete zachovať označenie.

Ako môžem rýchlo zrušiť objednávku, ak som porušil zoznam produktov?

Dočasne premenujte súbor MU-pluginu (napr. pridajte .off) cez FTP/SSH. WordPress ho už nenačíta. Potom ho pokojne opravte v priestore pre testovanie.

Musím po týchto zmenách znovu vytvoriť trvalé odkazy?

Nie, nie pre renderovacie hooky. Ak sa však po migrácii stretnete so zvláštnymi chybami 404, prejdite na Nastavenia> Trvalé odkazy a kliknite na tlačidlo „Uložiť“ (bez toho, aby ste čokoľvek zmenili). Toto je užitočný spôsob riešenia problémov.

Kde nájdem zoznam šablón WooCommerce na vytvorenie čistého prepísania?

Oficiálny repozitár WooCommerce na GitHub sprístupňuje šablóny: Šablóny WooCommerce (GitHub)Použite toto ako referenciu pre pravdu, nie ako starý, nedatovaný návod.

Súvisiace položky

Vložte komentár

Vaša e-mailová adresa nebude zverejnená. Povinné položky sú označené *

Táto stránka používa Akismet na zníženie spamu. Zistite, ako sa spracúvajú údaje o vašich komentároch.