logo

Pablo Guides

כלים ומדריכים למפתחי אתרים ואפליקציות

How to display all WooCommerce products with a quantity field

To display all WooCommerce products with a quantity field on the front page and implement an AJAX add to cart button, you'll need to use a combination of HTML, JavaScript, and PHP. Below is an example of how you can achieve this. This example assumes that you have already set up WooCommerce on your WordPress site.

Step 1: Create a Custom Template

Create a custom template for your front page. Let's assume you want to use a custom page template named front-page-products.php.

<?php
/*
Template Name: Front Page Products
*/

get_header();

// Your custom query to get all WooCommerce products
$args = array(
    'post_type' => 'product',
    'posts_per_page' => -1,
);

$products = new WP_Query($args);

if ($products->have_posts()) :
    while ($products->have_posts()) : $products->the_post();
        global $product;

        // Output product information
        ?>
        <div class="product">
            <h2><?php the_title(); ?></h2>
            <div class="price"><?php echo $product->get_price_html(); ?></div>
            <input type="number" name="quantity" value="1" min="1">
            <button class="add-to-cart" data-product-id="<?php echo get_the_ID(); ?>">Add to Cart</button>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
else :
    echo 'No products found';
endif;

get_footer();
?>

Step 2: Add JavaScript for AJAX

Add the following JavaScript to handle the AJAX add to cart functionality. You can include this in your theme's functions.php file or create a separate JavaScript file.

jQuery(document).ready(function($) {
    // AJAX add to cart
    $('.add-to-cart').click(function(e) {
        e.preventDefault();

        var product_id = $(this).data('product-id');
        var quantity = $(this).siblings('input[name="quantity"]').val();

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'add_to_cart',
                product_id: product_id,
                quantity: quantity,
            },
            success: function(response) {
                // Update the cart widget
                $(document.body).trigger('added_to_cart');
                console.log(response);
            },
        });
    });
});

Step 3: Handle AJAX Request in Functions.php

Add the following code to handle the AJAX request in your theme's functions.php file.

// Add to cart AJAX
add_action('wp_ajax_add_to_cart', 'ajax_add_to_cart');
add_action('wp_ajax_nopriv_add_to_cart', 'ajax_add_to_cart');

function ajax_add_to_cart() {
    $product_id = $_POST['product_id'];
    $quantity = $_POST['quantity'];

    $cart_item_key = WC()->cart->add_to_cart($product_id, $quantity);

    if ($cart_item_key) {
        echo json_encode(array('status' => 'success', 'message' => 'Product added to cart'));
    } else {
        echo json_encode(array('status' => 'error', 'message' => 'Error adding product to cart'));
    }

    die();
}

Step 4: Style the Frontend

You may want to add some CSS to style your product display. Customize the styles based on your design preferences.

.product {
    margin-bottom: 20px;
}

.price {
    margin-bottom: 10px;
}

.add-to-cart {
    background-color: #4caf50;
    color: #fff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
}

Remember to adjust the code according to your theme's structure and styling preferences. This example provides a basic structure for displaying products with a quantity field and implementing an AJAX add to cart feature on the front page.
Facebook
Twitter
LinkedIn
Pablo Guides