Хаки для кнопки добавить в корзину WooCommerce
Хочу рассмотреть некоторые интересные хаки, связанные с задачей добавления товара в корзину WooCommerce. Ранее вы уже могли видеть некоторые посты по настройке страницы корзины или ее автоматическом обновлении, а сегодня заметка будет больше касаться самой кнопки Add to Cart (и всего, что происходит при взаимодействии с ней). В частности, попробуем добавить сообщение при нажатии на произвольной страничке и заменить линк с нее на URL полного описания товара. Все эти решения тестировал лично, однако со временем некоторые из них (из-за версии модуля магазина) могут не срабатывать. Начну пока что с парочки сниппетов, а дальше по возможности буду данную заметку обновлять.
Изменяем ссылку добавления в корзину
По умолчанию в магазине для товаров вместе с заголовком, ценой, картинкой отображается также ссылка/иконка с функцией добавления товара в корзину. В настройках WooCommerceвы можете задать разные варианты поведения для нее:
Но иногда при клике на кнопку требуется перенаправление посетителей на страничку с описанием товара. Теоретически это можно сделать через правку файлов макета, если он позволяет такое реализовать. Однако правильнее и логичнее внести изменения с помощью хуков.
В файл темы custom-function.php, function.php или любой другой, где у вас расположены хаки для темы, добавляете строки:
1 2 3 4 5 | add_filter( 'woocommerce_loop_add_to_cart_link', 'custom_product_link' ); function custom_product_link( $link ) { global $product; echo '<a href="'.esc_url( $product->get_permalink( $product->id )).'" class="button product_type_simple add_to_cart_button">Подробнее</a>'; } |
Таким образом, вы сможете изменить кнопку добавить в корзину Woocommerce на свою. Вместо указанного class подставляйте те значения, которые используются в вашей теме дабы не пришлось дополнительный раз править CSS стили. Текст «Подробнее» тоже заменяем, хотя обычно он вообще не отображается, а подменяется на иконку.
Сообщение о добавлении товара на произвольной странице
В WooCommerce вы можете использовать шорткоды отображения списка товаров (новых, популярных, по ID) на любой странице сайта. Однако при этом кнопка добавить в корзину WooCommerce (Add to Cart) свою функцию выполняет, но никакое сообщение не показывает. А, по идее, должно быть что-то вроде следующей картинки:
Дабы это исправить первым делом определите файл шаблона, который отвечает за вывод информации на нужной странице. Как правило, он называется page.php, хотя может иметь и другие значения, например page-home.php (для главной), page-fullwidth.php (для широкоформатной) и т.п.
Далее в коде выбранного файла добавляем одну из двух следующих строк на выбор:
1 | <?php wc_print_notices();?> |
или
1 | <?php do_action( 'woocommerce_before_single_product' ); ?> |
После этого загружаете новую версию на FTP и проверяете показ сообщения после добавления товара в корзину WooCommerce. Я пробовал оба варианта кода — все работало хорошо.