Как изменить расстояние между значком корзины и надписью «Корзина» в Woocommerce?

Question

[ingeniero]

Wordpress 4.6.1. Woocommerce.
После русификации темы слово "Cart" заменено на "Корзина" - более длинное. В результате буква "К" заезжает под значок корзины.

Задача: изменить расстояние между значком корзины и надписью "Корзина" , чтобы слово было видно полностью.

Пробовал так: редактировал wordpress/wp-content/plugins/woocommerce/assets/css/woocommerce.css,
пытаясь найти, какую настройку поменять. Пробовал менять left в p.demo_store{position:fixed;top:0;left:0;right:0;margin:0;width:100%;font-size:1em; - не помогло.

Вопрос: правильно ли полез менять этот файл? Если нет, то подскажите, как решить поставленную задачу корректно?

Answer 1

[Mr Crabbz]

Нет, неправильно. Править файлы плагина - моветон, т.к. при первом же обновлении плагина всё потеряете. Править надо в своей теме, повышая приоритет css-селектора.

www.quizful.net/post/specificity-of-css-selectors

Comments

[ingeniero]

Используется дочерняя тема. Значит, насколько понимаю, нужно нужно вносить правку с повышением селектора в ее style.css. При помощи браузерного просмотра кода элемента, похоже, нашел нужный селектор: .amount-tytle { margin-left: 50px; }. В данный момент разбираюсь с тем, как на практике повысить приоритетность.

[Mr Crabbz]

ingeniero: Самый простой вариант: div.amount-tytle { margin-left: 50px; }

[ingeniero]

Роман Краббз: Ясно. Сделал, но почему-то не применяется. Вот так выглядит style.css (первая директива body применяется, div - нет. В данном случае в ней font-size.):
/*
Theme Name: Child
Description: Дочерняя тема
Author: alter
Template: theme1
*/

@ import url("../theme1/style.css");

body{
font-size:15px;
}

div .amount-tytle{
font-size:5px;
}
По-видимому, что-то не совсем верно в div сделал? (После @ в import пробела нет если что).

[Mr Crabbz]

ingeniero: пробел после div уберите

[ingeniero]

Роман Краббз: пробовал без пробела вначале, не сработало, только потом попробовал без пробела, что и прикрепил сюда. Еще пробовал так:
div.amount-tytle{
font-size:5px !important;
}
Тоже не сработало. Такие дела.

[ingeniero]

Ошибка найдена, мой недосмотр, все работает. Спасибо.