Developers
      Back to home
      1. Knowledge Base
      2. Developers

      How to Add an “Add to Cart” Button for a Single Item on a Page

      If you'd like to feature a single product from your menu on a specific page—such as a special promotion, landing page, or blog post—you can do so by using a custom "Add to Cart" button. This function allows your customers to add an item directly to their cart from any page on your site.

      ⚠️ Disclaimer: This feature is designed only to display an “Add to Cart” button for a single item. You are responsible for creating and maintaining the webpage where the button will appear. Styling, placement, and updates to the page are not handled automatically.

      Step-by-Step Instructions:

      1. Log in to Your Smart Online Order Plugin

      Begin by logging into your WordPress site where the Smart Online Order plugin is installed.

      2. Access the Plugin Settings

      Once logged in:

      • Locate and click on the red Clover Orders button from your WordPress Dashboard sidebar.

      • Then, select the Settings tab from the dropdown.

      3. Navigate to Items, Images, and Description

      In the settings menu:

      • Click on the Items Images and Description option from the blue vertical menu on the left-hand side.

      4. Select the Item You Want to Feature

      • Scroll through the list of your items or use the search bar to find the one you want.

      • Hover your cursor over the item you’d like to add the button for.

      • Click on the Edit Image option that appears.

      5. Locate the "Add to Cart Button" Section

      Once you’re on the item edit page:

      • Scroll until you see a section titled “Add to Cart Button.”

      • Under this section, you will find a code snippet specifically for that item.

        add0)2133

      6. Copy and Paste the Code to Your Desired Page

      • Copy the entire code provided.

      • Go to the WordPress page or post where you want the button to appear.

      • Paste the code into the content editor (you may need to use the “Text” or “Code” view depending on your page builder).

      🛠️ You may also use the WordPress shortcode block, HTML block, or custom HTML widgets—depending on your theme and editor.

      Important Notes and Disclaimers

      • 🛒 Functionality: This feature is strictly meant to add an “Add to Cart” button for a single item. It does not add a product image, description, or any styling automatically.

      • 🎨 Customization: You are responsible for styling and formatting the page. This includes adding any descriptive text, layout spacing, or images you’d like to appear alongside the button.

      • 🔄 Maintenance: If you make changes to your menu or item names in Clover, make sure to revisit and update the page where your button appears to avoid broken links or outdated info.

      • 🚫 Support Limitations: Zaytech does not offer custom webpage editing or layout customization for this feature. The implementation of the button on your chosen page is entirely up to you or your web designer.

      If you need additional help or want someone to manage your promotions and custom ordering pages, feel free to contact our Sales Team at sales@zaytech.com.