Часто бывает что заказчику необходимо кастомизировать кнопку увеличения количества товара, да еще и чтобы при этом корзина обновлялась автоматически.
для этого нужно Перейти в папку / wp-content / plugins / woocommerce / templates / global и скопировать файл quantity-input.php в папку your-theme / woocommerce / global /
после чего его нужно отредактировать, ниже готовый код
<?php
/**
* Product quantity inputs
*
* This template can be overridden by copying it to yourtheme/woocommerce/global/quantity-input.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @package WooCommerceTemplates
* @version 7.4.0
*
* @var bool $readonly If the input should be set to readonly mode.
* @var string $type The input type attribute.
*/
defined( 'ABSPATH' ) || exit;
/* translators: %s: Quantity. */$label = ! empty( $args['product_name'] ) ? sprintf( esc_html__( '%s quantity', 'woocommerce' ), wp_strip_all_tags( $args['product_name'] ) ) : esc_html__( 'Quantity', 'woocommerce' );
?>
<div class="quantity">
<?php
/**
* Hook to output something before the quantity input field.
*
* @since 7.2.0
*/ do_action( 'woocommerce_before_quantity_input_field' );
?>
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
<button class="minus qty_button quantity-button.inc" >помимо этого нужно вставить в functions.php вашей темы код для обновления самой корзины после увеличения количества товара
// Обновление корзины при изменении колич.товара
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) : // Проверяем страница корзины это или нет
?>
<style>
/* Если хотим скрыть кнопку кнопку "Обновить". */ button[name="update_cart"]{display: none;}</style>
<script>
jQuery( function( $ ) {
$( 'body' ).on( 'change', '.qty', function() { // поле с количеством имеет класс .qty
setTimeout(function() {
$( '[name="update_cart"]' ).trigger( 'click' );
}, 1300 );
} );
$( 'body' ).on( 'click', '.quantity-button.inc, .quantity-button.dec', function() { // элементы инкремента/декремента
setTimeout(function() {
$( '[name="update_cart"]' ).trigger( 'click' );
}, 1300 );
} );
} );
</script>
<?php
endif;
}
// End Обновление корзины при изменении колич.товарану и конечно добавить CSS код для стилизации кастомных кнопок
<style>
.form-group--number {
max-width: 150px;
}
label.screen-reader-text {
display: none;
}
.form-group--number button {
border: none;
position: relative;
top: 6px;
right: 6px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 20px;
height: 20px;
max-width: 20px;
color: #222;
font-size: 30px;
background: none;
}
.input-text.qty.text {
top: -10px;
position: relative;
border: 0;
margin: 0;
padding: 0;
}
.form-group--number button.down {
left: 12px;
}
.form-group--number button.down:before {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
content: '';
width: 14px;
height: 1px;
background-color: #999;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
-moz-transform: translate(-50%, -50%) rotate(0deg);
-ms-transform: translate(-50%, -50%) rotate(0deg);
-o-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.form-group--number button.up {
right: 12px;
}
.form-group--number button.up:before, .form-group--number button.up:after {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
content: '';
width: 14px;
height: 1px;
background-color: #999;
}
.form-group--number button.up:before {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-moz-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg);
-o-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
.form-group--number button.up:after {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
-moz-transform: translate(-50%, -50%) rotate(0deg);
-ms-transform: translate(-50%, -50%) rotate(0deg);
-o-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.form-group--number .form-control {
border: 2px solid #eaeaea;
height: 45px;
padding: 0 25px;
font-size: 18px;
font-weight: 600;
text-align: center;
color: #222;
background-color: transparent;
}
.form-group--number input {
border-radius: 0;
}
</style>В эпоху стремительного развития цифровых технологий и массовой цифровизации общества, безопасность персональных данных становится вопросом…
В современном быстро меняющемся мире онлайн-торговли создание собственного интернет-магазина становится необходимостью для предпринимателей всех уровней.…
В современном мире, на фоне активного развития технологий и роста удаленной работы, все больше людей…
SMS-рассылки стали одним из наиболее эффективных способов связи и маркетинга в современном мире. С каждым…
В эпоху мировой глобализации интернет стал ключевым инструментом для расширения бизнеса за границей. Однако, чтобы…
В постоянно меняющемся ландшафте социальных сетей и платформ обмена сообщениями Telegram превратился в мощного игрока,…
Просмотр комментариев
спасибо. то что нужно было