Персонализирайте продуктова страница на WooCommerce без плъгин

by | WordPress

Ако вече сте добавили „малък фрагмент“ към продуктовата страница на WooCommerce и изведнъж цената изчезне или бутонът „Добави в количката“ се окаже на грешното място, значи сте се сблъскали с истинския проблем: персонализирайте без плъгин не означава бърникане без метод.

Какво ще постигнем

Ще персонализирате продуктовата страница на WooCommerce (продуктов лист) без инсталиране на плъгин за фрагменти и без да докосва сърцето на WordPress/WooCommerce, на уебсайт WordPress 6.9.4 (април 2026 г.) с PHP 8.1 +.

Конкретен резултат за магазина:

  • Ключовите елементи (цена, оценка, откъс, бутон за количка, мета) са пренареден за по-добра конвертация.
  • Un банер за успокоение се показва на правилното място (напр. „Връщане 30 дни / Доставка 24 часа“).
  • Съобщение условно (напр. безплатна доставка над 60 евро) се показва според цената на продукта.
  • Les раздели (описание, допълнителна информация, отзиви) се преименуват, пренареждат и можете да ги изтриете/добавите.
  • Un CTA (линк към ръководството за размери, контакт, WhatsApp...) се появява веднага след „Добави в количката“.
  • Зарежда се минимален CSS код само на страниците на продуктите.

В крайна сметка ще знаете:

  • къде да поставите кода правилно (mu-plugin или персонализиран плъгин и кога да използвате дъщерна тема),
  • кои куки за WooCommerce да използвам,
  • Как да избегнем конфликти с Divi 5, Elementor и Avada.

Бързо обобщение

  • Избягваме functions.php, ако е възможно: създаваме mu-плъгин (зарежда се автоматично).
  • Ние персонализираме продуктовия лист чрез Кукички за WooCommerce (действия/филтри), а не презаписвания на шаблони.
  • Пренареждаме блоковете с remove_action() / add_action() et ле приоритети.
  • Променяме разделите чрез филтъра woocommerce_product_tabs.
  • Добавяме CSS чрез wp_enqueue_scripts и го ограничаваме до is_product().
  • Тестваме с контролен списък + очакваме конфликти скривалище и строители.

Кога да използвате това решение

Този подход е идеален, ако:

  • Искате по-ефективна продуктова страница (конверсия) без да инсталирате 3 разширения,
  • Трябва да поддържате стабилен уебсайт (по-малко плъгини = по-малък потенциал за грешки).
  • Имате някои целенасочени персонализации (ред на блокове, текстове, раздели, микро-призиви към действие),
  • Използвате тема, съвместима с WooCommerce (повечето от тях), и се съгласявате да тествате в тестова среда.

Според моя опит, това е най-добрият начин за 80% от „класическите“ магазини: дрехи, аксесоари, дигитални продукти, занаяти, малки марки.

Кога НЕ трябва да използвате това решение

Избягвайте този урок като основно решение, ако:

  • Ако искате да преработите цялото оформление със сложни секции (решетки, колони, условни блокове с вариации): WooCommerce builder или специални шаблони ще бъдат по-подходящи.
  • Нуждаете се от конфигуратор на продукти, разширени опции (добавки) или сложна бизнес логика (B2B, ценообразуване въз основа на роли, сложни пакети)
  • Нямате достъп до файловете (заключен хостинг): в този случай понякога плъгинът остава единствената опция.

Друг често срещан проблем: ако вашата тема напълно замества продуктовата страница на WooCommerce (някои теми за „магазини“ правят това), стандартните кукички може да бъдат частично игнорирани. В този случай е необходимо предварително да диагностицирате проблема.

Преди да започнете (предварителни изисквания)

Версии и среда

  • WordPress: 6.9.4 (или по-скорошни)
  • PHP: 8.1 + (Препоръчва се 8.2/8.3, ако вашият хостинг доставчик го позволява)
  • WooCommerce: последна версия (проверете Разширения> Инсталирани разширения)
  • Un детска тема Ако планирате да презапишете шаблони (по избор в този урок, но като цяло полезно)

Архивиране и тестване

Направете резервно копие (файлове + база данни) и тествайте в тестова среда, ако е възможно. Много грешки произтичат от просто липсваща точка и запетая... а в реално време това може да доведе до празна страница.

Къде да поставите кода (препоръчителен вариант)

Имате три възможни местоположения. Ето реда на предпочитание:

  • MU-плъгин (препоръчително): PHP файл в /wp-content/mu-plugins/Зарежда се автоматично, дори ако смените темите.
  • персонализиран плъгин малък домашен плъгин в /wp-content/plugins/Активиране/деактивиране.
  • functions.php на дъщерната тема Това е приемливо, но ако промените темите, губите персонализацията. И често съм виждал сайтове да се счупват, защото родителската тема е била актуализирана, а дъщерната тема е съдържала непроверен код.

Достъп до полезни настройки на WooCommerce

  • Общи настройки: WooCommerce> Настройки
  • Данъци/доставка: WooCommerce > Настройки > Доставка
  • Състояние на системата (диагностика): WooCommerce > Статус

Понятия: кука, действие, филтър (на разбираем английски)

Un кука е „кука“ в кода. WooCommerce показва много от тях на страницата на продукта.

  • Une действие изпълнява код на определено място (например, показва блок). В PHP: add_action().
  • Un Филтър променя стойност (напр. променя таблица с табулации). В PHP: add_filter().

WordPress си има свои собствени кукички, WooCommerce добавя свои собствени. Практическата разлика: куките на WooCommerce са позиционирани според структурата на шаблоните на WooCommerce (напр. „преди обобщението на продукта“).

Използваните кукички на WooCommerce

Ето тези, които ще използваме, заедно с техните роли:

  • woocommerce_single_product_summary (Действие): Централна област на продуктовата страница (заглавие, цена, оценка, откъс, бутон за количка и др.). Това е най-печелившият начин за повторно поръчване.
  • woocommerce_before_single_product_summary (действие): преди резюмето (често галерията с изображения).
  • woocommerce_after_single_product_summary (действие): след обобщението (раздели, допълнителни продажби, свързани продукти).
  • woocommerce_product_tabs (филтър): позволява ви да променяте разделите (заглавие, ред, изтриване, добавяне).
  • wp_enqueue_scripts (Действие в WordPress): зареждане на CSS/JS в предния край.

Полезна справка: Списъкът с кукички на WooCommerce варира в зависимост от шаблона, но структурата на един продукт е стабилна от дълго време. Когато даден сайт „игнорира“ тези кукички, почти винаги тема/конструктор замества шаблона.

Стъпка 1: Създайте мини-плъгин (препоръчително), вместо да поставяте произволен код

Целта: да поставите персонализацията си в изолиран, версиираем файл, който лесно да се деактивира, ако нещо се повреди.

Вариант А (препоръчителен): MU-плъгин

Създайте папката /wp-content/mu-plugins/ Ако не съществува, създайте файл:

/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 Защото WooCommerce трябва да се зареди. Често съм виждал грешки „Извикване на неопределена функция“, когато кодът стартира твърде рано.

Вариант Б: персонализиран плъгин

Ако предпочитате да активирате/деактивирате от администраторския панел, създайте:

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

Кодът е идентичен, но добавете заглавка на плъгин за WordPress. Препратка: Изисквания за заглавката на плъгина.

Стъпка 2: Пренареждане на елементите от продуктовия лист (без промяна на шаблона)

WooCommerce показва съдържанието на „резюмето на продукта“ чрез поредица от предварително дефинирани действия с приоритети. Ще премахнете определени елементи и ще ги поставите обратно на правилното място.

Конкретна цел

  • Покажете по-висока цена (веднага след заглавието)
  • Покажете бележка след цената
  • Преместете мета (SKU/категории) под бутона на количката

Добавете този код към обратното извикване на plugins_loaded (във вашия mu-плъгин) или директно след него, ако не го структурирате:

<?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);

Защо да минавам през wp Защото действията за премахване/добавяне са по-надеждни, след като WordPress е определил типа на страницата. В някои сайтове темата/конструкторът взаимодейства с куките по-късно и настройката за приоритет ви спестява.

Очакван резултат

На страницата на продукта ще видите цената точно под заглавието, последвана от оценката. Останалата част следва вашата поръчка.

Стъпка 3: Добавете банер за успокоение и информация за условна доставка

Един обикновен банер, на правилното място, често е по-добър от тромав плъгин за „значки“. Ще го покажем веднага след цената.

Добавяне на фиксиран банер

<?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);

Добавяне на условна информация въз основа на цената

Пример: „Безплатна доставка за поръчки над 60 евро“, ако цената на продукта е под нея. Извличаме цената от WooCommerce, като вземаме предвид променливите цени на продуктите (минимална цена).

<?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);

Точка за сигурност: ние избягваме HTML изхода с esc_html(). wc_price() връща HTML (символ, интервал), така че тук го екранираме като HTML текст. Ако искате да запазите HTML формата на wc_price(), използвайте wp_kses_post() вместо това.

Стъпка 4: Персонализирайте правилно разделите (описание / отзиви)

Разделите се управляват чрез филтрирана таблица от woocommerce_product_tabs. Това е Филтър получавате стойност, променяте я, връщате я.

Преименуване и пренареждане на раздели

<?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);

Изтриване на раздел (напр. „Допълнителна информация“)

Ако вашият магазин не използва атрибути, този раздел често е празен. Премахването му предотвратява появата на безполезен раздел.

<?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);

Добавете раздел „Доставка и връщане“

Добавихме раздел, който показва опростено съдържание. Тук няма администраторско поле: запазваме го „без плъгини“. Ако искате редактируемо съдържание, ще ви дам алтернатива по-долу.

<?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);

Забележка: Обратното извикване отпечатва HTML. Ако инжектирате съдържание от администраторския панел, екранирайте го (риск от XSS).

Стъпка 5: Добавете призив към действие след „Добавяне в количката“ + техническо поле

Куката woocommerce_after_add_to_cart_button е класика: показва се веднага след бутона на пазарската количка. Практичен е за линк към ръководство за размери, бутон за контакт или напомняне „Нуждаете се от помощ?“.

Добавете обикновена призив към действие

<?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);

Добавете скрито поле (напр. вътрешно проследяване), като същевременно запазите чистотата

Често срещан пример: искате да добавите скрито поле към формуляра „добавяне в количката“, за да проследите източник (без плъгин). Забележка: ако обработвате данни от страна на сървъра, използвайте nonce. Тук просто показваме вмъкването на полето, без никаква логика за обработка.

<?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);

Ако започнете да записвате това поле в командата, ще влезете в област „потребителски данни“: утвърждаванеПочистването и охраната стават задължителни.

Стъпка 6: Добавете чист CSS код (и го заредете само на страницата на продукта)

Набързо сглобеният CSS код, поставен в персонализатора, работи... до деня, в който стане неуправляем. Тук зареждаме малък CSS файл само на страниците на продуктите.

Създайте CSS файла

Създаване:

/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;
}

Опашка от страна на 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);

Често срещана грешка е използването на грешен път (URL срещу PATH), което води до CSS, който никога не се зарежда. Тук изчисляваме и двата.

Съвместимост с Divi 5 / Elementor / Avada

Правилото: ако конструкторът използва стандартни шаблони на WooCommerceВашите кукички работят. Ако напълно замества продуктовата страница, трябва да се адаптира.

Диви 5

  • Divi може да използва „Шаблони за продукти“ (Theme Builder). Ако вашият Divi шаблон включва модула „Woo Product Summary“, той често разчита на hooks, но не винаги.
  • Бърз тест: временно деактивирайте шаблона на продукта Divi (на етапа на подготовка) и вижте дали промените ви се показват на „родната“ страница на WooCommerce.
  • Съвет: Ако вашата призивна фраза не се показва, поставете я на кука от по-ниско ниво, като например woocommerce_after_add_to_cart_form (според структурата на модула).

Elementor

  • С Elementor Pro, шаблоните за „единичен продукт“ могат да заменят рендерирането на WooCommerce.
  • Ако използвате вградените уиджети на WooCommerce Elementor (Добавяне в количката, Цена на продукта...), някои куки вече не се извикват.
  • Прагматичен подход: запазете кукичките за логика (условия, текст) и използвайте HTML уиджет/шорткод в Elementor, ако е необходимо. Например: създайте шорткод, който показва вашия банер, след което го поставете където пожелаете.

Авада (Fusion Builder)

  • Avada предлага оформления на WooCommerce и може да инжектира свои собствени обвивки. Повечето куки остават налични, но приоритетите може да изглеждат игнорирани, ако Avada прекомпозира страницата.
  • Ако редът не се промени: потърсете презаписване на шаблони Avada в темата (или дъщерната тема), които заместват шаблоните на WooCommerce.

Универсално решение за строители: шорткодът

Когато конструктор блокира вашите куки, кратък код ви връща контрол. Например: кратък код за банера за успокоение, който поставяте в текстов модул.

<?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: Текстов модул + [bpcab_reassurance]. Elementor: джаджа за кратък код. Avada: елемент „Кратък код“.

Пълният код

Копирайте и поставете това в /wp-content/mu-plugins/bpcab-wc-single-product-custom.phpТози файл включва всички стъпки (пренареждане, банери, раздели, призив към действие, 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);

Обяснение на кода

Защо MU-плъгин

MU-плъгинът се зарежда автоматично от WordPress, без екран за активиране. За магазина това е предимство: дори ако някой „случайно деактивира плъгин“, вашата критична персонализация остава в сила.

Pourquoi plugins_loaded

WooCommerce трябва да се зареди. Ако използвате функции/класове на WooCommerce твърде рано, ще получите фатални грешки. plugins_loaded е проста и надеждна точка на равновесие.

Пренареждане с премахване/добавяне + приоритети

woocommerce_single_product_summary е действие, което „разгръща“ няколко функции в ред, определен от техните priorité (число). Колкото по-малко е числото, толкова по-рано се появява.

Механизмът:

  • remove_action(hook, fonction, priorité) премахва функция, която вече е прикачена.
  • add_action(hook, fonction, priorité) го поставя някъде другаде.

Често срещана грешка: премахване на действие с грешен приоритет. Ако WooCommerce е присвоил на функцията приоритет 10 и вие го направите remove_action(..., 20)Това не изтрива нищо. Резултат: имате дубликати.

Раздели чрез woocommerce_product_tabs

Това е филтър: получавате таблица $tabsВсеки раздел има:

  • title формулировката
  • priority : поръчката
  • callback : функцията, която показва съдържанието

Връщате модифицираната таблица. Ако забравите returnЧупиш езичетата.

CSS чрез поставяне в опашка (а не е твърдо кодиран)

Правилното зареждане на CSS избягва изненади и колизии в кеша. Освен това, с filemtime()Принуждавате да презаредите файла.

Последна проверка

Изпълнете тези тестове в този ред (това ще ви спести 2 часа търсене на проблем с кеша):

  1. Отворете продуктова страница в режим на частно сърфиране (с намален кеш на браузъра).
  2. Проверете реда: заглавие → цена → оценка → банер → бутон за количката → откъс → мета.
  3. Проверете дали се показва разделът „Доставка и връщане“.
  4. Тествайте променлив продукт: съобщението „безплатна доставка от…“ трябва да се базира на минималната цена.
  5. Проверете страницата: CSS bpcab-wc-single.css е напълно зареден.
  6. Тест за добавяне в количката: няма грешка, няма видимо поле (скрито).

Ако това не проработи

Ето една диагностична таблица (случаите, които виждам най-често при отстраняване на проблеми с WooCommerce).

симптом Вероятна причина проверка Решение
Нищо не се променя на страницата на продукта Кодът е на грешното място или MU-плъгинът не е зареден Проверете дали файлът е в /wp-content/mu-plugins/ (не в plugins) Преместете файла и го презаредете. Вижте също wp-content/debug.log
Цената/отзивът се показва два пъти. remove_action с лош приоритет Потърсете първоначалния приоритет (често 10) Коригирайте приоритета в remove_action
CSS не се зарежда Неправилен URL адрес или агресивно кеширане Отворете раздела „Мрежа“ (DevTools) и потърсете bpcab-wc-single.css Проверка content_url(), пътя към файла, след което изчистете кеша на плъгина/CDN
Куките изглежда не се наричат Шаблонът на продукта е заменен от Divi/Elementor/Avada Деактивиране на конструктора на шаблони при подготовка Използвайте шорткода или активирайте отново оригиналните шаблони на WooCommerce.
Грешка 500 / празна страница PHP грешка (скоби/точка и запетая) или PHP версията е твърде стара Проверете лог файловете на сървъра и debug.log. Коригирайте синтаксиса, проверете PHP 8.1+ и временно деактивирайте MU-плъгина

Отстраняване на грешки в WordPress (на етап на подготовка)

Ако е необходимо да активирате дебъгването, следвайте официалната документация и не позволявайте показването на грешки в производствения режим: Отстраняване на грешки в WordPress.

Често срещани капани и грешки

Грешка Причина Решение
Поставете кода в грешен файл Объркване между родителска тема, дъщерна тема, плъгин и MU-плъгин Използвайте MU-плъгин за WooCommerce „бизнес“ фрагменти
Забравяне на точка и запетая Непълно копиране и поставяне Прочетете отново предишния ред, проверете PHP логовете
Объркващо действие и филтър правиш а echo във филтър или забравяте return Действие = показва/изпълнява. Филтър = променя и връща
Използване на неподходяща кука Прикачвате блок „след кошницата“ към кука „преди обобщението“. Върнете се към woocommerce_single_product_summary и коригирайте приоритета
Неправилно избран приоритет на куката Темата също добавя действия към същия hook Променете приоритета (напр. 8, 9, 31), докато получите желания ред.
Кешът не е изчистен Кеш на плъгини, кеш на сървъра, CDN Изчистете кеша на плъгина, сървъра и CDN. Тествайте в режим на частно сърфиране.
Тестване в производство без резервно копие Налягане, „само малък фрагмент“ Подготовка + резервно копие. Винаги.
Фрагмент, повреден от плъгин за фрагменти Две версии на един и същ код са активни. Деактивирайте един от източниците (MU-plugin ИЛИ фрагменти на плъгини, не и двата)
Код от стар, несъвместим урок Остарели функции, стара логика, PHP е твърде стар Цел WP 6.9.4 + PHP 8.1+. Избягвайте недатирани откъси.

Вариант / алтернатива

Алтернатива 1: Замяна на шаблон (дъщерна тема)

Когато е необходимо да промените структурния HTML код (обвивки, колони, точно разположение), куките вече не са достатъчни. В този случай използвате замяна на шаблон на WooCommerce в дъщерната тема.

Типичен маршрут:

  • източник: wp-content/plugins/woocommerce/templates/content-single-product.php
  • цел : wp-content/themes/votre-theme-enfant/woocommerce/content-single-product.php

Риск: С всяка актуализация на WooCommerce трябва да проверявате за промени в шаблона. WooCommerce обикновено показва предупреждение в WooCommerce > Статус ако вашите презаписвания са остарели.

Справка: Структура на шаблона на WooCommerce.

Алтернатива 2: Използвайте плъгин (когато е по-разумно)

Ако вашата нужда се превърне в „визуален редактор на продуктови страници“, плъгин/конструктор на WooCommerce може да бъде по-ефективен от гледна точка на времето (а понякога и по-сигурен, ако е добре поддържан). В този случай изберете широко използван и добре поддържан плъгин и тествайте неговото въздействие върху производителността.

Съвети за безопасност, производителност и поддръжка

  • Никога не модифицирайте ядрото (WordPress/WooCommerce). Промените ви ще бъдат презаписани при актуализация.
  • Избягайте от изходите си : esc_url(), esc_html()и ако показвате „разрешен“ HTML код, wp_kses_post(). Референция: Валидиране на данни / Ескейпинг.
  • Ограничете запитванията си Само CSS/JS на is_product()Това е забележимо в Core Web Vitals.
  • Документирайте приоритетите си Когато се върнеш след 6 месеца, ще се радваш да разбереш защо цената е 6, а не 11.
  • Внимавайте за презаписванията Ако създадете такъв: WooCommerce се развива. Неподдържаното пренаписване е класически източник на грешки при плащане/продукт.
  • PHP съвместимост Ако вашият доставчик на хостинг услуги погрешно се върне към PHP 8.0, някои шаблони може да не работят. Проверете версията на PHP в контролния си панел. Справка за PHP: Поддържани версии на PHP.

ресурси

Често задавани въпроси

Наистина ли е „без плъгини“, ако използвам MU-плъгин?

Да, в духа на „без разширения от трети страни“. MU-плъгинът е код, който притежавате, без никакви външни зависимости. Технически, това е плъгин, но не такъв, инсталиран от пазар.

Защо да избягвате поставянето на този код във functions.php?

Защото свързвате логиката на WooCommerce с темата си. Ако промените теми (или ако конструктор замени шаблона), губите персонализациите си. При отстраняване на неизправности често възстановявам магазини, където темата е била променена и цялото поведение на продукта е изчезнало.

Моите редакции не се показват в Elementor/Divi, какво трябва да направя?

Използвайте предоставения кратък код (напр. [bpcab_reassurance]и го поставете в конструктора на шаблони. В противен случай проверете дали вашият конструктор на шаблони правилно извиква нативните секции на WooCommerce.

Как да намерим „правилния приоритет“ на кука?

Започвате със стойностите по подразбиране на WooCommerce (често 5, 10, 20, 30, 40) и вмъквате стойностите между тях. Ако вашата тема добавя блокове, коригирате съответно. Когато редът изглежда невъзможен, често това е защото шаблонът е бил заменен.

Мога ли напълно да премахна разделите и да покажа всичко в една колона?

Да, но тогава често се налага да се премине към цялостно преработване на HTML структурата. Кукичките може да са достатъчни (показвате съдържанието другаде и деактивирате разделите), но понякога презаписването на шаблон е по-чисто.

Съобщението „безплатна доставка от…“ трябва да взема предвид промоциите, така ли е?

Кодът използва get_price() (активна цена) и, за променлива, минималната цена чрез get_variation_price('min', true)Обикновено това включва промоционални цени. Ако имате сложни правила за ценообразуване (B2B), трябва да ги адаптирате според вашата логика.

Този код забавя ли магазина ми?

Не съществено: това са само няколко куки и малко лек CSS, а CSS се зарежда само на is_product()Истинският риск за производителността идва повече от тежките плъгини и лошо оптимизираните конструктори.

Виждам „wc_price()“ да се показва със странни символи, защо?

защото wc_price() връща HTML. Ако го екранирате с esc_html()Конвертирате HTML в текст. Заменете esc_html(wc_price(...)) равенство wp_kses_post(wc_price(...)) ако искате да запазите маркировката.

Как мога бързо да анулирам поръчката, ако съм нарушил описанието на продукта?

Временно преименувайте файла на MU-плъгина (напр. добавете .off) чрез FTP/SSH. WordPress вече няма да го зарежда. След това спокойно го коригирайте в зоната за подготовка.

Трябва ли да регенерирам постоянните връзки след тези промени?

Не, не е за рендериране на куки. Но ако срещнете странни грешки 404 след миграция, отидете на Настройки> Постоянни връзки и щракнете върху „Запазване“ (без да променяте нищо). Това е полезен рефлекс за отстраняване на неизправности.

Къде мога да намеря списък с шаблони на WooCommerce, за да създам чисто презаписване?

Официалното хранилище на WooCommerce в GitHub предоставя шаблоните: Шаблони за WooCommerce (GitHub)Използвайте това като ориентир за истината, а не като стар, недатиран урок.

Статии

Коментирай

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват вашите коментарни данни.