Настроювання візуального відображення товарів у кошику WooCommerce зі спеціальними цінами

4 Березня 2024 в 19:08 49

У сфері електронної комерції зручність та візуальна привабливість мають велике значення для залучення та утримання клієнтів. WooCommerce, будучи одним із найпопулярніших плагінів для створення інтернет-магазину на WordPress, пропонує широкі можливості для налаштування відображення товарів. Особливо актуальним стає питання коректного відображення товарів у кошику, ціни яких розраховуються за спеціальними параметрами і можуть бути нижчими за стандартну ціну. Для таких товарів може знадобитися приховання позначки “зі знижкою” або додавання спеціальних маркерів, що зазначають їх унікальність.

Розглянемо кроки та методи, які допоможуть реалізувати індивідуальні вимоги до відображення таких товарів у кошику, зокрема додавання унікальних CSS класів для подальшого налаштування їх стилів.

Визначення унікальних товарів

Перш ніж приступити до технічної реалізації, важливо визначити критерії, за якими товар вважатиметься унікальним та потребуватиме особливого відображення. Це можуть бути товари певної категорії, товари зі спеціальними атрибутами або товари, для яких ціна розраховується за індивідуальною логікою.

Додавання унікального CSS класу

Після визначення критеріїв унікальності товарів можна приступати до реалізації механізму додавання унікальних CSS класів для них у кошику. Це дозволить легко налаштувати стилі цих товарів, використовуючи стандартні можливості CSS.

add_filter('woocommerce_cart_item_class', 'add_custom_class_for_special_price_items', 10, 3);
function add_custom_class_for_special_price_items($class, $cart_item, $cart_item_key) {
    // Перевірка товару на відповідність унікальним критеріям
    if (has_term('special-category', 'product_cat', $cart_item['product_id'])) {
        // Додавання унікального класу
        $class .= ' special-price-item';
    }
    return $class;
}

add_filter('woocommerce_cart_item_class', 'add_custom_class_for_special_price_items', 10, 3);

function add_custom_class_for_special_price_items($class, $cart_item, $cart_item_key) {

// Перевірка товару на відповідність унікальним критеріям

if (has_term('special-category', 'product_cat', $cart_item['product_id'])) {

// Додавання унікального класу

$class .= ' special-price-item';

}

return $class;

}

У цьому прикладі до товарів категорії ‘special-category’ у кошику буде додано клас ‘special-price-item’. За допомогою цього класу можна буде задати необхідні стилі для відображення або приховування елементів.

Стилізація унікальних товарів

Після додавання унікального класу до товарів у кошику можна приступити до стилізації. Наприклад, якщо потрібно приховати позначку “зі знижкою” для цих товарів, можна використати наступний CSS код:

.special-price-item .onsale {
    display: none;
}

.special-price-item .onsale {

display: none;

}

Таким чином, для всіх товарів з класом ‘special-price-item’ буде приховано позначку “зі знижкою”.

Розширені можливості

Використовуючи подібний підхід, можна також реалізувати більш складні сценарії. Наприклад, змінювати колір фону або тексту для товарів у кошику, які відповідають певним критеріям, додавати іконки або маркери, що зазначають особливості товару, або навіть змінювати розташування елементів у макеті кошика для певних товарів.

Для реалізації подібних змін можуть знадобитися додаткові знання HTML і JavaScript, але баз