Добавить дополнительную кнопку "Оформить заказ" рядом с кнопкой "В корзину" на странице товара WooCommerce

Question

Добавить дополнительную кнопку "Оформить заказ" рядом с кнопкой "В корзину" на странице товара WooCommerce

28 июн. 2017 г., 15:44:41

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

Голосов: 2

Я пытаюсь найти функцию, которая добавит ДОПОЛНИТЕЛЬНУЮ кнопку рядом со стандартной кнопкой "В корзину" на странице товара WooCommerce.

Я добавил папку woocommerce в дочернюю тему для модификации single-product => add-to-cart => simple.php
Внутри simple.php я нашел стандартную кнопку "В корзину", и после нее я хочу добавить свою дополнительную кнопку "Оформить заказ"

Я нашел такую функцию:

function woo_redirect_to_checkout() {
    $checkout_url = WC()->cart->get_checkout_url();
    return $checkout_url;
}

Которая работает нормально, НО она модифицирует ВСЕ кнопки "В корзину" на сайте, а я пытаюсь добавить её ТОЛЬКО к новой пользовательской кнопке, которую я пытаюсь добавить (Новая кнопка оформления заказа). Мне удалось добавить кнопку, которая перенаправляет на страницу оформления заказа, но она не добавляет товар в корзину перед переходом на страницу оформления заказа

Кто-нибудь знает, как добавить НОВУЮ кнопку + эта кнопка должна не только переходить на страницу оформления заказа, но и одновременно запускать действие "Добавить в корзину"

Спасибо

gil hamer

671

woocommerce offtopic

Комментарии

Можете объяснить подробнее, зачем вам нужна вторая кнопка оформления заказа (вместо использования стандартной)?

Jami Gibbs

28 июн. 2017 г. 15:48:42

Это требование клиента... Он хочет дополнительную кнопку, которая будет перенаправлять покупателей сразу на страницу оформления заказа

gil hamer

28 июн. 2017 г. 16:26:22

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

Комментарии

Спасибо @LWS-Mo, всё работает отлично. Я понимаю, что использование вариаций намного сложнее, потому что цена устанавливается в зависимости от выбора пользователя. Большое спасибо!

gil hamer

28 июн. 2017 г. 18:08:20

Можно ли как-то добавить и количество? Сейчас это работает только с единичным товаром. Спасибо.

gil hamer

28 июн. 2017 г. 19:45:25

@gilhamer Я отредактировал ответ и добавил jQuery-код для добавления количества. Поскольку это не так просто (нам нужно получить текущее значение поля ввода количества), нам пришлось использовать JS.

LWS-Mo

30 июн. 2017 г. 15:00:51

Спасибо, друг (y)

Mohammad Arif

27 сент. 2020 г. 15:30:33

Только что зашел сюда, чтобы поделиться своим кодом, который помог мне решить проблему клиента с двумя кнопками - одна для оформления заказа, другая для добавления в корзину. Я использовал другой подход, который также работает с вариативными товарами.

function wpcoderpro_direct_checkout_button() {
global $product;
$id = $product->get_id();
if( $product->is_type( 'variable' ) ){
    echo '
<script>
jQuery(document).ready(function($){
  $(".redirect_to_checkout").click(function(){
  $("button.single_add_to_cart_button ").click();
  window.location.href="/checkout/";
  });
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;">ОФОРМИТЬ ЗАКАЗ</div>
';
}
elseif( $product->is_type( 'simple' ) ){
  echo '
<script>
jQuery(document).ready(function($){
$(".input-text.qty").change(function(){
  $(".redirect_to_checkout a").attr("href", "/checkout/?add-to-cart='. $id .'" + "&quantity= " + $(this).val());
});
});
</script>
<div class="button alt redirect_to_checkout" style="cursor:pointer;"><a href="/checkout/?add-to-cart='. $id .'">ОФОРМИТЬ ЗАКАЗ</a></div>
';
}
}
add_action( 'woocommerce_after_add_to_cart_button', 'wpcoderpro_direct_checkout_button', 20 );

Обратите внимание, что я использую плагин для AJAX добавления в корзину для вариативных товаров, но не использую AJAX добавление в корзину для простых товаров.

Код нужно добавить в файл function.php вашей дочерней темы. Дайте знать, если нужно объяснение :)

Afnan abbasi

91

20 авг. 2019 г. 22:54:22

LWS-Mo 1.59K · Accepted Answer · 2017-06-28T17:47:42Z

Вам не нужно изменять файлы шаблона для этого, вместо этого вы можете использовать хук WooCommerce woocommerce_after_add_to_cart_button. Этот хук добавит контент после кнопки "Добавить в корзину".

Если клиент нажимает на эту кнопку, товар должен быть добавлен в корзину, и клиент должен быть перенаправлен на страницу оформления заказа, верно?!

По сути, вы можете добавлять товары в корзину с помощью ссылки такого вида:

http://example.com/cart/?add-to-cart=<ID товара>

Таким образом, используя хук, упомянутый выше, и учитывая этот URL, мы можем добавить вторую кнопку с помощью этого сниппета:

function add_content_after_addtocart() {

    // получаем текущий ID поста/товара
    $current_product_id = get_the_ID();

    // получаем товар на основе ID
    $product = wc_get_product( $current_product_id );

    // получаем URL страницы оформления заказа
    $checkout_url = WC()->cart->get_checkout_url();

    // выполняем только для простых товаров
    if( $product->is_type( 'simple' ) ){
        echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="single_add_to_cart_button button alt">Оформить заказ</a>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );

Это добавит кнопку после обычной кнопки "Добавить в корзину" на страницах отдельных товаров. Как вы можете видеть, я также добавил проверку, является ли текущий товар простым или нет. Если вы хотите использовать это с вариациями, это сложнее. Для таких товаров необходимо сгенерировать URL вида:

http://example.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black

Возможно, вам также потребуется проверить стандартную опцию WooCommerce Включить AJAX добавление в корзину (WooCommerce > Товары > Отображение). Я не тестировал это с данной настройкой.

Обновление для включения количества

Если вы хотите добавить количество, вы также можете добавить параметр к URL нашей кнопки, например:

http://example.com/cart/?add-to-cart=<ID товара>&quantity=<количество>

Однако, поскольку клиент может изменить количество с помощью поля ввода WooCommerce, нам нужен способ получить текущее значение этого поля.

Таким образом, у нас есть несколько вариантов:

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

Следующий код использует второй подход: параметр добавляется только при нажатии кнопки.

Внутри функции if( $product->is_type( 'simple' ) ), перед выводом, вставьте этот скрипт:

<script>
    jQuery(function($) {
    <?php /* если наша кастомная кнопка нажата, добавляем строку "&quantity=", а также количество к URL */ ?>

        // если наша кастомная кнопка нажата
        $(".custom-checkout-btn").on("click", function() {

            // получаем значение атрибута "href"
            $(this).attr("href", function() {
                // возвращаем значение "href" + строку "&quantity=" + текущее выбранное количество
                return this.href + '&quantity=' + $('input.qty').val();
            });

        });
    });
    </script>

Я не включил открывающие и закрывающие PHP-теги в коде выше! Поэтому вам нужно завершить PHP перед скриптом (?>) и начать его снова после скрипта (