Почему не работают стили виджета elementor html code на странице товаров woocommerce?

CSS HTML SOLID

1 ответ

Добрый день. Создал нужную структуру через html code в элементор, прописал custom css, в редакторе все отображается норм, но на самой странице какой-то фэйл. Тема Astra.
На странице:

В редакторе:

&lt;ul class="brand_table"&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;A&lt;/span&gt;       &lt;a href="/brand/acura/" class="brand_list__item"&gt;Acura&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/alfa-romeo/" class="brand_list__item"&gt;Alfa Romeo&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/alpina/" class="brand_list__item"&gt;Alpina&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/audi/" class="brand_list__item"&gt;Audi&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;B&lt;/span&gt;       &lt;a href="/brand/bmw/" class="brand_list__item"&gt;BMW&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/byd/" class="brand_list__item"&gt;BYD&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/brilliance/" class="brand_list__item"&gt;Brilliance&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/buick/" class="brand_list__item"&gt;Buick&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;C&lt;/span&gt;       &lt;a href="/brand/cadillac/" class="brand_list__item"&gt;Cadillac&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/changan/" class="brand_list__item"&gt;Changan&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/chery/" class="brand_list__item"&gt;Chery&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/chevrolet/" class="brand_list__item"&gt;Chevrolet&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/chrysler/" class="brand_list__item"&gt;Chrysler&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/citroen/" class="brand_list__item"&gt;Citroen&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;D&lt;/span&gt;       &lt;a href="/brand/ds/" class="brand_list__item"&gt;DS&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/dacia/" class="brand_list__item"&gt;Dacia&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/daewoo/" class="brand_list__item"&gt;Daewoo&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/daihatsu/" class="brand_list__item"&gt;Daihatsu&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/datsun/" class="brand_list__item"&gt;Datsun&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/derways/" class="brand_list__item"&gt;Derways&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/dodge/" class="brand_list__item"&gt;Dodge&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;&lt;/span&gt;       &lt;a href="/brand/doninvest/" class="brand_list__item"&gt;Doninvest&lt;/a&gt;     &lt;/li&gt;          &lt;li class="brand_table__item"&gt;       &lt;span class="letter"&gt;E&lt;/span&gt;       &lt;a href="/brand/eagle/" class="brand_list__item"&gt;Eagle&lt;/a&gt;     &lt;/li&gt;         ............... &lt;/ul&gt;

<ul class="brand_table"> <li class="brand_table__item"> A <a href="/brand/acura/" class="brand_list__item">Acura</a> </li> <li class="brand_table__item"> <a href="/brand/alfa-romeo/" class="brand_list__item">Alfa Romeo</a> </li> <li class="brand_table__item"> <a href="/brand/alpina/" class="brand_list__item">Alpina</a> </li> <li class="brand_table__item"> <a href="/brand/audi/" class="brand_list__item">Audi</a> </li> <li class="brand_table__item"> B <a href="/brand/bmw/" class="brand_list__item">BMW</a> </li> <li class="brand_table__item"> <a href="/brand/byd/" class="brand_list__item">BYD</a> </li> <li class="brand_table__item"> <a href="/brand/brilliance/" class="brand_list__item">Brilliance</a> </li> <li class="brand_table__item"> <a href="/brand/buick/" class="brand_list__item">Buick</a> </li> <li class="brand_table__item"> C <a href="/brand/cadillac/" class="brand_list__item">Cadillac</a> </li> <li class="brand_table__item"> <a href="/brand/changan/" class="brand_list__item">Changan</a> </li> <li class="brand_table__item"> <a href="/brand/chery/" class="brand_list__item">Chery</a> </li> <li class="brand_table__item"> <a href="/brand/chevrolet/" class="brand_list__item">Chevrolet</a> </li> <li class="brand_table__item"> <a href="/brand/chrysler/" class="brand_list__item">Chrysler</a> </li> <li class="brand_table__item"> <a href="/brand/citroen/" class="brand_list__item">Citroen</a> </li> <li class="brand_table__item"> D <a href="/brand/ds/" class="brand_list__item">DS</a> </li> <li class="brand_table__item"> <a href="/brand/dacia/" class="brand_list__item">Dacia</a> </li> <li class="brand_table__item"> <a href="/brand/daewoo/" class="brand_list__item">Daewoo</a> </li> <li class="brand_table__item"> <a href="/brand/daihatsu/" class="brand_list__item">Daihatsu</a> </li> <li class="brand_table__item"> <a href="/brand/datsun/" class="brand_list__item">Datsun</a> </li> <li class="brand_table__item"> <a href="/brand/derways/" class="brand_list__item">Derways</a> </li> <li class="brand_table__item"> <a href="/brand/dodge/" class="brand_list__item">Dodge</a> </li> <li class="brand_table__item"> <a href="/brand/doninvest/" class="brand_list__item">Doninvest</a> </li> <li class="brand_table__item"> E <a href="/brand/eagle/" class="brand_list__item">Eagle</a> </li> ............... </ul>

@media (min-width: 1024px) { .brand_table {          display: flex;     flex-direction: column;     flex-wrap: wrap;     align-items: center;     height: 800px;     margin-top: 50px;     padding: 0;     row-gap: 5px; }    .brand_table__item {     display: flex;     padding: 4px 0;     width: 130px;     border: 1px solid;     align-items: center;     border-radius: 5px }  .letter {     color: #D9534F;     font-size: 20px;     font-weight: 600;     width: 10px;     margin-left: -20px;     font-family: 'Rubik'; }  .brand_list__item {     color: black;     text-decoration: none;     font-size: 15px;     padding: 4px;     margin-left: 15px;     font-family: 'Rubik'; } }    @media (max-width: 1024px) { .brand_table {     height: 1300px; } }  @media (max-width: 767px) { .brand_table {     height: 1900px; } }

@media (min-width: 1024px) { .brand_table { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; height: 800px; margin-top: 50px; padding: 0; row-gap: 5px; } .brand_table__item { display: flex; padding: 4px 0; width: 130px; border: 1px solid; align-items: center; border-radius: 5px } .letter { color: #D9534F; font-size: 20px; font-weight: 600; width: 10px; margin-left: -20px; font-family: 'Rubik'; } .brand_list__item { color: black; text-decoration: none; font-size: 15px; padding: 4px; margin-left: 15px; font-family: 'Rubik'; } } @media (max-width: 1024px) { .brand_table { height: 1300px; } } @media (max-width: 767px) { .brand_table { height: 1900px; } }

Дополнительно:

Ответы:

Уберите из стилей ограничение по media.
У вас все основные стили работают только на экранах выше 1024px

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Игорь Волков Ответ

В Elementor редактор и фронтенд часто отличаются из-за области подключения CSS, кэша, оптимизации и стилей темы. HTML-виджет сам по себе выводит разметку, но custom CSS может не попасть на страницу товара WooCommerce, если он задан в Elementor Pro не там, закэширован или перебит CSS темы Astra/WooCommerce.

Порядок проверки:

Откройте фронтенд и DevTools → Elements: есть ли ваш ul.brand_table в HTML.
Проверьте, загружен ли CSS Elementor для этой страницы.
В админке Elementor выполните Инструменты → Regenerate CSS & Data.
Очистите кэш Elementor, темы, плагина оптимизации и CDN.
Проверьте, не режет ли WooCommerce/тема HTML внутри описания товара или вкладки.

Для такого блока лучше задать более конкретные селекторы и не рассчитывать на глобальные стили редактора:

.single-product .brand_table {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.single-product .brand_table__item {
    display: flex;
    gap: 8px;
    align-items: baseline;
}
 
.single-product .brand_table .letter {
    min-width: 20px;
    font-weight: 700;
}

.single-product .brand_table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; } .single-product .brand_table__item { display: flex; gap: 8px; align-items: baseline; } .single-product .brand_table .letter { min-width: 20px; font-weight: 700; }

Если блок нужен на многих товарах, не храните большой HTML в каждом товаре. Сделайте шаблон Elementor для single product, шорткод или отдельный виджет. Так стили будут подключаться централизованно и не будут зависеть от конкретной карточки.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов

Почему не работают стили виджета elementor html code на странице товаров woocommerce?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно