[{"data":1,"prerenderedAt":471},["ShallowReactive",2],{"blog-tag-wordpress":3,"blog-tag-posts-wordpress":32},{"id":4,"count":5,"description":6,"link":7,"name":8,"slug":8,"taxonomy":9,"meta":10,"_links":11},18,7,"","https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fwordpress\u002F","wordpress","post_tag",[],{"self":12,"collection":18,"about":21,"wp:post_type":24,"curies":27},[13],{"href":14,"targetHints":15},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F18",{"allow":16},[17],"GET",[19],{"href":20},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[22],{"href":23},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[25],{"href":26},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=18",[28],{"name":29,"href":30,"templated":31},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",true,[33,117,178,240,300,360,416],{"id":34,"date":35,"date_gmt":35,"guid":36,"modified":38,"modified_gmt":38,"slug":39,"status":40,"type":41,"link":37,"title":42,"content":44,"excerpt":47,"author":49,"featured_media":50,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":53,"categories":54,"tags":55,"class_list":59,"post_image_original":71,"devto_meta":72,"_links":78},100,"2026-06-16T10:22:14",{"rendered":37},"https:\u002F\u002Fportal.pluginizelab.com\u002Fmanage-woocommerce-store-completely-from-the-frontend\u002F","2026-08-17T12:17:35","manage-woocommerce-store-completely-from-the-frontend","publish","post",{"rendered":43},"Manage WooCommerce Store Completely From the Frontend",{"rendered":45,"protected":46},"\u003Cp>Have you ever wished you could run your own\u002Fclient WooCommerce store without ever logging into the WordPress admin?\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>That’s exactly the problem \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">StoreSuite\u003C\u002Fa>\u003C\u002Fstrong> sets out to solve. It gives you a clean, modern \u003Cstrong>frontend dashboard\u003C\u002Fstrong> where you (and your team) can manage everything — products, orders, coupons, categories, and analytics — from one place. No \u003Ccode>wp-admin\u003C\u002Fcode>. No clutter. Just your store.\u003C\u002Fp>\n\u003Cp>And here’s the part most people don’t expect: \u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">StoreSuite\u003C\u002Fa> ships features for \u003Cstrong>free\u003C\u002Fstrong> that other store-management dashboards usually lock behind a Pro plan — including \u003Cstrong>AI content and image generation\u003C\u002Fstrong>, full \u003Cstrong>variable product\u003C\u002Fstrong> support, \u003Cstrong>real-time analytics\u003C\u002Fstrong>, and \u003Cstrong>CSV export\u003C\u002Fstrong>. Let’s walk through it.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"what-is-storesuite\" href=\"#what-is-storesuite\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  What is StoreSuite?\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>StoreSuite is a WordPress plugin that adds a \u003Cstrong>frontend store-management dashboard\u003C\u002Fstrong> 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:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Add and edit products (every type — simple, variable, grouped, external)\u003C\u002Fli>\n\u003Cli>View, create, and edit orders\u003C\u002Fli>\n\u003Cli>Build and manage coupons\u003C\u002Fli>\n\u003Cli>Organize categories, tags, brands, and attributes\u003C\u002Fli>\n\u003Cli>Watch real-time sales numbers and leaderboards\u003C\u002Fli>\n\u003Cli>Generate product titles, descriptions, and images with AI\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>It requires WooCommerce, it’s fully compatible with \u003Cstrong>WooCommerce HPOS\u003C\u002Fstrong> (High-Performance Order Storage), and access is gated by the \u003Ccode>manage_woocommerce\u003C\u002Fcode> capability — so only administrators and shop managers get in.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uo4z0ag7qwqdx9u1qn1.jpg\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8uo4z0ag7qwqdx9u1qn1.jpg\" alt=\"StoreSuite frontend dashboard\" loading=\"lazy\" width=\"800\" height=\"572\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"why-manage-your-store-from-the-frontend\" href=\"#why-manage-your-store-from-the-frontend\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Why Manage Your Store From the Frontend?\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>A quick honest list of why this matters:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Less risk.\u003C\u002Fstrong> Your shop manager\u002Fowner never sees plugin settings, theme files, or anything they could break. They see your store — nothing else.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Less clutter.\u003C\u002Fstrong> 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.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Faster work.\u003C\u002Fstrong> Everything is one or two clicks away. Add a product, check an order, spin up a coupon — without hunting through the backend.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Now let’s look at what you can actually do.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"1-a-dashboard-that-shows-your-store-at-a-glance\" href=\"#1-a-dashboard-that-shows-your-store-at-a-glance\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  1. A Dashboard That Shows Your Store at a Glance\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Log in, land on the dashboard, and within a few seconds you know how your store is doing. That’s the whole idea.\u003C\u002Fp>\n\u003Cp>The dashboard home greets you with your store’s pulse — a row of \u003Cstrong>performance boxes\u003C\u002Fstrong> showing the numbers that matter: net sales, orders, average order value, returns, discounts, and products sold. Each box carries a small \u003Cstrong>percentage badge\u003C\u002Fstrong> so you can see how today compares to yesterday (or this month vs. last month, or this December vs. last December — your choice).\u003C\u002Fp>\n\u003Cp>Below that sits a \u003Cstrong>net-sales chart\u003C\u002Fstrong> you can switch between line and bar views and group by day, week, or month. Then come the \u003Cstrong>leaderboards\u003C\u002Fstrong> — top products, top categories, top customers, top coupons — and a \u003Cstrong>Recent Orders\u003C\u002Fstrong> table so you can spot anything that needs attention.\u003C\u002Fp>\n\u003Cp>Finally, a \u003Cstrong>Quick Actions\u003C\u002Fstrong> grid gives you one-click shortcuts to the things you do most: add a product, view orders, create a coupon, and more.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"2-complete-product-management\" href=\"#2-complete-product-management\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  2. Complete Product Management\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>This is where most store owners spend their time, and StoreSuite makes it effortless.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6w8iluoqlfk3eghvh26.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm6w8iluoqlfk3eghvh26.png\" alt=\"Products list in StoreSuite\" loading=\"lazy\" width=\"800\" height=\"357\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>The \u003Cstrong>Products\u003C\u002Fstrong> list is your home base. Every product appears in a clean table with its image, name, category, status, SKU, a color-coded \u003Cstrong>stock badge\u003C\u002Fstrong>, price (with the old price crossed out on sale items), and type. From here you can:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Search\u003C\u002Fstrong> any product by name instantly\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Filter\u003C\u002Fstrong> by category, product type, stock status, or brand — and combine them (for example, \u003Cem>out-of-stock products in the Clothing category\u003C\u002Fem>)\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Quick edit\u003C\u002Fstrong> the basics (name, price, stock, status) right from the list\u003C\u002Fli>\n\u003Cli>Use \u003Cstrong>bulk actions\u003C\u002Fstrong> to edit, trash, or export many products at once\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>\n  \u003Ca name=\"add-or-edit-any-product-type\" href=\"#add-or-edit-any-product-type\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Add or edit any product type\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>StoreSuite handles every WooCommerce product type — \u003Cstrong>simple, variable, grouped, and external\u002Faffiliate\u003C\u002Fstrong>. The add\u002Fedit form walks you through everything top to bottom, but only the title is truly required, so you can start simple and polish later.\u003C\u002Fp>\n\u003Cp>You get full control over pricing (including \u003Cstrong>scheduled sales\u003C\u002Fstrong> that turn themselves on and off), inventory with low-stock thresholds and backorders, shipping, upsells and cross-sells, catalog visibility, and more.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F123fazo35zk7bv8akvpl.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F123fazo35zk7bv8akvpl.png\" alt=\"Editing a variable product\" loading=\"lazy\" width=\"800\" height=\"378\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Variable products\u003C\u002Fstrong> get special love: manage attributes and variations, run bulk actions, and use \u003Cstrong>generate-all-variations\u003C\u002Fstrong> to create every size\u002Fcolor combination in one click — something many “free” dashboards simply don’t offer.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"3-ai-that-writes-and-designs-for-you\" href=\"#3-ai-that-writes-and-designs-for-you\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  3. AI That Writes and Designs For You\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Here’s StoreSuite’s standout feature — and it’s completely free.\u003C\u002Fp>\n\u003Cp>Writing product descriptions is the part most store owners dread. StoreSuite hands it to AI:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Per-field generation\u003C\u002Fstrong> — a “Generate with AI” button on the product \u003Cstrong>title\u003C\u002Fstrong>, \u003Cstrong>short description\u003C\u002Fstrong>, and \u003Cstrong>long description\u003C\u002Fstrong>. Each one opens an editable suggestion you can tweak, \u003Cstrong>regenerate\u003C\u002Fstrong>, or step through previous suggestions with a \u003Cstrong>history pager\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>All-in-one generator\u003C\u002Fstrong> — type a single hint and StoreSuite drafts the title, short description, and long description together.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>AI image generation\u003C\u002Fstrong> — describe a featured or gallery image, preview it, regenerate, and drop it straight into your media library.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fccqpdguiz8bv6g5gbknm.png\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fccqpdguiz8bv6g5gbknm.png\" alt=\"AI settings page\" loading=\"lazy\" width=\"799\" height=\"486\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>You stay in control with a dedicated \u003Cstrong>AI settings page\u003C\u002Fstrong>, where you can turn generation on or off per field and set your own custom instructions for each text field and for images.\u003C\u002Fp>\n\u003Cp>StoreSuite uses a \u003Cstrong>“bring your own AI”\u003C\u002Fstrong> approach — it’s built on the WordPress 7.0 core AI connector, so generation runs on the provider and keys \u003Cem>you\u003C\u002Fem> configure. (If your site is on an older WordPress version, the AI features simply hide themselves.)\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"4-full-order-management\" href=\"#4-full-order-management\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  4. Full Order Management\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymbhm77urgi62tjo7uch.jpg\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymbhm77urgi62tjo7uch.jpg\" alt=\"Orders list in StoreSuite\" loading=\"lazy\" width=\"799\" height=\"435\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Orders are front and center. From the \u003Cstrong>Orders\u003C\u002Fstrong> section you can:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>View every order with its number, customer, date, total, and a color-coded \u003Cstrong>status badge\u003C\u002Fstrong>\n\u003C\u002Fli>\n\u003Cli>Open any order to see full customer and line-item details\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Create a new order\u003C\u002Fstrong> by hand — perfect for phone or in-person sales\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Edit\u003C\u002Fstrong> existing orders when something needs changing\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Because StoreSuite is \u003Cstrong>HPOS-compatible\u003C\u002Fstrong>, it works smoothly even on high-volume stores using WooCommerce’s modern order storage.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"5-coupons-categories-tags-brands-amp-attributes\" href=\"#5-coupons-categories-tags-brands-amp-attributes\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  5. Coupons, Categories, Tags, Brands & Attributes\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Everything that keeps your catalog organized is here too.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqzcugnez3hl27y63gddm.jpg\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqzcugnez3hl27y63gddm.jpg\" alt=\"Coupons in StoreSuite\" loading=\"lazy\" width=\"799\" height=\"435\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Coupons\u003C\u002Fstrong> — create, edit, and manage WooCommerce discount codes with all the usual rules.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Categories, Tags, and Brands\u003C\u002Fstrong> — add, edit, and list them without leaving the dashboard. The lists even refresh instantly if changes are made elsewhere (admin, REST API, an import).\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Product Attributes\u003C\u002Fstrong> — manage attributes and their terms, ready to power your variable products.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>To keep the sidebar tidy, Categories, Brands, and Tags are neatly nested under the \u003Cstrong>Products\u003C\u002Fstrong> menu.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"6-export-your-products-to-csv\" href=\"#6-export-your-products-to-csv\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  6. Export Your Products to CSV\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Need your catalog for reporting, accounting, or migrating to another store? StoreSuite includes \u003Cstrong>CSV product export\u003C\u002Fstrong> with a configurable export modal — select what you need and download it. Again, free, no upsell.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"7-make-it-your-own\" href=\"#7-make-it-your-own\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  7. Make It Your Own\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipxh4kfz1ki14fq1knuc.jpg\" class=\"article-body-image-wrapper\">\u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fipxh4kfz1ki14fq1knuc.jpg\" alt=\"StoreSuite admin settings\" loading=\"lazy\" width=\"799\" height=\"515\">\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>From \u003Cstrong>WooCommerce → StoreSuite\u003C\u002Fstrong> in your WordPress admin, you can shape the dashboard to fit your brand and workflow:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>Branding\u003C\u002Fstrong> — add a sidebar logo (expanded) and a sidebar icon (collapsed) from the media library.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Color palettes\u003C\u002Fstrong> — choose a predefined palette or build a custom one with live preview.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Dashboard widgets\u003C\u002Fstrong> — switch performance boxes and leaderboards on or off; show eight meaningful numbers instead of fifteen noisy ones.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Pagination\u003C\u002Fstrong> — control how many items show per page on each list.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"how-to-get-started\" href=\"#how-to-get-started\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  How to Get Started\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Setting up StoreSuite takes about two minutes:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\n\u003Cstrong>Install and activate WooCommerce\u003C\u002Fstrong> (if you haven’t already).\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Install and activate StoreSuite\u003C\u002Fstrong> from \u003Cstrong>Plugins → Add New\u003C\u002Fstrong> (search “StoreSuite”).\u003C\u002Fli>\n\u003Cli>On activation, StoreSuite automatically creates a dashboard page with the \u003Ccode>You have no permission to view this page\u003C\u002Fcode> shortcode and selects it for you. If it didn’t, create a page, add the shortcode, and publish.\u003C\u002Fli>\n\u003Cli>Go to \u003Cstrong>WooCommerce → StoreSuite → General\u003C\u002Fstrong> and confirm your dashboard page is selected, then \u003Cstrong>Save Changes\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003Cli>Visit that page while logged in with store-management permissions — and you’re managing your store from the frontend.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cblockquote>\n\u003Cp>If a dashboard URL ever returns a 404, just go to \u003Cstrong>Settings → Permalinks\u003C\u002Fstrong> and click \u003Cstrong>Save Changes\u003C\u002Fstrong> to refresh the routes.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch2>\n  \u003Ca name=\"final-thoughts\" href=\"#final-thoughts\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Final Thoughts\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Running a WooCommerce store shouldn’t mean living inside the WordPress admin. \u003Cstrong>StoreSuite\u003C\u002Fstrong> 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.\u003C\u002Fp>\n\u003Cp>And it does all of it with \u003Cstrong>no feature gates, no trial limits, and no upsell\u003C\u002Fstrong>. The premium-grade tools other dashboards charge for are simply included.\u003C\u002Fp>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">Get StoreSuite free from the WordPress plugin directory →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>\n",false,{"rendered":48,"protected":46},"\u003Cp>Have you ever wished you could run your own\u002Fclient WooCommerce store without ever logging into the…\u003C\u002Fp>\n",1,101,"open","standard",{"footnotes":6},[49],[56,57,58,4],19,43,27,[60,41,61,62,63,64,65,66,67,68,69,70],"post-100","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-ai","tag-opensource","tag-woocommerce","tag-wordpress","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-content\u002Fuploads\u002F2026\u002F06\u002Fdevto-3914619-cover.webp",{"edited_at":73,"published_at":74,"reactions":75,"comments":75,"reading_time":76,"body_markdown":77},"2026-06-16T10:26:55Z","2026-06-16T10:22:14Z",0,6,"Have you ever wished you could run your own\u002Fclient WooCommerce store without ever logging into the WordPress admin?\n\nIf 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.\n\nThat's exactly the problem **[StoreSuite](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F)** 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.\n\nAnd here's the part most people don't expect: [StoreSuite](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F) 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.\n\n## What is StoreSuite?\n\nStoreSuite 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:\n\n- Add and edit products (every type — simple, variable, grouped, external)\n- View, create, and edit orders\n- Build and manage coupons\n- Organize categories, tags, brands, and attributes\n- Watch real-time sales numbers and leaderboards\n- Generate product titles, descriptions, and images with AI\n\nIt 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.\n\n![StoreSuite frontend dashboard](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002F8uo4z0ag7qwqdx9u1qn1.jpg)\n\n## Why Manage Your Store From the Frontend?\n\nA quick honest list of why this matters:\n\n- **Less risk.** Your shop manager\u002Fowner never sees plugin settings, theme files, or anything they could break. They see your store — nothing else.\n- **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.\n- **Faster work.** Everything is one or two clicks away. Add a product, check an order, spin up a coupon — without hunting through the backend.\n\nNow let's look at what you can actually do.\n\n## 1. A Dashboard That Shows Your Store at a Glance\n\nLog in, land on the dashboard, and within a few seconds you know how your store is doing. That's the whole idea.\n\nThe 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).\n\nBelow 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.\n\nFinally, 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.\n\n## 2. Complete Product Management\n\nThis is where most store owners spend their time, and StoreSuite makes it effortless.\n\n![Products list in StoreSuite](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fm6w8iluoqlfk3eghvh26.png)\n\nThe **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:\n\n- **Search** any product by name instantly\n- **Filter** by category, product type, stock status, or brand — and combine them (for example, *out-of-stock products in the Clothing category*)\n- **Quick edit** the basics (name, price, stock, status) right from the list\n- Use **bulk actions** to edit, trash, or export many products at once\n\n### Add or edit any product type\n\nStoreSuite handles every WooCommerce product type — **simple, variable, grouped, and external\u002Faffiliate**. The add\u002Fedit form walks you through everything top to bottom, but only the title is truly required, so you can start simple and polish later.\n\nYou 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.\n\n![Editing a variable product](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002F123fazo35zk7bv8akvpl.png)\n\n**Variable products** get special love: manage attributes and variations, run bulk actions, and use **generate-all-variations** to create every size\u002Fcolor combination in one click — something many \"free\" dashboards simply don't offer.\n\n## 3. AI That Writes and Designs For You\n\nHere's StoreSuite's standout feature — and it's completely free.\n\nWriting product descriptions is the part most store owners dread. StoreSuite hands it to AI:\n\n- **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**.\n- **All-in-one generator** — type a single hint and StoreSuite drafts the title, short description, and long description together.\n- **AI image generation** — describe a featured or gallery image, preview it, regenerate, and drop it straight into your media library.\n\n![AI settings page](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fccqpdguiz8bv6g5gbknm.png)\n\nYou 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.\n\nStoreSuite 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.)\n\n## 4. Full Order Management\n\n![Orders list in StoreSuite](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fymbhm77urgi62tjo7uch.jpg)\n\nOrders are front and center. From the **Orders** section you can:\n\n- View every order with its number, customer, date, total, and a color-coded **status badge**\n- Open any order to see full customer and line-item details\n- **Create a new order** by hand — perfect for phone or in-person sales\n- **Edit** existing orders when something needs changing\n\nBecause StoreSuite is **HPOS-compatible**, it works smoothly even on high-volume stores using WooCommerce's modern order storage.\n\n## 5. Coupons, Categories, Tags, Brands & Attributes\n\nEverything that keeps your catalog organized is here too.\n\n![Coupons in StoreSuite](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fqzcugnez3hl27y63gddm.jpg)\n\n- **Coupons** — create, edit, and manage WooCommerce discount codes with all the usual rules.\n- **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).\n- **Product Attributes** — manage attributes and their terms, ready to power your variable products.\n\nTo keep the sidebar tidy, Categories, Brands, and Tags are neatly nested under the **Products** menu.\n\n## 6. Export Your Products to CSV\n\nNeed 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.\n\n## 7. Make It Your Own\n\n![StoreSuite admin settings](https:\u002F\u002Fdev-to-uploads.s3.amazonaws.com\u002Fuploads\u002Farticles\u002Fipxh4kfz1ki14fq1knuc.jpg)\n\nFrom **WooCommerce → StoreSuite** in your WordPress admin, you can shape the dashboard to fit your brand and workflow:\n\n- **Branding** — add a sidebar logo (expanded) and a sidebar icon (collapsed) from the media library.\n- **Color palettes** — choose a predefined palette or build a custom one with live preview.\n- **Dashboard widgets** — switch performance boxes and leaderboards on or off; show eight meaningful numbers instead of fifteen noisy ones.\n- **Pagination** — control how many items show per page on each list.\n\nThere's also a collapsible sidebar that toggles between a full menu and a slim icon-only rail, with your preference remembered in the browser.\n\n## How to Get Started\n\nSetting up StoreSuite takes about two minutes:\n\n1. **Install and activate WooCommerce** (if you haven't already).\n2. **Install and activate StoreSuite** from **Plugins → Add New** (search \"StoreSuite\").\n3. On activation, StoreSuite automatically creates a dashboard page with the `[storesuite_dashboard]` shortcode and selects it for you. If it didn't, create a page, add the shortcode, and publish.\n4. Go to **WooCommerce → StoreSuite → General** and confirm your dashboard page is selected, then **Save Changes**.\n5. Visit that page while logged in with store-management permissions — and you're managing your store from the frontend.\n\n> If a dashboard URL ever returns a 404, just go to **Settings → Permalinks** and click **Save Changes** to refresh the routes.\n\n## Final Thoughts\n\nRunning 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.\n\nAnd 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.\n\nIf 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.\n\n**[Get StoreSuite free from the WordPress plugin directory →](https:\u002F\u002Fwordpress.org\u002Fplugins\u002Fstoresuite\u002F)**",{"self":79,"collection":84,"about":87,"author":90,"replies":93,"version-history":96,"predecessor-version":99,"wp:featuredmedia":103,"wp:attachment":106,"wp:term":109,"curies":115},[80],{"href":81,"targetHints":82},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F100",{"allow":83},[17],[85],{"href":86},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[88],{"href":89},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[91],{"embeddable":31,"href":92},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[94],{"embeddable":31,"href":95},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=100",[97],{"count":49,"href":98},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F100\u002Frevisions",[100],{"id":101,"href":102},170,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F100\u002Frevisions\u002F170",[104],{"embeddable":31,"href":105},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F101",[107],{"href":108},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=100",[110,113],{"taxonomy":111,"embeddable":31,"href":112},"category","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=100",{"taxonomy":9,"embeddable":31,"href":114},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=100",[116],{"name":29,"href":30,"templated":31},{"id":118,"date":119,"date_gmt":119,"guid":120,"modified":122,"modified_gmt":122,"slug":123,"status":40,"type":41,"link":124,"title":125,"content":127,"excerpt":129,"author":49,"featured_media":131,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":132,"categories":133,"tags":134,"class_list":136,"post_image_original":139,"devto_meta":140,"_links":142},77,"2026-05-14T12:35:54",{"rendered":121},"https:\u002F\u002Fportal.pluginizelab.com\u002F?p=77","2026-05-17T10:09:48","how-to-set-up-an-existing-wordpress-vip-site-locally-on-macos","https:\u002F\u002Fportal.pluginizelab.com\u002Fhow-to-set-up-an-existing-wordpress-vip-site-locally-on-macos\u002F",{"rendered":126},"How to Set Up an Existing WordPress VIP Site Locally on macOS",{"rendered":128,"protected":46},"\n\u003Ch1 class=\"wp-block-heading\">\u003C\u002Fh1>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">A quick guide to cloning a live WordPress VIP site to your MacBook for local development. Follow these commands in order.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 1: Install the Required Tools\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Install Docker Desktop and VIP-CLI:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>brew install --cask docker\nnpm install -g @automattic\u002Fvip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">After installing Docker, open it from your Applications folder so it starts running in the background.\u003C\u002Fp>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Verify all tools are installed:\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip -v && node -v && npm -v && docker --version\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cblockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n\u003Cp class=\"wp-block-paragraph\">\u003Cstrong>Please skip Step 2 & Step 3 if you are setting up an existing WordPress VIP site from a backup instead of cloning the WPVIP GitHub repository.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 2: Log In to VIP-CLI\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip logout   # in case of stale session\nvip login\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">The \u003Ccode>logout\u003C\u002Fcode> command clears any old session. \u003Ccode>vip login\u003C\u002Fcode> opens a browser window to authenticate with your VIP account.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 3: Clone the Site Repository\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>cd ~\u002FSites\ngit clone git@github.com:wpcomvip\u002Fyour-site-name.git\ncd your-site-name\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>your-site-name\u003C\u002Fcode> with the actual repository name from your VIP application.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 4: Create the Local Environment\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env create --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">You can name –slug anything unique you want but follow the rules lowercase letters, numbers, and hyphens only. No spaces, no underscores, no special characters. Common conventions: \u003Ccode>wp-vip-test-site\u003C\u002Fcode>.\u003Cbr>\u003Cbr>A setup wizard will appear. Match production for PHP version, WordPress version, and multisite settings. When asked for the application code source, choose \u003Cstrong>Local folder\u003C\u002Fstrong> and provide the path to your cloned repo.\u003C\u002Fp>\n\n\n\n\u003Cul class=\"wp-block-list\">\n\u003Cli>\u003Cstrong>Site title\u003C\u002Fstrong>: anything\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Multisite\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>PHP version\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>WordPress version\u003C\u002Fstrong>: match production\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for application code\u003C\u002Fstrong>: choose \u003Cstrong>Local folder\u003C\u002Fstrong> and give it the absolute path to your cloned repo (e.g. \u003Ccode>\u002FUsers\u002Fyou\u002FSites\u002Fyour-site-name\u003C\u002Fcode>)\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for mu-plugins\u003C\u002Fstrong>: \u003Ccode>auto\u003C\u002Fcode> (pulls VIP’s mu-plugins automatically)\u003C\u002Fli>\n\n\n\n\u003Cli>\u003Cstrong>Source for VIP MU plugins\u003C\u002Fstrong>: \u003Ccode>auto\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 5: Start the Environment\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env start --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Once started, you’ll see the local site URL, login credentials, and an auto-login link. Save these for later.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 6: Import the Database\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env import sql \u002Fpath\u002Fto\u002Ffile.sql --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>\u002Fpath\u002Fto\u002Ffile.sql\u003C\u002Fcode> with the actual path to your SQL dump on your Mac.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Step 7: Import Media Files\u003C\u002Fh2>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode>vip dev-env import media \u002Fpath\u002Fto\u002Fwp-content\u002Fuploads --slug=your-site\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Replace \u003Ccode>\u002Fpath\u002Fto\u002Fwp-content\u002Fuploads\u003C\u002Fcode> with the path to the uploads folder on your Mac. The folder should contain year-numbered subfolders (\u003Ccode>2023\u002F\u003C\u002Fcode>, \u003Ccode>2024\u002F\u003C\u002Fcode>, etc.).\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Done\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Your local copy of the VIP site is now running. Open the site URL shown after \u003Ccode>vip dev-env start\u003C\u002Fcode> and log in with the credentials provided.\u003C\u002Fp>\n\n\n\n\u003Ch2 class=\"wp-block-heading\">Day-to-Day Useful Commands\u003C\u002Fh2>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">Once your environment is set up, these are the commands you’ll use most often.\u003C\u002Fp>\n\n\n\n\u003Cpre class=\"wp-block-code\">\u003Ccode># List all your local environments\nvip dev-env list\n\n# Check status, URLs, and credentials\nvip dev-env info --slug=your-site\n\n# Start the environment\nvip dev-env start --slug=your-site\n\n# Stop the environment (frees up RAM and CPU)\nvip dev-env stop --slug=your-site\n\n# Run any WP-CLI command inside the container\nvip dev-env exec --slug=your-site -- wp plugin list\nvip dev-env exec --slug=your-site -- wp cache flush\nvip dev-env exec --slug=your-site -- wp user list\n\n# Create a new admin user\nvip dev-env exec --slug=your-site -- wp user create yourname you@example.com --role=administrator\n\n# Check site URL after import\nvip dev-env exec --slug=your-site -- wp option get siteurl\nvip dev-env exec --slug=your-site -- wp option get home\n\n# Search and replace URLs in the database\nvip dev-env exec --slug=your-site -- wp search-replace 'old-url' 'new-url' --skip-columns=guid\n\n# Delete all manually imported media files (host path - faster)\nrm -rf ~\u002F.local\u002Fshare\u002Fvip\u002Fdev-environment\u002Fyour-site\u002Fuploads\u002F*\n\n# Delete all manually imported media files (container path - alternative)\nvip dev-env exec --slug=your-site -- rm -rf \u002Fwp\u002Fwp-content\u002Fuploads\u002F*\n\n# Destroy the environment completely\nvip dev-env destroy --slug=your-site\n\n# Update tooling to the latest version\nnpm update -g @automattic\u002Fvip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\n\n\n\u003Cp class=\"wp-block-paragraph\">For official documentation, visit \u003Ca href=\"https:\u002F\u002Fdocs.wpvip.com\u002Fvip-local-development-environment\u002F\">docs.wpvip.com\u002Fvip-local-development-environment\u003C\u002Fa>.\u003C\u002Fp>\n",{"rendered":130,"protected":46},"\u003Cp>A quick guide to cloning a live WordPress VIP site to your MacBook for local development. Follow these commands in order. Step 1: Install the Required Tools Install Docker Desktop and VIP-CLI: After installing Docker, open it from your Applications folder so it starts running in the background. Verify all tools are installed: Please skip […]\u003C\u002Fp>\n",79,{"footnotes":6},[49],[4,135],35,[137,41,61,62,63,64,65,66,70,138],"post-77","tag-wpvip","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-content\u002Fuploads\u002F2026\u002F05\u002Fsetup-wordpress-vip-on-local.jpg",{"edited_at":141,"published_at":141,"reactions":141,"comments":141,"reading_time":141,"body_markdown":141},null,{"self":143,"collection":148,"about":150,"author":152,"replies":154,"version-history":157,"predecessor-version":161,"wp:featuredmedia":165,"wp:attachment":168,"wp:term":171,"curies":176},[144],{"href":145,"targetHints":146},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77",{"allow":147},[17],[149],{"href":86},[151],{"href":89},[153],{"embeddable":31,"href":92},[155],{"embeddable":31,"href":156},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=77",[158],{"count":159,"href":160},2,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77\u002Frevisions",[162],{"id":163,"href":164},83,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F77\u002Frevisions\u002F83",[166],{"embeddable":31,"href":167},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F79",[169],{"href":170},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=77",[172,174],{"taxonomy":111,"embeddable":31,"href":173},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=77",{"taxonomy":9,"embeddable":31,"href":175},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=77",[177],{"name":29,"href":30,"templated":31},{"id":179,"date":180,"date_gmt":180,"guid":181,"modified":183,"modified_gmt":183,"slug":184,"status":40,"type":41,"link":182,"title":185,"content":187,"excerpt":189,"author":49,"featured_media":191,"comment_status":51,"ping_status":51,"sticky":31,"template":6,"format":52,"meta":192,"categories":193,"tags":194,"class_list":196,"post_image_original":199,"devto_meta":200,"_links":205},39,"2026-02-09T18:43:22",{"rendered":182},"https:\u002F\u002Fportal.pluginizelab.com\u002Fhow-wordpress-is-preparing-for-the-ai-era\u002F","2026-08-17T12:17:36","how-wordpress-is-preparing-for-the-ai-era",{"rendered":186},"How WordPress is Preparing for the AI Era",{"rendered":188,"protected":46},"\u003Cp>We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are scattered. As a human we understand this ecosystem because we read docs to know how they works, features etc. But AI doesn’t work on this way. Because its not possible to know all the available WordPress plugins working procedure top to bottom. So the WordPress core AI team is taking a much smarter approach to use AI within the WordPress project. This approach is called AI Building Blocks for WordPress. The goal of the AI Building Blocks is Simple: Give AI a clear, secure, and standardized way to understand what WordPress can do and to do it safely.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>They are working on the three core technologies that work together:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>PHP AI Client SDK & WordPress AI Client\u003C\u002Fli>\n\u003Cli>Abilities API\u003C\u002Fli>\n\u003Cli>MCP Adapter\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"php-ai-client-sdk\" href=\"#php-ai-client-sdk\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  PHP AI Client SDK:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Currently there are many AI providers (OpenAI, Anthropic, Gemini, etc.) in the market and each has its own API & configurations process. If a developer want to enable AI features to their own plugins they need to implement the API integration from scratch. Also the developers need to implement each providers separately for their plugins. Developers rebuilds the same infrastructure: provider integrations, API key management. Admin enter the same credentials multiple time and multiple places for each separate plugins. \u003C\u002Fp>\n\u003Cp>On the other hand, the PHP AI Client SDK creates one unified PHP interface that works with multiple AI models. To use the SDK everything will be centralizes, one credentials system for all plugins. The WordPress site admins choose which AI services they want to configure & use from a single place. So, developers can focus on building AI features, not AI infrastructure. Developers don’t lock themselves into a single AI provider.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"wordpress-ai-client\" href=\"#wordpress-ai-client\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  WordPress AI Client:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An AI client and API for WordPress to communicate with any generative AI models of various capabilities using a uniform API. Built on top of the PHP AI Client, adapted for the WordPress ecosystem while following WordPress Coding Standards and best practices. Features of the WordPress AI Client:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cstrong>WP Prompt Builder\u003C\u002Fstrong> – A WordPress-friendly way to create and manage AI prompts using PHP, following WordPress coding standards.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Admin Settings Page\u003C\u002Fstrong> – A WordPress Admin settings screen to store AI provider API keys.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Auto API Key Setup\u003C\u002Fstrong> – Automatically uses API keys saved in WordPress settings.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>Standard HTTP Client\u003C\u002Fstrong> – Uses the WordPress HTTP API in a PSR-compatible way.\u003C\u002Fli>\n\u003Cli>\n\u003Cstrong>JavaScript API\u003C\u002Fstrong> – Front-end JS prompt builder that talks with the server through the WP REST APIs.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"abilities-api\" href=\"#abilities-api\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Abilities API:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>A typical WordPress website might could have lots of plugins installed & activated, each introducing unique functionality. But there’s no standardized way for these components to express their capabilities. An AI assistant has no systematic way to discover that. To solve this problem, the Abilities API establishes a standardized format for registering the capabilities of plugins and themes in a common structure, something like below:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>What the plugin or feature does.\u003C\u002Fli>\n\u003Cli>What inputs it needs.\u003C\u002Fli>\n\u003Cli>What output it returns.\u003C\u002Fli>\n\u003Cli>Which permission require to run it.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>This makes it easier for AI to automatically discover WordPress features. It transforms WordPress from an isolated collection of functionalities and plugins into an interconnected, discoverable system.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"mcp-adapter\" href=\"#mcp-adapter\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  MCP Adapter:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Once WordPress knows its own abilities by Abilities API, the next step is letting AI assistants use them. That’s the job of the MCP Adapter. \u003Cbr \u002F>\nMCP (Model Context Protocol) is an open standard that defines how applications expose tools to AI models. The MCP Adapter translates WordPress abilities into a format that AI assistants like ChatGPT, Claude or Gemini can understand. AI assistants can discover, understand, and execute actions like creating posts, managing media, and moderating comments, all through the standardized protocol. So, Content creators can manage their WordPress sites conversationally, while developers can automate complex workflows across systems. Agencies can build sophisticated integrations, from content migration to performance optimization.\u003C\u002Fp>\n\u003Ch4>\n  \u003Ca name=\"these-three-ai-building-blocks-work-together-by-the-following-way\" href=\"#these-three-ai-building-blocks-work-together-by-the-following-way\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  These three AI Building Blocks work together by the following way:\u003Cbr \u002F>\n\u003C\u002Fh4>\n\u003Cul>\n\u003Cli>PHP\u002FWordPress AI Client SDK talks to AI models.\u003C\u002Fli>\n\u003Cli>Abilities API defines what WordPress can do.\u003C\u002Fli>\n\u003Cli>MCP Adapter exposes those abilities to AI assistants safely.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch4>\n  \u003Ca name=\"ai-experiments\" href=\"#ai-experiments\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  AI Experiments\u003Cbr \u002F>\n\u003C\u002Fh4>\n\u003Cp>If you want to experiments all the AI Building Blocks in one place then you can try \u003Ca href=\"https:\u002F\u002Fmake.wordpress.org\u002Fai\u002F2025\u002F07\u002F17\u002Fai-experiments-plugin\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">AI Experiments Plugin\u003C\u002Fa>. It serves as both a powerful tool for users and a reference implementation for developers, demonstrating how the PHP AI Client SDK, Abilities API, and MCP Adapter work together in practice.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fquillbot.com\u002Fai-content-detector?certificate=cert_698a307475429bb716cad000\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cbr \u002F>\n  \u003Cimg decoding=\"async\" src=\"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\u002Fhttps%3A%2F%2Fassets.quillbot.com%2Fimages%2Ftheme%2Flight%2FcontentCertification%2Fbadge.png\" alt=\"Human Written Content Certified\" loading=\"lazy\" width=\"290\" height=\"240\">\u003Cbr \u002F>\n\u003C\u002Fa>\u003C\u002Fp>\n",{"rendered":190,"protected":46},"\u003Cp>We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are…\u003C\u002Fp>\n",40,{"footnotes":6},[49],[56,195,4],20,[197,41,61,62,63,64,65,66,67,198,70],"post-39","tag-mcp","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-content\u002Fuploads\u002F2026\u002F02\u002Fdevto-3244339-cover.webp",{"edited_at":201,"published_at":202,"reactions":159,"comments":75,"reading_time":203,"body_markdown":204},"2026-02-19T07:38:42Z","2026-02-09T18:43:22Z",3,"We know WordPress is powerful, because of its thousands of plugins, APIs & functions but they are scattered. As a human we understand this ecosystem because we read docs to know how they works, features etc. But AI doesn't work on this way. Because its not possible to know all the available WordPress plugins working procedure top to bottom. So the WordPress core AI team is taking a much smarter approach to use AI within the WordPress project. This approach is called AI Building Blocks for WordPress. The goal of the AI Building Blocks is Simple: Give AI a clear, secure, and standardized way to understand what WordPress can do and to do it safely.\n\n**They are working on the three core technologies that work together:**\n- PHP AI Client SDK & WordPress AI Client\n- Abilities API\n- MCP Adapter\n\n## PHP AI Client SDK:\nCurrently there are many AI providers (OpenAI, Anthropic, Gemini, etc.) in the market and each has its own API & configurations process. If a developer want to enable AI features to their own plugins they need to implement the API integration from scratch. Also the developers need to implement each providers separately for their plugins. Developers rebuilds the same infrastructure: provider integrations, API key management. Admin enter the same credentials multiple time and multiple places for each separate plugins. \n\nOn the other hand, the PHP AI Client SDK creates one unified PHP interface that works with multiple AI models. To use the SDK everything will be centralizes, one credentials system for all plugins. The WordPress site admins choose which AI services they want to configure & use from a single place. So, developers can focus on building AI features, not AI infrastructure. Developers don’t lock themselves into a single AI provider.\n\n### WordPress AI Client: \nAn AI client and API for WordPress to communicate with any generative AI models of various capabilities using a uniform API. Built on top of the PHP AI Client, adapted for the WordPress ecosystem while following WordPress Coding Standards and best practices. Features of the WordPress AI Client:\n- **WP Prompt Builder** – A WordPress-friendly way to create and manage AI prompts using PHP, following WordPress coding standards.\n- **Admin Settings Page** – A WordPress Admin settings screen to store AI provider API keys.\n- **Auto API Key Setup** – Automatically uses API keys saved in WordPress settings.\n- **Standard HTTP Client** – Uses the WordPress HTTP API in a PSR-compatible way.\n- **JavaScript API** – Front-end JS prompt builder that talks with the server through the WP REST APIs.\n\n## Abilities API:\nA typical WordPress website might could have lots of plugins installed & activated, each introducing unique functionality. But there’s no standardized way for these components to express their capabilities. An AI assistant has no systematic way to discover that. To solve this problem, the Abilities API establishes a standardized format for registering the capabilities of plugins and themes in a common structure, something like below:\n- What the plugin or feature does.\n- What inputs it needs.\n- What output it returns.\n- Which permission require to run it.\n\nThis makes it easier for AI to automatically discover WordPress features. It transforms WordPress from an isolated collection of functionalities and plugins into an interconnected, discoverable system.\n\n## MCP Adapter:\nOnce WordPress knows its own abilities by Abilities API, the next step is letting AI assistants use them. That’s the job of the MCP Adapter. \nMCP (Model Context Protocol) is an open standard that defines how applications expose tools to AI models. The MCP Adapter translates WordPress abilities into a format that AI assistants like ChatGPT, Claude or Gemini can understand. AI assistants can discover, understand, and execute actions like creating posts, managing media, and moderating comments, all through the standardized protocol. So, Content creators can manage their WordPress sites conversationally, while developers can automate complex workflows across systems. Agencies can build sophisticated integrations, from content migration to performance optimization.\n\n#### These three AI Building Blocks work together by the following way:\n- PHP\u002FWordPress AI Client SDK talks to AI models.\n- Abilities API defines what WordPress can do.\n- MCP Adapter exposes those abilities to AI assistants safely.\n\n#### AI Experiments\nIf you want to experiments all the AI Building Blocks in one place then you can try [AI Experiments Plugin](https:\u002F\u002Fmake.wordpress.org\u002Fai\u002F2025\u002F07\u002F17\u002Fai-experiments-plugin\u002F). It serves as both a powerful tool for users and a reference implementation for developers, demonstrating how the PHP AI Client SDK, Abilities API, and MCP Adapter work together in practice.\n\n\u003Ca href=\"https:\u002F\u002Fquillbot.com\u002Fai-content-detector?certificate=cert_698a307475429bb716cad000\" target=\"_blank\" aria-label=\"Verified Human Content\">\n  \u003Cimg src=\"https:\u002F\u002Fassets.quillbot.com\u002Fimages\u002Ftheme\u002Flight\u002FcontentCertification\u002Fbadge.png\" alt=\"Human Written Content Certified\" width=\"60\" height=\"60\" style=\"max-width: 60px; height: auto;\" \u002F>\n\u003C\u002Fa>\n\n\n",{"self":206,"collection":211,"about":213,"author":215,"replies":217,"version-history":220,"predecessor-version":223,"wp:featuredmedia":227,"wp:attachment":230,"wp:term":233,"curies":238},[207],{"href":208,"targetHints":209},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39",{"allow":210},[17],[212],{"href":86},[214],{"href":89},[216],{"embeddable":31,"href":92},[218],{"embeddable":31,"href":219},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=39",[221],{"count":203,"href":222},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39\u002Frevisions",[224],{"id":225,"href":226},102,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F39\u002Frevisions\u002F102",[228],{"embeddable":31,"href":229},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F40",[231],{"href":232},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=39",[234,236],{"taxonomy":111,"embeddable":31,"href":235},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=39",{"taxonomy":9,"embeddable":31,"href":237},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=39",[239],{"name":29,"href":30,"templated":31},{"id":241,"date":242,"date_gmt":242,"guid":243,"modified":245,"modified_gmt":245,"slug":246,"status":40,"type":41,"link":244,"title":247,"content":249,"excerpt":251,"author":49,"featured_media":75,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":253,"categories":254,"tags":255,"class_list":259,"post_image_original":141,"devto_meta":264,"_links":268},41,"2025-11-13T15:30:19",{"rendered":244},"https:\u002F\u002Fportal.pluginizelab.com\u002Fhow-to-migrate-your-local-wordpress-site-to-a-vito-web-panel-server\u002F","2026-08-17T12:17:37","how-to-migrate-your-local-wordpress-site-to-a-vito-web-panel-server",{"rendered":248},"How to Migrate Your Local WordPress Site to a Vito Web Panel Server",{"rendered":250,"protected":46},"\u003Cp>Follow this step-by-step guide to migrate your local WordPress website to a live server using the Vito Web Panel.\u003C\u002Fp>\n\u003Chr>\n\u003Ch2>\n  \u003Ca name=\"1-add-your-ssh-key-to-the-vito-server\" href=\"#1-add-your-ssh-key-to-the-vito-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>1. Add Your SSH Key to the Vito Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>First, generate an SSH key on your device and add it to the \u003Cstrong>SSH Settings\u003C\u002Fstrong> section inside the Vito server panel.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"2-create-a-wordpress-site-in-vito\" href=\"#2-create-a-wordpress-site-in-vito\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>2. Create a WordPress Site in Vito\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Create a new WordPress site from the Vito Web Panel.\u003Cbr \u002F>\nFor example, assume your live domain is:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp-site.com\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"3-connect-to-the-vito-server-via-ssh\" href=\"#3-connect-to-the-vito-server-via-ssh\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>3. Connect to the Vito Server via SSH\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Open your terminal and log in to your server using the following command:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>ssh vito@\u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Once logged in, you will be at the server’s root directory.\u003Cbr \u002F>\nTo list your created websites, run:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">ls \u003C\u002Fspan>or \u003Cspan class=\"nb\">ls\u003C\u002Fspan> \u003Cspan class=\"nt\">-la\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"4-navigate-to-your-website-directory\" href=\"#4-navigate-to-your-website-directory\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>4. Navigate to Your Website Directory\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Enter your WordPress site directory:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">cd \u003C\u002Fspan>wp-site.com\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"5-remove-the-existing-wpcontent-folder\" href=\"#5-remove-the-existing-wpcontent-folder\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>5. Remove the Existing wp-content Folder\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Delete the default \u003Ccode>wp-content\u003C\u002Fcode> directory:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>\u003Cspan class=\"nb\">rm\u003C\u002Fspan> \u003Cspan class=\"nt\">-rf\u003C\u002Fspan> wp-content\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"6-prepare-your-local-raw-wpcontent-endraw-for-upload\" href=\"#6-prepare-your-local-raw-wpcontent-endraw-for-upload\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>6. Prepare Your Local \u003Ccode>wp-content\u003C\u002Fcode> for Upload\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Create a ZIP file of your local site’s \u003Ccode>wp-content\u003C\u002Fcode> folder.\u003C\u002Fp>\n\u003Cp>Before uploading, open the folder in a code editor and perform a \u003Cstrong>search & replace\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Cp>Replace all instances of: \u003Ccode>local-wp-site.test\u003C\u002Fcode> with \u003Ccode>wp-site.com\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Then replace: \u003Ccode>http:\u002F\u002Fwp-site.com\u003C\u002Fcode> with \u003Ccode>https:\u002F\u002Fwp-site.com\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"7-upload-the-raw-wpcontent-endraw-zip-to-the-server\" href=\"#7-upload-the-raw-wpcontent-endraw-zip-to-the-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>7. Upload the \u003Ccode>wp-content\u003C\u002Fcode> ZIP to the Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Use SCP to upload the zipped folder to your server:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>scp ~\u002FHerd\u002Flocal-wp-site\u002Fwp-content.zip vito@ \u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>:\u002Fhome\u002Fvito\u002Fwp-site.com\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"8-unzip-the-uploaded-file\" href=\"#8-unzip-the-uploaded-file\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>8. Unzip the Uploaded File\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>From your project root directory, unzip the file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>unzip wp-content.zip\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Now your site files are ready.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"9-export-your-local-database\" href=\"#9-export-your-local-database\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>9. Export Your Local Database\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Run the following command to export your local database:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>mysqldump \u003Cspan class=\"nt\">-u\u003C\u002Fspan> root \u003Cspan class=\"nt\">-p\u003C\u002Fspan> local_site_db \u003Cspan class=\"o\">>\u003C\u002Fspan> local_site_db.sql\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"10-upload-the-database-to-the-server\" href=\"#10-upload-the-database-to-the-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>10. Upload the Database to the Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Upload the exported SQL file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>scp ~\u002FHerd\u002Flocal-wp-site\u002Flocal_site_db.sql vito@ \u003Cspan class=\"o\">{\u003C\u002Fspan>your.server.ip\u003Cspan class=\"o\">}\u003C\u002Fspan>:\u002Fhome\u002Fvito\u002F\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"11-import-the-database-into-the-live-server\" href=\"#11-import-the-database-into-the-live-server\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>11. Import the Database Into the Live Server\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Run the following command to import your SQL file into the live database:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>mysql \u003Cspan class=\"nt\">-u\u003C\u002Fspan> db_user_name \u003Cspan class=\"nt\">-p\u003C\u002Fspan> wp_site_db < \u002Fhome\u002Fvito\u002Flocal_site_db.sql\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>You will be prompted for the database password. Enter it, and the import will proceed.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"12-update-urls-using-wpcli\" href=\"#12-update-urls-using-wpcli\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  \u003Cstrong>12. Update URLs Using WP-CLI\u003C\u002Fstrong>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Navigate back to your project’s root directory and run the following WP-CLI commands:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>wp search-replace \u003Cspan class=\"s1\">'local-wp-site.test'\u003C\u002Fspan> \u003Cspan class=\"s1\">'wp-test.com'\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight shell\">\u003Ccode>wp search-replace \u003Cspan class=\"s1\">'http:\u002F\u002Fwp-test.com'\u003C\u002Fspan> \u003Cspan class=\"s1\">'https:\u002F\u002Fwp-test.com'\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>This ensures all old local URLs are correctly replaced with the live domain URLs.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>Your migration is now complete!\u003C\u002Fp>\n",{"rendered":252,"protected":46},"\u003Cp>Follow this step-by-step guide to migrate your local WordPress website to a live server using the…\u003C\u002Fp>\n",{"footnotes":6},[49],[256,257,258,4],21,23,22,[260,41,61,62,63,65,66,261,262,263,70],"post-41","tag-migration","tag-ssh","tag-transfer",{"edited_at":265,"published_at":266,"reactions":75,"comments":75,"reading_time":159,"body_markdown":267},"2025-11-13T15:36:47Z","2025-11-13T15:30:19Z","Follow this step-by-step guide to migrate your local WordPress website to a live server using the Vito Web Panel.\n\n---\n\n## **1. Add Your SSH Key to the Vito Server**\n\nFirst, generate an SSH key on your device and add it to the **SSH Settings** section inside the Vito server panel.\n\n## **2. Create a WordPress Site in Vito**\n\nCreate a new WordPress site from the Vito Web Panel.\nFor example, assume your live domain is:\n\n```\nwp-site.com\n```\n\n## **3. Connect to the Vito Server via SSH**\n\nOpen your terminal and log in to your server using the following command:\n\n```bash\nssh vito@{your.server.ip}\n```\n\nOnce logged in, you will be at the server’s root directory.\nTo list your created websites, run:\n\n```bash\nls or ls -la\n```\n\n## **4. Navigate to Your Website Directory**\n\nEnter your WordPress site directory:\n\n```bash\ncd wp-site.com\n```\n\n## **5. Remove the Existing wp-content Folder**\n\nDelete the default `wp-content` directory:\n\n```bash\nrm -rf wp-content\n```\n\n## **6. Prepare Your Local `wp-content` for Upload**\n\nCreate a ZIP file of your local site’s `wp-content` folder.\n\nBefore uploading, open the folder in a code editor and perform a **search & replace**:\n\n- Replace all instances of: `local-wp-site.test` with `wp-site.com`\n\n- Then replace: `http:\u002F\u002Fwp-site.com` with `https:\u002F\u002Fwp-site.com`\n\n## **7. Upload the `wp-content` ZIP to the Server**\n\nUse SCP to upload the zipped folder to your server:\n\n```bash\nscp ~\u002FHerd\u002Flocal-wp-site\u002Fwp-content.zip vito@ {your.server.ip}:\u002Fhome\u002Fvito\u002Fwp-site.com\u002F\n```\n\n## **8. Unzip the Uploaded File**\n\nFrom your project root directory, unzip the file:\n\n```bash\nunzip wp-content.zip\n```\n\nNow your site files are ready.\n\n## **9. Export Your Local Database**\n\nRun the following command to export your local database:\n\n```bash\nmysqldump -u root -p local_site_db > local_site_db.sql\n```\n\n## **10. Upload the Database to the Server**\n\nUpload the exported SQL file:\n\n```bash\nscp ~\u002FHerd\u002Flocal-wp-site\u002Flocal_site_db.sql vito@ {your.server.ip}:\u002Fhome\u002Fvito\u002F\n```\n\n## **11. Import the Database Into the Live Server**\n\nRun the following command to import your SQL file into the live database:\n\n```bash\nmysql -u db_user_name -p wp_site_db \u003C \u002Fhome\u002Fvito\u002Flocal_site_db.sql\n```\n\nYou will be prompted for the database password. Enter it, and the import will proceed.\n\n## **12. Update URLs Using WP-CLI**\n\nNavigate back to your project’s root directory and run the following WP-CLI commands:\n\n```bash\nwp search-replace 'local-wp-site.test' 'wp-test.com'\n```\n\n```bash\nwp search-replace 'http:\u002F\u002Fwp-test.com' 'https:\u002F\u002Fwp-test.com'\n```\n\nThis ensures all old local URLs are correctly replaced with the live domain URLs.\n\n---\n\nYour migration is now complete!",{"self":269,"collection":274,"about":276,"author":278,"replies":280,"version-history":283,"predecessor-version":286,"wp:attachment":290,"wp:term":293,"curies":298},[270],{"href":271,"targetHints":272},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F41",{"allow":273},[17],[275],{"href":86},[277],{"href":89},[279],{"embeddable":31,"href":92},[281],{"embeddable":31,"href":282},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=41",[284],{"count":49,"href":285},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F41\u002Frevisions",[287],{"id":288,"href":289},103,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F41\u002Frevisions\u002F103",[291],{"href":292},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=41",[294,296],{"taxonomy":111,"embeddable":31,"href":295},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=41",{"taxonomy":9,"embeddable":31,"href":297},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=41",[299],{"name":29,"href":30,"templated":31},{"id":57,"date":301,"date_gmt":301,"guid":302,"modified":304,"modified_gmt":304,"slug":305,"status":40,"type":41,"link":303,"title":306,"content":308,"excerpt":310,"author":49,"featured_media":75,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":312,"categories":313,"tags":314,"class_list":318,"post_image_original":141,"devto_meta":323,"_links":328},"2024-09-16T17:18:55",{"rendered":303},"https:\u002F\u002Fportal.pluginizelab.com\u002Fa-beginners-guide-to-global-state-management-in-wordpress-gutenberg\u002F","2026-08-17T12:17:38","a-beginners-guide-to-global-state-management-in-wordpress-gutenberg",{"rendered":307},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":309,"protected":46},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\u003C\u002Fp>\n\u003Cp>If you’re new to managing global state or using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\u003C\u002Fp>\n\u003Cp>\u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"key-concepts-in-raw-wordpressdata-endraw-\" href=\"#key-concepts-in-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Key Concepts in \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To understand how to use \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"actions\" href=\"#actions\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Actions:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\u003C\u002Fp>\n\u003Col>\n\u003Cli>A type that indicates what kind of change is happening (e.g., add, remove, update).\u003C\u002Fli>\n\u003Cli>A payload that contains the data needed for that change (e.g., which item to add).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Here’s an example of how actions might look in our cart example:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the item to add to the cart\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the ID of the item to remove\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> Actions tell the reducer what needs to change in the state.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"reducers\" href=\"#reducers\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Reducers:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\u003C\u002Fp>\n\u003Cp>What does a reducer do? It takes the current state and an action, then returns a new state based on the action.\u003Cbr \u002F>\nHere’s an example of a simple reducer that manages a shopping cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan> \u003Cspan class=\"p\">},\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Keep the existing state\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Add the new item to the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Remove the item from the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the unchanged state for unknown actions\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> The reducer defines how the state changes when specific actions are dispatched.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"selectors\" href=\"#selectors\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Selectors:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\u003C\u002Fp>\n\u003Cp>For example, a selector to get all the cart items might look like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the cart items from the state\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>In a component, you would use this selector to access the cart data like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> A selector is a helper function that lets you access specific data from the state.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\" href=\"#step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step by Step Guide to Implement Global State in Gutenberg with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Now that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We’ll set up a simple store with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, manage some state, and use actions and selectors to interact with that state.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Step 1: Define Your Initial State\u003C\u002Fstrong>\u003Cbr \u002F>\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 2: Create Actions\u003C\u002Fstrong>\u003Cbr \u002F>\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 3: Create the Reducer\u003C\u002Fstrong>\u003Cbr \u002F>\nThe reducer listens for dispatched actions and updates the state accordingly. Here’s our reducer, which updates the cart when actions are dispatched:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 4: Create Selectors\u003C\u002Fstrong>\u003Cbr \u002F>\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 5: Create and Register the Store\u003C\u002Fstrong>\u003Cbr \u002F>\nFinally, we’ll create and register the store with the \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> package. This will make the store globally accessible across your WordPress site.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">register\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">store\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">reducer\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">actions\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">selectors\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n\u003Cspan class=\"p\">});\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">register\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">store\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 6: Using the Store in Components\u003C\u002Fstrong>\u003Cbr \u002F>\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useDispatch\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">addToCart\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useDispatch\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan> \u003Cspan class=\"na\">id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"na\">name\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">Sample Item\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan> \u003Cspan class=\"p\">});\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>To fetch the items in the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useSelect\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>By understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\u003C\u002Fp>\n\u003Cp>With \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\u003C\u002Fp>\n",{"rendered":311,"protected":46},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",{"footnotes":6},[49],[315,316,317,4],24,25,26,[319,41,61,62,63,65,66,320,321,322,70],"post-43","tag-gutenberg","tag-javascript","tag-redux",{"edited_at":324,"published_at":325,"reactions":203,"comments":75,"reading_time":326,"body_markdown":327},"2024-09-16T17:28:07Z","2024-09-16T17:18:55Z",4,"When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where `@wordpress\u002Fdata` comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\n\nIf you’re new to managing global state or using `@wordpress\u002Fdata`, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\n\n`@wordpress\u002Fdata` provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\n\n## Key Concepts in `@wordpress\u002Fdata`\nTo understand how to use `@wordpress\u002Fdata`, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\n\n### Actions:\nAn action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\n\n1. A type that indicates what kind of change is happening (e.g., add, remove, update).\n2. A payload that contains the data needed for that change (e.g., which item to add).\n\nHere’s an example of how actions might look in our cart example:\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART', \u002F\u002F Action type\n            item \u002F\u002F Payload: the item to add to the cart\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART', \u002F\u002F Action type\n            itemId \u002F\u002F Payload: the ID of the item to remove\n        };\n    }\n};\n```\n**In short:** Actions tell the reducer what needs to change in the state.\n\n### Reducers:\nA reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\n\nWhat does a reducer do? It takes the current state and an action, then returns a new state based on the action.\nHere’s an example of a simple reducer that manages a shopping cart:\n\n```js\nconst reducer = (state = { cart: [] }, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state, \u002F\u002F Keep the existing state\n                cart: [...state.cart, action.item] \u002F\u002F Add the new item to the cart\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId) \u002F\u002F Remove the item from the cart\n            };\n        default:\n            return state; \u002F\u002F Return the unchanged state for unknown actions\n    }\n};\n```\n**In short:** The reducer defines how the state changes when specific actions are dispatched.\n\n### Selectors:\nA selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\n\nFor example, a selector to get all the cart items might look like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart; \u002F\u002F Return the cart items from the state\n    }\n};\n```\nIn a component, you would use this selector to access the cart data like this:\n\n```js\nconst cartItems = useSelect((select) => select('my-store').getCartItems());\n```\n**In short:** A selector is a helper function that lets you access specific data from the state.\n\n## Step by Step Guide to Implement Global State in Gutenberg with `@wordpress\u002Fdata`\n\nNow that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We'll set up a simple store with `@wordpress\u002Fdata`, manage some state, and use actions and selectors to interact with that state.\n\n**Step 1: Define Your Initial State**\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\n```js\nconst DEFAULT_STATE = {\n    cart: []\n};\n```\n\n**Step 2: Create Actions**\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART',\n            item\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART',\n            itemId\n        };\n    }\n};\n```\n\n**Step 3: Create the Reducer**\nThe reducer listens for dispatched actions and updates the state accordingly. Here's our reducer, which updates the cart when actions are dispatched:\n\n```js\nconst reducer = (state = DEFAULT_STATE, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state,\n                cart: [...state.cart, action.item]\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId)\n            };\n        default:\n            return state;\n    }\n};\n```\n\n**Step 4: Create Selectors**\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart;\n    }\n};\n```\n\n**Step 5: Create and Register the Store**\nFinally, we’ll create and register the store with the `@wordpress\u002Fdata` package. This will make the store globally accessible across your WordPress site.\n\n```js\nimport { createReduxStore, register } from '@wordpress\u002Fdata';\n\nconst store = createReduxStore('my-cart-store', {\n    reducer,\n    actions,\n    selectors,\n});\n\nregister(store);\n```\n\n**Step 6: Using the Store in Components**\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\n```js\nimport { useDispatch } from '@wordpress\u002Fdata';\n\nconst { addToCart } = useDispatch('my-cart-store');\naddToCart({ id: 1, name: 'Sample Item' });\n```\n\nTo fetch the items in the cart:\n\n```js\nimport { useSelect } from '@wordpress\u002Fdata';\n\nconst cartItems = useSelect((select) => select('my-cart-store').getCartItems());\n```\n\n## Conclusion\nBy understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using `@wordpress\u002Fdata`. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\n\nWith `@wordpress\u002Fdata`, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\n",{"self":329,"collection":334,"about":336,"author":338,"replies":340,"version-history":343,"predecessor-version":346,"wp:attachment":350,"wp:term":353,"curies":358},[330],{"href":331,"targetHints":332},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":333},[17],[335],{"href":86},[337],{"href":89},[339],{"embeddable":31,"href":92},[341],{"embeddable":31,"href":342},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[344],{"count":49,"href":345},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[347],{"id":348,"href":349},105,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions\u002F105",[351],{"href":352},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[354,356],{"taxonomy":111,"embeddable":31,"href":355},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":9,"embeddable":31,"href":357},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[359],{"name":29,"href":30,"templated":31},{"id":361,"date":362,"date_gmt":362,"guid":363,"modified":365,"modified_gmt":365,"slug":366,"status":40,"type":41,"link":364,"title":367,"content":369,"excerpt":371,"author":49,"featured_media":75,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":373,"categories":374,"tags":375,"class_list":377,"post_image_original":141,"devto_meta":380,"_links":384},44,"2024-08-13T19:04:37",{"rendered":364},"https:\u002F\u002Fportal.pluginizelab.com\u002Fhow-to-implement-a-woocommerce-ajax-direct-buy-now-button\u002F","2026-08-17T12:17:39","how-to-implement-a-woocommerce-ajax-direct-buy-now-button",{"rendered":368},"How to Implement a WooCommerce AJAX Direct “Buy Now” Button",{"rendered":370,"protected":46},"\u003Cp>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.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-1-add-the-buy-now-button\" href=\"#step-1-add-the-buy-now-button\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 1: Add the “Buy Now” Button\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Here’s the PHP code snippet:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight php\">\u003Ccode>\u003Cspan class=\"nf\">add_action\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'woocommerce_after_add_to_cart_button'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'add_content_after_addtocart'\u003C\u002Fspan> \u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"k\">function\u003C\u002Fspan> \u003Cspan class=\"n\">add_content_after_addtocart\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">get_the_ID\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n    \u003Cspan class=\"nv\">$product\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">wc_get_product\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan> \u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n    \u003Cspan class=\"k\">if\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"nv\">$product\u003C\u002Fspan>\u003Cspan class=\"o\">->\u003C\u002Fspan>\u003Cspan class=\"nf\">is_type\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'simple'\u003C\u002Fspan> \u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">){\u003C\u002Fspan>\n        \u003Cspan class=\"k\">echo\u003C\u002Fspan> \u003Cspan class=\"s1\">'<button data-id=\"'\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"nv\">$current_product_id\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"s1\">'\" class=\"buy-now button\"><i class=\"matico-icon-toys\"><\u002Fi>'\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">__\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s1\">'Buy Now'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'woocommerce'\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\u003Cspan class=\"mf\">.\u003C\u002Fspan>\u003Cspan class=\"s1\">'<\u002Fbutton>'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>We use the \u003Ccode>woocommerce_after_add_to_cart_button\u003C\u002Fcode> hook to insert our “Buy Now” button right after the “Add to Cart” button.\u003C\u002Fli>\n\u003Cli>The \u003Ccode>get_the_ID()\u003C\u002Fcode> function retrieves the current product ID, and \u003Ccode>wc_get_product()\u003C\u002Fcode> gets the product details.\u003C\u002Fli>\n\u003Cli>We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"step-3-enqueue-the-script\" href=\"#step-3-enqueue-the-script\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 3: Enqueue the Script\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>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:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight php\">\u003Ccode>\u003Cspan class=\"nf\">wp_enqueue_script\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"s1\">'matico-child-script'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nf\">get_stylesheet_directory_uri\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"mf\">.\u003C\u002Fspan> \u003Cspan class=\"s1\">'\u002Fassets\u002Fjs\u002Fscript.js'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"k\">array\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'jquery'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'scrollfix-script'\u003C\u002Fspan> \u003Cspan class=\"p\">),\u003C\u002Fspan>  \u003Cspan class=\"nv\">$matico_version\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">wp_localize_script\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \u003Cspan class=\"s1\">'matico-child-script'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"s1\">'matico_child_script_obj'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"k\">array\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan> \n        \u003Cspan class=\"s1\">'checkout_page_url'\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">wc_get_checkout_url\u003C\u002Fspan>\u003Cspan class=\"p\">(),\u003C\u002Fspan>\n    \u003Cspan class=\"p\">)\u003C\u002Fspan>\n\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\n\u003Ccode>wp_enqueue_script()\u003C\u002Fcode> is used to load our custom script file (\u003Ccode>script.js\u003C\u002Fcode>), which contains the jQuery code.\u003C\u002Fli>\n\u003Cli>\n\u003Ccode>wp_localize_script()\u003C\u002Fcode> passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"step-2-handle-the-ajax-request\" href=\"#step-2-handle-the-ajax-request\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 2: Handle the AJAX Request\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n\u003Cp>Here’s the jQuery code snippet:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">$\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">MaticoChildThemeConfig\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"na\">init\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">bindEvents\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n        \u003Cspan class=\"p\">},\u003C\u002Fspan>\n        \u003Cspan class=\"na\">bindEvents\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"nf\">$\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nb\">document\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">on\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">click\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.buy-now\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">handleBuyNowClick\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n        \u003Cspan class=\"p\">},\u003C\u002Fspan>\n        \u003Cspan class=\"na\">handleBuyNowClick\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">event\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">event\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">preventDefault\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n\n            \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">$button\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">$\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">),\u003C\u002Fspan>\n                \u003Cspan class=\"nx\">quantity\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">parseFloat\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">closest\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.quantity\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">find\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">.qty\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">val\u003C\u002Fspan>\u003Cspan class=\"p\">())\u003C\u002Fspan> \u003Cspan class=\"o\">||\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"nx\">productID\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">data\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">id\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\n            \u003Cspan class=\"kd\">var\u003C\u002Fspan> \u003Cspan class=\"nx\">data\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"na\">product_id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">productID\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">quantity\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">quantity\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n\n            \u003Cspan class=\"nx\">$\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">ajax\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan>\n                \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">POST\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">url\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">wc_add_to_cart_params\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">wc_ajax_url\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">toString\u003C\u002Fspan>\u003Cspan class=\"p\">().\u003C\u002Fspan>\u003Cspan class=\"nf\">replace\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">%%endpoint%%\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">add_to_cart\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">),\u003C\u002Fspan>\n                \u003Cspan class=\"na\">data\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">data\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">dataType\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">json\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">beforeSend\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                    \u003Cspan class=\"nx\">$button\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">addClass\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">loading\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n                \u003Cspan class=\"p\">},\u003C\u002Fspan>\n                \u003Cspan class=\"na\">success\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">function \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                    \u003Cspan class=\"k\">if \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">error\u003C\u002Fspan> \u003Cspan class=\"o\">&&\u003C\u002Fspan> \u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">product_url\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                        \u003Cspan class=\"nb\">window\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">location\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">href\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">res\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">product_url\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n                    \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">else\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                        \u003Cspan class=\"nb\">window\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">location\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">href\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">matico_child_script_obj\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">checkout_page_url\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n                    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n                \u003Cspan class=\"p\">}\u003C\u002Fspan>\n            \u003Cspan class=\"p\">});\u003C\u002Fspan>\n        \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">};\u003C\u002Fspan>\n\n    \u003Cspan class=\"nx\">MaticoChildThemeConfig\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">init\u003C\u002Fspan>\u003Cspan class=\"p\">();\u003C\u002Fspan>\n\u003Cspan class=\"p\">})(\u003C\u002Fspan>\u003Cspan class=\"nx\">jQuery\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Explanation:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>When the “Buy Now” button is clicked, we prevent the default action to avoid page reload.\u003C\u002Fli>\n\u003Cli>We gather the product ID and quantity from the current product page.\u003C\u002Fli>\n\u003Cli>An AJAX request is sent to WooCommerce’s add_to_cart endpoint, which adds the product to the cart.\u003C\u002Fli>\n\u003Cli>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.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>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.\u003C\u002Fp>\n",{"rendered":372,"protected":46},"\u003Cp>When you’re running an online store using WooCommerce, making the purchasing process as seamless as…\u003C\u002Fp>\n",{"footnotes":6},[49],[376,58,4],28,[378,41,61,62,63,65,66,379,69,70],"post-44","tag-php",{"edited_at":381,"published_at":382,"reactions":203,"comments":75,"reading_time":203,"body_markdown":383},"2024-08-13T19:06:11Z","2024-08-13T19:04:37Z","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.\n\n## Step 1: Add the \"Buy Now\" Button\nFirst, 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.\n\nHere's the PHP code snippet:\n```php\nadd_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );\nfunction add_content_after_addtocart() {\n    $current_product_id = get_the_ID();\n    $product = wc_get_product( $current_product_id );\n\n    if( $product->is_type( 'simple' ) ){\n        echo '\u003Cbutton data-id=\"'.$current_product_id.'\" class=\"buy-now button\">\u003Ci class=\"matico-icon-toys\">\u003C\u002Fi>'.__('Buy Now', 'woocommerce').'\u003C\u002Fbutton>';\n    }\n}\n```\n**Explanation:**\n- We use the `woocommerce_after_add_to_cart_button` hook to insert our \"Buy Now\" button right after the \"Add to Cart\" button.\n- The `get_the_ID()` function retrieves the current product ID, and `wc_get_product()` gets the product details.\n- We check if the product is of type simple and then render the button with the appropriate data-id attribute and a custom icon.\n\n## Step 3: Enqueue the Script\nNext, 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:\n```php\nwp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '\u002Fassets\u002Fjs\u002Fscript.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);\n\nwp_localize_script( 'matico-child-script', 'matico_child_script_obj',\n    array( \n        'checkout_page_url' => wc_get_checkout_url(),\n    )\n);\n```\n**Explanation:**\n- `wp_enqueue_script()` is used to load our custom script file (`script.js`), which contains the jQuery code.\n- `wp_localize_script()` passes PHP data to the script, such as the checkout page URL, allowing us to use it within the script.\n\n## Step 2: Handle the AJAX Request\nFinally, 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.\n\nHere's the jQuery code snippet:\n```javascript\n(function ($) {\n    var MaticoChildThemeConfig = {\n        init: function () {\n            this.bindEvents();\n        },\n        bindEvents: function () {\n            $(document).on('click', '.buy-now', this.handleBuyNowClick);\n        },\n        handleBuyNowClick: function (event) {\n            event.preventDefault();\n\n            var $button = $(this),\n                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,\n                productID = $button.data('id');\n\n            var data = {\n                product_id: productID,\n                quantity: quantity,\n            };\n\n            $.ajax({\n                type: 'POST',\n                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),\n                data: data,\n                dataType: 'json',\n                beforeSend: function () {\n                    $button.addClass('loading');\n                },\n                success: function (res) {\n                    if (res.error && res.product_url) {\n                        window.location.href = res.product_url;\n                    } else {\n                        window.location.href = matico_child_script_obj.checkout_page_url;\n                    }\n                }\n            });\n        }\n    };\n\n    MaticoChildThemeConfig.init();\n})(jQuery);\n```\n**Explanation:**\n- When the \"Buy Now\" button is clicked, we prevent the default action to avoid page reload.\n- We gather the product ID and quantity from the current product page.\n- An AJAX request is sent to WooCommerce's add_to_cart endpoint, which adds the product to the cart.\n- 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.\n\n## Conclusion\nBy 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.\n",{"self":385,"collection":390,"about":392,"author":394,"replies":396,"version-history":399,"predecessor-version":402,"wp:attachment":406,"wp:term":409,"curies":414},[386],{"href":387,"targetHints":388},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F44",{"allow":389},[17],[391],{"href":86},[393],{"href":89},[395],{"embeddable":31,"href":92},[397],{"embeddable":31,"href":398},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=44",[400],{"count":49,"href":401},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F44\u002Frevisions",[403],{"id":404,"href":405},106,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F44\u002Frevisions\u002F106",[407],{"href":408},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=44",[410,412],{"taxonomy":111,"embeddable":31,"href":411},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=44",{"taxonomy":9,"embeddable":31,"href":413},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=44",[415],{"name":29,"href":30,"templated":31},{"id":417,"date":418,"date_gmt":418,"guid":419,"modified":421,"modified_gmt":421,"slug":422,"status":40,"type":41,"link":420,"title":423,"content":425,"excerpt":427,"author":49,"featured_media":75,"comment_status":51,"ping_status":51,"sticky":46,"template":6,"format":52,"meta":429,"categories":430,"tags":431,"class_list":433,"post_image_original":141,"devto_meta":436,"_links":439},51,"2024-08-10T12:41:39",{"rendered":420},"https:\u002F\u002Fportal.pluginizelab.com\u002Fhow-to-install-wordpress-and-essential-plugins-using-wp-cli\u002F","2026-08-17T12:17:42","how-to-install-wordpress-and-essential-plugins-using-wp-cli",{"rendered":424},"How to Install WordPress and Essential Plugins Using WP-CLI",{"rendered":426,"protected":46},"\u003Cp>Setting up a WordPress site can be time-consuming if done manually, but with \u003Ca href=\"https:\u002F\u002Fwp-cli.org\u002F#installing\" target=\"_blank\" rel=\"noopener noreferrer\">WP-CLI\u003C\u002Fa>, the process becomes much faster and more efficient. In this tutorial, I’ll show you how to install WordPress along with a few essential plugins using a single command sequence.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"step-1-download-wordpress-core\" href=\"#step-1-download-wordpress-core\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 1: Download WordPress Core\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>First, you’ll need to download the WordPress core files. This command will download WordPress to a directory called \u003Ccode>mywebsite\u003C\u002Fcode>.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core download --path=mywebsite\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-2-create-the-configuration-file\" href=\"#step-2-create-the-configuration-file\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 2: Create the Configuration File\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Navigate into the newly created \u003Ccode>mywebsite\u003C\u002Fcode> directory, and create the \u003Ccode>wp-config.php\u003C\u002Fcode> file with your database credentials:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>cd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-3-create-the-database\" href=\"#step-3-create-the-database\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 3: Create the Database\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Now, create the database using the following command:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp db create\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-4-install-wordpress\" href=\"#step-4-install-wordpress\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 4: Install WordPress\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Install WordPress using your local URL, site title, and admin credentials:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"step-5-install-and-activate-plugins\" href=\"#step-5-install-and-activate-plugins\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step 5: Install and Activate Plugins\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>Finally, install and activate the necessary plugins. In this example, we’ll install WooCommerce and Dokan Lite:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch3>\n  \u003Ca name=\"allinone-command-sequence\" href=\"#allinone-command-sequence\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  All-in-One Command Sequence\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>For your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight plaintext\">\u003Ccode>wp core download --path=mywebsite\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\nwp db create\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Prerequisite:\u003C\u002Fstrong> Install \u003Ca href=\"https:\u002F\u002Fwp-cli.org\u002F#installing\" target=\"_blank\" rel=\"noopener noreferrer\">WP-CLI\u003C\u002Fa> to you machine.\u003C\u002Fp>\n",{"rendered":428,"protected":46},"\u003Cp>Setting up a WordPress site can be time-consuming if done manually, but with WP-CLI, the process…\u003C\u002Fp>\n",{"footnotes":6},[49],[376,4,432],31,[434,41,61,62,63,65,66,379,70,435],"post-51","tag-wpcli",{"edited_at":141,"published_at":437,"reactions":326,"comments":75,"reading_time":159,"body_markdown":438},"2024-08-10T12:41:39Z","Setting up a WordPress site can be time-consuming if done manually, but with [WP-CLI](https:\u002F\u002Fwp-cli.org\u002F#installing), the process becomes much faster and more efficient. In this tutorial, I'll show you how to install WordPress along with a few essential plugins using a single command sequence.\n\n### Step 1: Download WordPress Core\nFirst, you'll need to download the WordPress core files. This command will download WordPress to a directory called `mywebsite`.\n```\nwp core download --path=mywebsite\n```\n\n### Step 2: Create the Configuration File\nNavigate into the newly created `mywebsite` directory, and create the `wp-config.php` file with your database credentials:\n```\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\n```\n\n### Step 3: Create the Database\nNow, create the database using the following command:\n```\nwp db create\n```\n\n### Step 4: Install WordPress\nInstall WordPress using your local URL, site title, and admin credentials:\n```\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\n```\n\n### Step 5: Install and Activate Plugins\nFinally, install and activate the necessary plugins. In this example, we'll install WooCommerce and Dokan Lite:\n```\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n```\n\n### All-in-One Command Sequence\nFor your convenience, here’s the entire process in one continuous block of code. Just copy and paste the code below into your terminal to install WordPress and a few plugins with a single command.\n```\nwp core download --path=mywebsite\ncd mywebsite\nwp config create --dbname=silk --dbuser=root --dbpass=root\nwp db create\nwp core install --url=mywebsite.test --title=\"Site Title\" --admin_user=admin --admin_password=admin --admin_email=mywebsite@welabs.dev\nwp plugin install woocommerce --activate\nwp plugin install dokan-lite --activate\n```\n**Prerequisite:** Install [WP-CLI](https:\u002F\u002Fwp-cli.org\u002F#installing) to you machine.\n",{"self":440,"collection":445,"about":447,"author":449,"replies":451,"version-history":454,"predecessor-version":457,"wp:attachment":461,"wp:term":464,"curies":469},[441],{"href":442,"targetHints":443},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F51",{"allow":444},[17],[446],{"href":86},[448],{"href":89},[450],{"embeddable":31,"href":92},[452],{"embeddable":31,"href":453},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=51",[455],{"count":49,"href":456},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F51\u002Frevisions",[458],{"id":459,"href":460},110,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F51\u002Frevisions\u002F110",[462],{"href":463},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=51",[465,467],{"taxonomy":111,"embeddable":31,"href":466},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=51",{"taxonomy":9,"embeddable":31,"href":468},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=51",[470],{"name":29,"href":30,"templated":31},1791053388887]