Кнопка «Добавить в корзину» в индивидуальном стиле на страницах архива продуктов WooCommerce [закрыто] ⇐ CSS

[Anonymous]

Я заменил функцию кнопки по умолчанию, поэтому добавляю новую.
Пытаюсь создать собственную кнопку «Добавить в корзину» в виде кружка размером 50 пикселей (значок fa-solid fa-cart-shopping, # Фон F5F5F5, отступы 5 пикселей, я хочу, чтобы он размещался в левом нижнем углу изображений продуктов с полями 10 пикселей.
Мой шаблон архива создан с помощью Elementor с использованием виджета «Архив продукта». Мой шаблон одного продукта также создан с помощью Elementor и использует виджет «Изображения продукта».
Что я пытаюсь получить
Наглядный пример того, что я собираюсь сделать
Для общего фона я заменил текст и функцию архивной кнопки «Добавить в корзину» (чтобы перенаправить клиентов на страницу продукта), и это код, который я использовал. Я активировал его через плагин Code Snippets.

Код: Выделить всё

add_filter( 'woocommerce_product_single_add_to_cart_text', 'woocommerce_custom_single_add_to_cart_text' );
function woocommerce_custom_single_add_to_cart_text() {
return __( 'Buy Now', 'woocommerce' );
}

add_filter( 'woocommerce_loop_add_to_cart_link', 'wpt_custom_view_product_button', 10, 2 );
function wpt_custom_view_product_button( $button, $product  ) {
// Ignore for variable products
//if( $product->is_type( 'variable' ) ) return $button;

$button_text = __( "Product Info", "woocommerce" );
return '' . $button_text . '';
}

Что я пробовал, но не получилось:
Я добавил собственный CSS (в разделе «Внешний вид» > «Настроить» > «Добавить собственный CSS»), чтобы стилизовать элемент «Добавить в корзину".

Код: Выделить всё

.custom-add-to-cart-btn {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 99;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #F5F5F5;
padding: 5px;
text-align: center;
line-height: 40px;
box-sizing: border-box;
cursor: pointer;
}

.custom-add-to-cart-btn i {
font-size: 24px;
color: #000;
}

Я добавил код JavaScript для обработки события нажатия на пользовательской кнопке «Добавить в корзину». Этот код запускает действие добавления в корзину и выполняет запрос AJAX для добавления продукта в корзину. Я добавил код с помощью плагина «Code Snippets Pro» и выбрал «Загрузить JS в конце раздела».

Код: Выделить всё

jQuery(document).ready(function($) {
// Add custom "Add to Cart" button to each product item
$('.elementor-widget-archive-products .elementor-archive__item').each(function() {
var productId = $(this).find('[data-product-id]').data('product-id');
var buttonHtml = '[i][/i]';
$(this).find('.elementor-image').append(buttonHtml);
});

// Click event handler for custom "Add to Cart" button
$(document).on('click', '.custom-add-to-cart-btn', function(e) {
e.preventDefault();
var productId = $(this).data('product-id');

// Trigger add to cart action
$(document.body).trigger('adding_to_cart', [$(this), productId]);

// AJAX add to cart
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: {
'action': 'woocommerce_ajax_add_to_cart',
'product_id': productId,
},
success: function(response) {
if (response.error && response.product_url) {
window.location = response.product_url;
} else {
// Redirect to cart page
window.location = wc_add_to_cart_params.cart_url;
}
}
});
});
});

Чтобы добавить специальную кнопку «Добавить в корзину» к каждому товару на странице архива, я использовал код JavaScript для динамической вставки кнопки в контейнеры товаров.

Код: Выделить всё

jQuery(document).ready(function($) {
// Add custom "Add to Cart" button to each product item
$('.elementor-widget-archive-products .elementor-archive__item').each(function() {
var productId = $(this).find('[data-product-id]').data('product-id');
var buttonHtml = '[i][/i]';
$(this).find('.elementor-image').append(buttonHtml);
});

// Click event handler for custom "Add to Cart" button
$(document).on('click', '.custom-add-to-cart-btn', function(e) {
e.preventDefault();
var productId = $(this).data('product-id');

// Trigger add to cart action
$(document.body).trigger('adding_to_cart', [$(this), productId]);

// AJAX add to cart
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.ajax_url,
data: {
'action': 'woocommerce_ajax_add_to_cart',
'product_id': productId,
},
success: function(response) {
if (response.error && response.product_url) {
window.location = response.product_url;
} else {
// Redirect to cart page
window.location = wc_add_to_cart_params.cart_url;
}
}
});
});
});

Я встроил этот код JavaScript в HTML-виджет Elementor, который добавил в шаблон архива. Это было предназначено для динамической вставки специальной кнопки «Добавить в корзину» для каждого товара, отображаемого на странице архива.
Несмотря на эти усилия, пользовательская кнопка «Добавить в корзину» не сработала. появляться в любом месте страницы.
Любые советы будут высоко оценены.

Подробнее здесь: https://stackoverflow.com/questions/782 ... hive-pages