Если вы используете плагин WooCommerce для WordPress, вы могли заметить, что цвет кнопки «Добавить в корзину» по умолчанию имеет зеленоватый оттенок. Хотя для некоторых магазинов этот цвет вполне подходит, вы можете захотеть изменить его, чтобы он лучше соответствовал общему виду и атмосфере вашего сайта. В этой статье мы покажем вам, как изменить цвет кнопки «Добавить в корзину» в WooCommerce.
WooCommerce — это плагин, который позволяет превратить сайт WordPress в полнофункциональный интернет-магазин. Одной из особенностей WooCommerce является то, что он позволяет продавать физические или цифровые товары на вашем сайте.
Когда покупатель добавляет товар в корзину, он нажимает на кнопку «Добавить в корзину». По умолчанию эта кнопка зеленого цвета.
Хотя цвет по умолчанию вполне подходит для некоторых магазинов, вы можете изменить его, чтобы он лучше соответствовал общему виду и атмосфере вашего сайта. Например, если основной цвет вашего сайта — синий, вы можете изменить цвет кнопки «Добавить в корзину» на синий. К счастью, WooCommerce позволяет легко изменить цвет этой кнопки.
Чтобы изменить цвет кнопки «Добавить в корзину» в WooCommerce, вам нужно добавить некоторый код в таблицу стилей вашей темы (style.css). Код, который нужно добавить, зависит от того, какие цвета вы хотите использовать. В нашем примере мы будем использовать синий цвет для кнопки «Добавить в корзину».
Вот код, который нужно добавить в таблицу стилей вашей темы:.
.woocommerce-page input.button, .woocommerce-page button.woocommerce-page #respond input#submit { background-color: #0073aa; }
ПРО СОВЕТ: Если вы не являетесь разработчиком, мы рекомендуем вам не пытаться изменить цвет кнопки корзины в WooCommerce. Это может привести к неожиданному поведению и сломать ваш сайт.
.button:hover, .woocommerce-page #respond input#submit:hover { background-color: #004c6d; }
После добавления этого кода сохраните изменения и загрузите обновленную таблицу стилей на свой сервер. Ваша кнопка «Добавить в корзину» теперь должна быть синей..
Как изменить цвет кнопки корзины в WooCommerce?
Чтобы изменить цвет кнопки «добавить корзину» в WooCommerce, вам нужно добавить некоторый код в таблицу стилей вашей темы (style.css) Код будет зависеть от того, какие цвета вы хотите использовать.
К счастью, WooCommerce позволяет легко изменить цвета этой кнопки.
Например, если ваши сайты имеют основные цвета (или любые другие цвета, которые вы хотите использовать), вы можете изменить кнопки добавления в корзину (или купить сейчас), чтобы они также соответствовали этим цветам.
Вот пример кода, который вам нужно будет скопировать и поместить (в таблицу стилей вашей темы):
.WooCommerce input#submit {background - color:# 4a4a4a;border -radius: 3px ;font - size : 16px ;padding: 14px 40px ;transition : all 0s ease 0s ;width : 100% ;}. WooCommerce — страница input#submit {background — color:# 4a4a4a;border -radius: 3px ;font — size : 16px ;padding: 14px 40px ;transition : all 0s ease 0s ;width : 100%;} . WooCommerce # respond input#submit {background — color:# 4a4a4a;border -radius: 3px;font — size : 16px !important;padding: 14px 40px !important;transition : all 0s ease 0s !important;width : 100% !important;} . WooCommerce — страница # respond input#submit {background — color:# 4a4a4a;border -radius: 3px;font — size : 16px !important;padding: 14px 40px !important;transition : all 0s ease 0s !important;width : 100% !important;} .
WooCommerce input#submit: hover {background — color:# 2d2d2d;} . WooCommerce — page input#submit: hover {background — color:# 2d2d2d;} . WooCommerce # respond input#submit: hover , . WooCommerce — страница # respond input#submit {background — color:# 2d2d2d;}.
После добавления этого кода и сохранения изменений, вам нужно будет загрузить эти изменения на ваш сервер.
Ваши кнопки «добавить в корзину» (или купить сейчас) теперь должны соответствовать основным цветам вашего сайта (или любым другим цветам, которые вы выбрали).