Добавление CSS класса к кнопке добавления в корзину в WooCommerce

Question

Добавление CSS класса к кнопке добавления в корзину в WooCommerce

8 сент. 2015 г., 13:51:22

Просмотры: 21.8K

Голосов: 2

Я ищу способ добавить пользовательский класс к кнопке добавления в корзину на странице single-product.php в WooCommerce. Я пробовал следующее, но безрезультатно:

Скопировал папку woocommerce из директории "plugins" в "themes/MY-THEME/woocommerce".
Изменил файл "add-to-cart.php" в "themes/MY-THEME/woocommerce/loop/add-to-cart.php"

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Выход, если доступ напрямую
}

global $product;

echo apply_filters( 'woocommerce_loop_add_to_cart_link',
    sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( $product->id ),
        esc_attr( $product->get_sku() ),
        esc_attr( isset( $quantity ) ? $quantity : 1 ),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button MY-TEST-CLASS-HERE' : '',
        esc_attr( $product->product_type ),
        esc_html( $product->add_to_cart_text() )
    ),
$product );

Хотя я не вижу "MY-TEST-CLASS-HERE" в исходном коде. Что я делаю не так?

JohnF

39

плагины css woocommerce offtopic

Все ответы на вопрос

Комментарии

Скорее всего, это относится к чему-то другому, а не к кнопкам WooCommerce, который является плагином, а не темой.

jnhghy - Alexandru Jantea

12 дек. 2016 г. 17:12:29

tao 985 · Answer 1 · 2015-09-15T02:16:26Z

Как объясняется в их документации, WooCommerce предоставляет систему шаблонов. Простое копирование WC в вашу тему не даст результатов.

Создайте папку woocommerce в вашей теме.
Скопируйте любой шаблон из папки templates WooCommerce в папку woocommerce вашей темы. Учтите, что структура папки templates должна быть сохранена в папке woocommerce для корректной работы.
Изменяйте шаблоны в папке woocommerce вашей темы по своему усмотрению. Они имеют приоритет загрузки над шаблонами в папке templates плагина.

Совет: не копируйте все шаблоны из плагина в вашу тему! Только те, которые вы хотите изменить. Периодически WooCommerce обновляет свои шаблоны и добавляет функциональность. WooCommerce также уведомит вас, если в плагине появится обновлённая версия шаблона, который вы храните в своей теме, после обновления.

И, кстати, я подозреваю, что минус был поставлен не за сам вопрос, а за его заголовок. Думаю, вы знаете, как добавить класс кнопке. Но вы не знали, как использовать систему шаблонов WooCommerce. Потому что вы не погуглили это, а я уверен, что (технически) вы умеете это делать. Простите за нотку сарказма — это был либо он, либо ещё один минус.

epicrato 201 · Answer 2 · 2015-11-23T19:38:55Z

Самый простой способ, который я нашел (немного хакерский) — это обернуть кнопку в тег span, добавить класс к span, а затем в CSS применить свойства к кнопке, наследуя их от span:

<span class="my-nice-class">
    <?php woocommerce_get_template( 'loop/add-to-cart.php' ); ?>
</span>

И затем в CSS:

.my-nice-class .button {
    color: black;
}

epicrato

201

23 нояб. 2015 г. 19:38:55

grlwondr 29 · Answer 3 · 2015-09-08T18:28:32Z

Вы используете дочернюю тему? Если нет, я бы рекомендовал это сделать. Затем вы можете настроить стиль кнопки в файле "style.css" дочерней темы, редактируя стиль класса "add_to_cart_button", вместо создания нового класса.

grlwondr

29

8 сент. 2015 г. 18:28:32