Sell Your WooCommerce Products With Smart Builder

WooCommerce is a WordPress plugin that helps you create an online shop and conduct eCommerce transactions.

With the WooCommerce App in Smart Builder, you can guide your visitors to a secure WooCommerce checkout for purchases promoted by your landing pages, all with a single click.

This article will explain how to create a button that will add items to your cart directly from your landing page.

What you'll need:

1. A WordPress site with a WooCommerce plugin installed.
2. Owner or Administrator user roles within the WordPress Site.
3. A Smart Builder page connected to an SSL-secure domain (https://).
   • See our documentation for more about Connecting Your Domain to Unbounce.
4. A product in WooCommerce.

Installing the WooCommerce App

1. Navigate to the Apps  tab within the left-hand side of the menu of Smart Builder.
2. Search and locate the WooCommerce App.
3. Click the plusbutton next to WooCommerce to install the app.
4. You may see a dialog box that appears, explaining that you can swap an element on your page with this App:
   

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page.

Adding a WooCommerce Product to Your Page

Now that you've installed the WooCommerce App, you can begin adding WooCommerce buttons to Smart Builder.

1. Select any element on your page (an element you wish to replace with a WooCommerce button).
2. Click the Change Element icon that appears at the bottom of the element.
3. Within the Change Element window, scroll down the menu and select WooCommerce from the list, within the E-commerce category:
   
4. A WooCommerce placeholder will appear in Smart Builder. 
   
5. Click the WooCommerce placeholder and select the gear icon to launch the WooCommerce Button Settings:
   
   
6. Customize the button settings using the fields provided. Be sure to include details about the product that you would like to add to your landing page:
   • Button Text: The text that will appear on your WooCommerce button. Choose a strong call to action, such as 'Add to Cart', 'Buy Now', etc.
   • Store URL: This is the URL to your secure WooCommerce store.
   • Product Type: Select the Product Type you would like to feature on your page.
     • You will need to add a unique WooCommerce Product Type; refer to WooCommerce's documentation for more information.
   • Product ID: Add the Product ID.
     • See WooCommerce's documentation to learn more about where to locate your Product ID.
   • Redirect: Define the redirect location that you want your visitors to land on after they click the button.
     • If you select the option to Redirect to a Page, a new field will appear where you can input the WordPress Page Slug.
       • For the redirect option to work you must navigate back to WooCommerce, and tick the Enable AJAX add to cart buttons on archives option within the Settings –> Products -> General tab in WooCommerce.
       • Be sure to also disable Redirect to the cart page after successful addition.
7. Click the Save Settings button to finalize the changes. 
8. The WooCommerce button will appear in Smart Builder:
   

You're done! Be sure to Save and Publish your page.

Testing Your WooCommerce Product Button

1. Navigate to your live landing page, or click the Preview button at the top of Smart Builder.
2. Click the WooCommerce button.
3. The target page will load and the product will automatically add to the cart.