WordPress кеш без счупени бутони: WP Rocket, LiteSpeed и W3 Total Cache

Quick Order е загубил цвета си, WhatsApp и Viber изглеждат различно, а „Информация за законовата гаранция в ЕС“ се показва и после изчезва? Причината може да е оптимизация на WordPress, но не всеки такъв проблем е от кеша. Първо разграничете трите механизма:

• Кеш на страницата: посетителят получава стар HTML — например стар текст или липсващ новоактивиран модул.
• Премахване на неизползван CSS: оптимизаторът може да пропусне стилове за скрита форма, отворен прозорец или състояние след избор на вариация.
• Забавяне на JavaScript: кодът, който отваря формата, може да стартира чак след взаимодействие. Първият клик изглежда неработещ.

Решението обикновено е точно изключение за засегнатата оптимизация, а не спиране на кеша за целия магазин. CSS изключението пази стилове; то не активира изключен модул и не възстановява липсващ HTML.

Ръководството е сверено с официалната документация към 8 октомври 2026 г. Имената на настройките са на английски, за да ги откривате по-лесно. Подредбата им може да се различава според версията и превода на плъгина.

1. Проверете в LamaFlow дали модулът е активен за правилния WooCommerce магазин и дали желаните текст, цвят и позиция са записани.
2. Запазете снимка или експорт на текущите настройки на кеш плъгина.
3. Не включвайте едновременно няколко инструмента за една и съща CSS/JS оптимизация. Проверете и настройките на темата, хостинга и CDN.
4. Отворете конкретния продукт като излязъл от профила посетител, в инкогнито прозорец. Изгледът на администратора често не използва същия кеш.

Променяйте по една настройка. Добавяйте новите изключения на отделни редове, без да изтривате вече съществуващите.

1. Ако е включено Remove Unused CSS

Отидете в WP Rocket → File Optimization → CSS Files → Optimize CSS delivery → Remove Unused CSS → CSS Safelist. Добавете на отделен ред:

.lama-(.*)

WP Rocket поддържа (.*) като универсален шаблон в това поле. Записът запазва CSS селекторите с класове, започващи с lama- — използвани от Quick Order, WhatsApp, Viber и известието за законовата гаранция в ЕС. Ако Remove Unused CSS не е включено, няма нужда да го включвате заради тази инструкция.

Не поставяйте този запис в Never Cache URLs. Там се задават адреси на страници, а не CSS класове. Не използвайте и самостоятелно (.*) като постоянно изключение: то би запазило всички стилове, не само тези на LamaFlow.

2. Ако Quick Order се отваря със закъснение

При включено File Optimization → JavaScript Files → Delay JavaScript execution намерете Excluded JavaScript Files и добавете:

lama-quick-order

Това е отличителен текст от кода на Quick Order, не адрес на страница и не име на файл, който трябва да създадете. В текущия WooCommerce плъгин кодът на формата се извежда и като вграден скрипт в страницата. Изключението цели той да не чака първото взаимодействие.

Ако забавянето остане, проверете зависимостите и останалите оптимизатори. Не добавяйте наслуки общи изключения за всички скриптове на сайта.

3. Изчистете и изчакайте генерирания CSS

Запазете настройките, изчистете кеша на засегнатите страници и използвайте наличната команда за изчистване/регенериране на Used CSS. След това тествайте отново след приключване на генерирането.

Веднага след изчистване страницата може временно да изглежда правилно, а после да се промени, когато WP Rocket приложи новия Used CSS. Една успешна проверка непосредствено след изчистване още не доказва, че проблемът е решен.

1. Формата се отваря чак след клик или скрол

В LiteSpeed Cache → Page Optimization → Tuning → JS Deferred/Delayed Excludes добавете на отделен ред:

lama-quick-order

Това поле приема частичен текст — без звездички и без (.*). Не го поставяйте в JS Delayed Includes, което има обратната цел. Ако проблемът е от минифициране или обединяване, а не от забавяне, проверете отделното поле JS Excludes. При включен Guest Mode има и Guest Mode JS Excludes.

2. Бутоните или гаранцията губят стиловете си

Ако използвате Generate UCSS, отворете Page Optimization → Tuning – CSS → UCSS Selector Allowlist. Тук се задават точните селектори от CSS, а не шаблонът на WP Rocket. Например:

.lama-quick-order-button
.lama-whatsapp-order
.lama-viber-order
.lama-eu-guarantee-notice
.lama-eu-guarantee-disclosure
.lama-eu-guarantee-content

Това са начални примери, не пълен списък за всички състояния на формата. За полетата, иконите, отворения прозорец и съобщенията може да са нужни допълнителни селектори. Копирайте ги точно от CSS с Inspect — само родителски клас от HTML не запазва автоматично всички вложени правила.

При използване на Critical CSS проверете и CCSS Selector Allowlist. Полето CSS Excludes за минифициране/обединяване не е заместител на UCSS Selector Allowlist.

По-проста алтернатива за проблемна продуктова страница

Ако не искате да поддържате списък с всички динамични селектори, в Tuning – CSS → UCSS URI Excludes може да изключите засегнатата страница само от UCSS. Например, като замените пътя с този на вашия продукт:

/product/your-product/

Това не изключва HTML кеша на страницата, а премахването на неизползван CSS за нея. Не копирайте примерния адрес без промяна и не изключвайте целия сайт. След запазване изчистете съответния кеш и генерирания UCSS/CCSS от LiteSpeed Cache → Toolbox → Purge, според използваните функции. Изчакайте обработката на опашката и повторете теста като гост.

В Performance → Minify → Advanced потърсете Never minify the following JS files и Never minify the following CSS files. Тези полета са за файлове, а не за класове като .lama-(.*).

1. Ако проблемът е започнал след включване на Minify, временно изключете само тази оптимизация и проверете същия продукт като гост.
2. Ако това реши проблема и засегнатият код е във външен файл, намерете действителния му адрес чрез Inspect → Network и го добавете в съответното поле за JS или CSS, на отделен ред.
3. Върнете Minify за останалите ресурси, изчистете Minify кеша и кеша на страницата и проверете отново.

Важно за LamaFlow: стиловете и скриптът на Quick Order, както и стилове на останалите продуктови елементи, се извеждат и директно в HTML. Няма универсален файл lama-quick-order.js, който да впишете. Изключването на несъществуващ файл няма да защити вградения код.

При установен проблем с вградения CSS/JS проверете настройките за inline минифициране. Като по-тясна алтернатива на глобалното спиране на Minify използвайте Never minify the following pages за действителния път на засегнатия продукт. Това е изключение от Minify, не от Page Cache.

Ако друга добавка премахва неизползван CSS или забавя JavaScript, изключението трябва да се направи и в нея. Настройката на W3 Total Cache не управлява оптимизацията на друг плъгин.

1. Запазете промените и изчистете кеша на засегнатата страница.
2. Изчистете или регенерирайте съответните Used CSS, UCSS, CCSS или Minify ресурси — само HTML кешът може да не е достатъчен.
3. Ако има отделен кеш от хостинга или CDN, изчистете и засегнатите страници там.
4. Изчакайте оптимизацията да приключи. Отворете нов инкогнито прозорец без вход в WordPress.
5. Проверете на телефон и компютър: цвят и текст на бутоните, отваряне и затваряне на Quick Order, полетата във формата и разгъване на гаранцията.
6. При вариативен продукт изберете валиден вариант и проверете WhatsApp/Viber. Бутон, който чака избор на вариант, не е непременно повреден от кеша.
7. Повторете проверката след следващо зареждане на вече кешираната страница, не само веднага след изчистване.

За проверка на самото изпращане използвайте тестов магазин или предварително уговорен тест. Изпращането на Quick Order може да създаде реална заявка и известие към търговеца.

Повече за самия модул: как работи WooCommerce Quick Order в LamaFlow.

• Не изключвайте кеширането на всички продукти като първо решение за липсващ CSS.
• Не поставяйте CSS класове в Never Cache URLs и не използвайте един и същ шаблон във всички плъгини.
• Не премахвайте ръчно hidden или disabled, за да покажете бутон — може да заобиколите необходимо състояние на продукта.
• Не кеширайте страниците на количката, плащането, профила и персонализирани checkout сесии като общ HTML за всички посетители. Проверете изключенията за действителните WooCommerce адреси на магазина.
• Не кеширайте персонализирани AJAX/REST отговори за поръчки като публично съдържание.

Ако проблемът остава и без съответната оптимизация, проверете настройките на модула, темата, версията на WooCommerce плъгина и грешките в браузъра. За поддръжката подгответе адрес на продукта, версии, снимка на проблема, включените оптимизации и стъпки за възпроизвеждане — без пароли и API ключове.

Менютата и синтаксисът на изключенията са съобразени със следните източници:

• WP Rocket: отстраняване на проблеми с Remove Unused CSS
• WP Rocket: изключения за Delay JavaScript execution
• LiteSpeed Cache: Page Optimization, Tuning и Tuning – CSS
• W3 Total Cache: ръководство за Minify

Снимката е илюстративна, а не екранна снимка на настройките на конкретен плъгин.