Tag: woocommerce

  • Manage WooCommerce Store Completely From the Frontend

    Manage WooCommerce Store Completely From the Frontend

    Have you ever wished you could run your own/client WooCommerce store without ever logging into the WordPress admin?

    If you’ve handed your store over to a shop manager — or you’re the owner who just wants to add a product and check today’s sales without wading through menus, plugins, and settings you don’t need — the standard WooCommerce admin can feel like a lot. Too many screens. Too much clutter. Too many places a non-technical team member can accidentally break something.

    That’s exactly the problem StoreSuite sets out to solve. It gives you a clean, modern frontend dashboard where you (and your team) can manage everything — products, orders, coupons, categories, and analytics — from one place. No wp-admin. No clutter. Just your store.

    And here’s the part most people don’t expect: StoreSuite ships features for free that other store-management dashboards usually lock behind a Pro plan — including AI content and image generation, full variable product support, real-time analytics, and CSV export. Let’s walk through it.



    What is StoreSuite?

    StoreSuite is a WordPress plugin that adds a frontend store-management dashboard to your WooCommerce shop. Instead of giving your team access to the WordPress backend, you give them a single page on your own site where they can do everything day-to-day:

    • Add and edit products (every type — simple, variable, grouped, external)
    • View, create, and edit orders
    • Build and manage coupons
    • Organize categories, tags, brands, and attributes
    • Watch real-time sales numbers and leaderboards
    • Generate product titles, descriptions, and images with AI

    It requires WooCommerce, it’s fully compatible with WooCommerce HPOS (High-Performance Order Storage), and access is gated by the manage_woocommerce capability — so only administrators and shop managers get in.

    StoreSuite frontend dashboard



    Why Manage Your Store From the Frontend?

    A quick honest list of why this matters:

    • Less risk. Your shop manager/owner never sees plugin settings, theme files, or anything they could break. They see your store — nothing else.
    • Less clutter. No third-party plugin notices, no unrelated admin menus. StoreSuite even strips out theme and conflicting plugin styles on its own pages so the dashboard stays clean and fast.
    • Faster work. Everything is one or two clicks away. Add a product, check an order, spin up a coupon — without hunting through the backend.

    Now let’s look at what you can actually do.



    1. A Dashboard That Shows Your Store at a Glance

    Log in, land on the dashboard, and within a few seconds you know how your store is doing. That’s the whole idea.

    The dashboard home greets you with your store’s pulse — a row of performance boxes showing the numbers that matter: net sales, orders, average order value, returns, discounts, and products sold. Each box carries a small percentage badge so you can see how today compares to yesterday (or this month vs. last month, or this December vs. last December — your choice).

    Below that sits a net-sales chart you can switch between line and bar views and group by day, week, or month. Then come the leaderboards — top products, top categories, top customers, top coupons — and a Recent Orders table so you can spot anything that needs attention.

    Finally, a Quick Actions grid gives you one-click shortcuts to the things you do most: add a product, view orders, create a coupon, and more.



    2. Complete Product Management

    This is where most store owners spend their time, and StoreSuite makes it effortless.

    Products list in StoreSuite

    The Products list is your home base. Every product appears in a clean table with its image, name, category, status, SKU, a color-coded stock badge, price (with the old price crossed out on sale items), and type. From here you can:

    • Search any product by name instantly
    • Filter by category, product type, stock status, or brand — and combine them (for example, out-of-stock products in the Clothing category)
    • Quick edit the basics (name, price, stock, status) right from the list
    • Use bulk actions to edit, trash, or export many products at once



    Add or edit any product type

    StoreSuite handles every WooCommerce product type — simple, variable, grouped, and external/affiliate. The add/edit form walks you through everything top to bottom, but only the title is truly required, so you can start simple and polish later.

    You get full control over pricing (including scheduled sales that turn themselves on and off), inventory with low-stock thresholds and backorders, shipping, upsells and cross-sells, catalog visibility, and more.

    Editing a variable product

    Variable products get special love: manage attributes and variations, run bulk actions, and use generate-all-variations to create every size/color combination in one click — something many “free” dashboards simply don’t offer.



    3. AI That Writes and Designs For You

    Here’s StoreSuite’s standout feature — and it’s completely free.

    Writing product descriptions is the part most store owners dread. StoreSuite hands it to AI:

    • Per-field generation — a “Generate with AI” button on the product title, short description, and long description. Each one opens an editable suggestion you can tweak, regenerate, or step through previous suggestions with a history pager.
    • All-in-one generator — type a single hint and StoreSuite drafts the title, short description, and long description together.
    • AI image generation — describe a featured or gallery image, preview it, regenerate, and drop it straight into your media library.

    AI settings page

    You stay in control with a dedicated AI settings page, where you can turn generation on or off per field and set your own custom instructions for each text field and for images.

    StoreSuite uses a “bring your own AI” approach — it’s built on the WordPress 7.0 core AI connector, so generation runs on the provider and keys you configure. (If your site is on an older WordPress version, the AI features simply hide themselves.)



    4. Full Order Management

    Orders list in StoreSuite

    Orders are front and center. From the Orders section you can:

    • View every order with its number, customer, date, total, and a color-coded status badge
    • Open any order to see full customer and line-item details
    • Create a new order by hand — perfect for phone or in-person sales
    • Edit existing orders when something needs changing

    Because StoreSuite is HPOS-compatible, it works smoothly even on high-volume stores using WooCommerce’s modern order storage.



    5. Coupons, Categories, Tags, Brands & Attributes

    Everything that keeps your catalog organized is here too.

    Coupons in StoreSuite

    • Coupons — create, edit, and manage WooCommerce discount codes with all the usual rules.
    • Categories, Tags, and Brands — add, edit, and list them without leaving the dashboard. The lists even refresh instantly if changes are made elsewhere (admin, REST API, an import).
    • Product Attributes — manage attributes and their terms, ready to power your variable products.

    To keep the sidebar tidy, Categories, Brands, and Tags are neatly nested under the Products menu.



    6. Export Your Products to CSV

    Need your catalog for reporting, accounting, or migrating to another store? StoreSuite includes CSV product export with a configurable export modal — select what you need and download it. Again, free, no upsell.



    7. Make It Your Own

    StoreSuite admin settings

    From WooCommerce → StoreSuite in your WordPress admin, you can shape the dashboard to fit your brand and workflow:

    • Branding — add a sidebar logo (expanded) and a sidebar icon (collapsed) from the media library.
    • Color palettes — choose a predefined palette or build a custom one with live preview.
    • Dashboard widgets — switch performance boxes and leaderboards on or off; show eight meaningful numbers instead of fifteen noisy ones.
    • Pagination — control how many items show per page on each list.

    There’s also a collapsible sidebar that toggles between a full menu and a slim icon-only rail, with your preference remembered in the browser.



    How to Get Started

    Setting up StoreSuite takes about two minutes:

    1. Install and activate WooCommerce (if you haven’t already).
    2. Install and activate StoreSuite from Plugins → Add New (search “StoreSuite”).
    3. On activation, StoreSuite automatically creates a dashboard page with the You have no permission to view this page shortcode and selects it for you. If it didn’t, create a page, add the shortcode, and publish.
    4. Go to WooCommerce → StoreSuite → General and confirm your dashboard page is selected, then Save Changes.
    5. Visit that page while logged in with store-management permissions — and you’re managing your store from the frontend.

    If a dashboard URL ever returns a 404, just go to Settings → Permalinks and click Save Changes to refresh the routes.



    Final Thoughts

    Running a WooCommerce store shouldn’t mean living inside the WordPress admin. StoreSuite gives you and your team a clean, fast, frontend home for everything that matters — products, orders, coupons, your whole catalog, and real-time analytics — plus AI that writes your descriptions and creates your images.

    And it does all of it with no feature gates, no trial limits, and no upsell. The premium-grade tools other dashboards charge for are simply included.

    If you’ve been looking for the easiest way to manage your WooCommerce shop completely from the frontend, give StoreSuite a try — your morning store check-in is about to get a whole lot shorter.

    Get StoreSuite free from the WordPress plugin directory →

  • How to Implement a WooCommerce AJAX Direct “Buy Now” Button

    How to Implement a WooCommerce AJAX Direct “Buy Now” Button

    When you’re running an online store using WooCommerce, making the purchasing process as seamless as possible is crucial. One effective way to do this is by adding a “Buy Now” button that allows customers to directly purchase a product without navigating through multiple pages. This blog will walk you through creating a WooCommerce AJAX “Buy Now” button using the provided code snippets.



    Step 1: Add the “Buy Now” Button

    First, you need to add a custom “Buy Now” button on your WooCommerce product pages. We’ll do this by hooking into the woocommerce_after_add_to_cart_button action, which places our button right after the standard “Add to Cart” button.

    Here’s the PHP code snippet:

    add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
    function add_content_after_addtocart() {
        $current_product_id = get_the_ID();
        $product = wc_get_product( $current_product_id );
    
        if( $product->is_type( 'simple' ) ){
            echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>';
        }
    }
    
    Enter fullscreen mode

    Exit fullscreen mode

    Explanation:

    • We use the woocommerce_after_add_to_cart_button hook to insert our “Buy Now” button right after the “Add to Cart” button.
    • The get_the_ID() function retrieves the current product ID, and wc_get_product() gets the product details.
    • We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.



    Step 3: Enqueue the Script

    Next, you need to enqueue the script in your theme to ensure it’s loaded properly on your WooCommerce pages. Here’s how to do it:

    wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);
    
    wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
        array( 
            'checkout_page_url' => wc_get_checkout_url(),
        )
    );
    
    Enter fullscreen mode

    Exit fullscreen mode

    Explanation:

    • wp_enqueue_script() is used to load our custom script file (script.js), which contains the jQuery code.
    • wp_localize_script() passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.



    Step 2: Handle the AJAX Request

    Finally, we’ll handle the button click event using jQuery. The jQuery script sends an AJAX request to WooCommerce, which adds the product to the cart and then redirects the user directly to the checkout page.

    Here’s the jQuery code snippet:

    (function ($) {
        var MaticoChildThemeConfig = {
            init: function () {
                this.bindEvents();
            },
            bindEvents: function () {
                $(document).on('click', '.buy-now', this.handleBuyNowClick);
            },
            handleBuyNowClick: function (event) {
                event.preventDefault();
    
                var $button = $(this),
                    quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
                    productID = $button.data('id');
    
                var data = {
                    product_id: productID,
                    quantity: quantity,
                };
    
                $.ajax({
                    type: 'POST',
                    url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
                    data: data,
                    dataType: 'json',
                    beforeSend: function () {
                        $button.addClass('loading');
                    },
                    success: function (res) {
                        if (res.error && res.product_url) {
                            window.location.href = res.product_url;
                        } else {
                            window.location.href = matico_child_script_obj.checkout_page_url;
                        }
                    }
                });
            }
        };
    
        MaticoChildThemeConfig.init();
    })(jQuery);
    
    Enter fullscreen mode

    Exit fullscreen mode

    Explanation:

    • When the “Buy Now” button is clicked, we prevent the default action to avoid page reload.
    • We gather the product ID and quantity from the current product page.
    • An AJAX request is sent to WooCommerce’s add_to_cart endpoint, which adds the product to the cart.
    • If the product is successfully added, we redirect the user to the checkout page. If there’s an error (e.g., the product is no longer available), the user is redirected to the product page.



    Conclusion

    By implementing the above steps, you can create a “Buy Now” button that streamlines the purchasing process for your customers. This feature is particularly useful in boosting conversions by reducing the number of clicks and pages a customer needs to navigate before completing a purchase.