Purpose of this document

This document provides implementation instructions for the custom JavaScript (custom JS) approach to activate Buy with Prime variations. These instructions support ecommerce sites provided by WooCommerce.

Prerequisites

To support variations and quantity for your products, you must first add the Buy with Prime button code to your ecommerce site. For more information, go to Install button code on your site.

Important: You can't import more than 100 variants for a product from Seller Central to the merchant console.

Install variations on WooCommerce using the Word Press plugin

To install variations on your WooCommerce site using the Word Press plugin, perform the following steps:

1. Install the Buy with Prime button code on your ecommerce site. For more information, go to Install button code on your site.

2. Confirm that the products appear correctly in merchant console and WooCommerce.

   • The "add_action" script appears in the site's snippets along with the Buy with Prime button code. The result should look similar to the following example:

     <?php  
     add_action( 'woocommerce_after_add_to_cart_form', 'QL_add_text_under_add_to_cart' );  
     function QL_add_text_under_add_to_cart () {  
         global $product;  
         ?>
     
     <script async fetchpriority='high' src='https://code.buywithprime.amazon.com/bwp.js'></script>
     
     <div
         id="amzn-buy-now"
         data-site-id="pk96aw05da"
         data-widget-id="w-952cc5Z3yn8c7PzuhiZTXa"
         data-sku="<?php echo $product->get_sku(); ?>"
     ></div>
       <?php
     }
     

   • The appropriate SKUs appear in your WooCommerce product admin, and that they match with the SKUs in merchant console.

   • The product detail page URL appears in merchant console for both the parent and variation products.

   • The Buy with Prime button code appears correctly by inspecting the website and checking for the Buy with Prime widget or a status code (for example, 601 or 901) in the browser's console. To identify a status code on your site:

     1. Open your product detail page.
     2. Open the context (right-click) menu for the page, and then choose Inspect.
     3. In the Web Developer Tools pane, select the Console tab.
     4. Press Ctrl+F or Cmd+F, and then search for “STATUS_CODE”.
     5. The browser console displays the status code.
        If you see the widget or status code, the code is installed properly.
        Note: If you’re using Firefox as your browser, go to the Console tab, and then select the Logs tab.

If you’ve met the initial conditions and followed these instructions, but the button is still missing or isn’t changing between the variations, proceed to the “Install variations using custom JS variations code” section.

Install variations using custom JS variations code

To install variations on your WooCommerce site using the custom JS variations code, perform the following steps:

1. In WooCommerce admin or the WordPress cPanel dashboard, in the Code Snippets section, choose Add new.

2. On the next page, select Add Your Custom Code (New Snippet).

3. For the label for the new snippet, use "Buy with Prime Variations”.

4. For the Code Type, choose PHP Snippet (not HTML Snippet).

5. Paste the following code into the code textbox:

   /_ Inline script printed out in the footer _/  
   add_action('wp_footer', 'add_script_wp_footer');  
   function add_script_wp_footer() {  
       ?>  
           <script id="custom_js_solution">  
               const getQuantity = () => {  
                   return document.querySelector("div.quantity input[name='quantity']");  
               };  
               const getQuantityValue = () => {  
                   return Number(getQuantity().value);  
               }  
               const getSku = () => {  
                   return document.querySelector('span.sku');  
               }  
               const fireUpdate = () => {  
                   let quantity = getQuantityValue();  
                   let curSku = getSku().textContent;  
                   let variantSkus = [];  
                   window.bwp.updateWidget(curSku, quantity, variantSkus);  
               }
   
           let inputQuantity = getQuantity();
           if (inputQuantity) {
               inputQuantity.addEventListener('change', (e) => {  
                   fireUpdate();  
               });
           }
           
           let observer = new MutationObserver((mutations) => {
                 mutations.forEach((mutation) => {
                   if (mutation.type === 'childList') {
                       setTimeout(() => {
                           fireUpdate();
                       }, 100);
                   }
                 });
           });
           // Options for the observer (which mutations to observe)
           const config = { attributes: true, childList: true, subtree: true };
           
           let skuElem = getSku()
           if (skuElem) {
               observer.observe(skuElem, config);
           }
       </script>
   <?php
   
   }
   
   

6. Click Active, and then Update.

7. Verify that the variations are now working on an active product detail page. You know the code is working if the button dims as you switch the variations.

Verify the variations implementation:

1. Check if you still have a SKU in the parent product in WooCommerce. If so, remove the parent SKU.
2. Confirm that you have unique SKUs for all variants in WooCommerce. If the SKUs are the same across variants, adjust the variant SKUs to make them unique.
3. Inspect an active product detail page. If the Buy with Prime button isn’t visible, move the Buy with Prime button code to a different hook in the website code. For more information, go to Install button code on your site.

Note: It can take up to 10 minutes for changes to appear. Wait until at least 10 minutes before determining that the changes aren’t working.

If you’ve followed these instructions, but the button is still missing or isn’t changing between the variations, contact Merchant Support.