WooCommerce 产品存档页面中自定义样式的“添加到购物车”按钮

Question

我已经替换了默认的按钮功能，因此我添加了一个新的功能。 尝试创建一个自定义 50px 圆圈“添加到购物车”按钮（fa-solid fa-cart-shopping 图标，#F5F5F5 背景，5px 填充，我希望将其放置在产品图像的左下角，边距为 10px。

我的存档模板是使用 Elementor 使用“产品存档”小部件制作的。我的单个产品模板也是用 Elementor 制作的，并使用“产品图像”小部件。

我想要得到什么

我想要的视觉示例

对于一些背景，我替换了存档的“添加到购物车”按钮文本和功能（将客户带到产品页面），这是我使用的代码。我通过代码片段插件激活了它。

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 '<a class="button wpt-custom-view-product-button" href="' . $product->get_permalink() . '">' . $button_text . '</a>';
}

我尝试过但没有成功：

我添加了自定义 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”。

<script>
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 = '<a class="custom-add-to-cart-btn" data-product-id="' + productId + '"><i class="fa fa-cart-shopping"></i></a>';
        $(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;
                }
            }
        });
    });
});
</script>

为了将自定义“添加到购物车”按钮添加到存档页面上的每个产品项目，我使用 JavaScript 代码将该按钮动态插入产品项目容器中。

<script>
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 = '<a class="custom-add-to-cart-btn" data-product-id="' + productId + '"><i class="fa fa-cart-shopping"></i></a>';
        $(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;
                }
            }
        });
    });
});
</script>

我将此 JavaScript 代码嵌入到添加到存档模板的 Elementor HTML 小部件中。这样做的目的是为存档页面上显示的每个产品项目动态插入自定义“添加到购物车”按钮。

尽管做出了这些努力，自定义的“添加到购物车”按钮并未出现在页面上的任何位置。

任何建议将不胜感激。

Answer 1

是否有更改单品页面上产品功能选择选项显示位置的功能？ 例如：https://freeimage.host/i/d55hftI