WooCommerce: как добавить свою информацию на страницу корзины

Изменим страницу Корзины WooCommerce, с помощью редактирования макета страницы. Так выглядит стандартная страница корзины по умолчанию:

Вместо этого мы выведем что-то вроде этого:

• Используем двухколоночный макет вместо одной колонки шаблона по умолчанию. Это позволяет нам поднять элемент “итоги корзины” вверх, чтобы он был более заметен на больших экранах.
• Добавим преимущества компании ниже списка продуктов в корзине. Чтобы напомнить клиенту ценность, которую они получают с их покупкой, такие как бесплатная доставка, легкий обмен, поддержка и безопасность.
• Добавим блок часто задаваемых вопросов под списком продуктов в формате аккордеона. Это помогает клиенту получить ответы на вопросы о своей покупке без необходимости выходить и обращаться в службу поддержки.

Создаём собственный шаблон страницы Корзины

Нам нужен cart.php файл, который находится по адресу:

/wp-content/plugins/woocommerce/templates/cart/cart.php

Давайте сделаем копию этого файла и создадим путь к файлу, предложенный в теме:

/wp-content/themes/[your-theme]/woocommerce/cart/cart.php

Добавляем собственную разметку страницы

Добавим в шаблон блоки Преимущества и Часто задаваемые вопросы.

</table>

<!-- Custom code here -->

<?php do_action( 'woocommerce_after_cart_table' ); ?>

Должно получиться что-то вроде этого:

Теперь у нас есть все элементы, которые мы хотим видеть на странице. Все, что осталось, — это стилизовать элементы, чтобы у нас получился двухколоночный макет.

Существующая разметка уже хорошо организована таким образом, что мы можем добиться желаемого с помощью CSS.

.woocommerce-cart .woocommerce {
  display: flex;
}

У нас есть два дочерних элемента в .woocommerce элементе: .woocommerce-cart-form и .cart-collaterals. Это CSS, который нам нужен для разделения элементов, и он выглядит примерно так:

/* The table containing the list of products and our custom elements */
.woocommerce-cart .woocommerce-cart-form {
  flex: 1 0 70%; /* 100% at small screens; 70% on larger screens */
  margin-right: 30px;
}

/* The element that contains the cart totals */
.woocommerce-cart .cart-collaterals {
  flex: 1 0 30%; /* 100% at small screens; 30% on larger screens */
  margin-left: 30px;
}

/* Some minor tweak to make sure the cart totals fill the space */
.woocommerce-cart .cart-collaterals .cart_totals {
  width: 100%;
  padding: 0 20px 70px;
}

Получаем нужный макет:

Выделяем наиболее важные элементы

Одна из проблем стандартного дизайна WooCommerce – все кнопки имеют одинаковый дизайн. Все они одинакового размера и одинакового цвета фона.

Сделаем различие более четким, изменив цвет фона кнопок. Для этого пишем следующий CSS:

/* The "Apply Coupon" button */
.button[name="apply_coupon"] {
  background-color: transparent;
  color: #13aff0;
}
/* Fill the "Apply Coupon" button background color and underline it on hover */
.button[name="apply_coupon"]:hover {
  background-color: transparent;
  text-decoration: underline;
}

/* The "Update Cart" button */
.button[name="update_cart"] {
  background-color: #e2e2e2;
  color: #13aff0;
}
/* Brighten up the button on hover */
.button[name="update_cart"]:hover {
  filter: brightness(115%);
}

Таким образом, мы создаем следующую иерархию: 

1. Кнопка «Перейти к оформлению заказа» в значительной степени оставлена ​​как есть, с синим цветом фона по умолчанию, чтобы выделить ее, поскольку это наиболее важное действие в корзине.
2. Кнопка «Обновить корзину» получает серый фон, который сливается с белым фоном страницы. Это лишает его приоритета.
3. «Применить купон» — это не кнопка, а текстовая ссылка, что делает его наименее важным действием из всех.