Dynamic Checkout for WooCommerce: FAQ's & Troubleshooting

Purpose: View some frequently asked questions about the Checkout feature for WooCommerce.

General troubleshooting guidelines

If you're having issues with Dynamic Checkout appearing correctly, here are some steps for you to take to try to resolve the issue:

1. Check that you have the latest version of Dynamic Checkout installed here
2. Deactivate external plugins

Please note that the WooCommerce Role-Based Shipping/Payment Methods plug in is not compatible with Dynamic Checkout and must be deactivated in order for checkout methods to appear correctly. 

Q: I published my configuration, but the methods do not appear in the checkout. What's going wrong?

There are a few reasons why this could happen:

1. If you receive an error message when trying to publish your checkout, it could be that your configuration was not published correctly.
   
   
   Go to the Dynamic Checkout tab in your Sendcloud panel and make sure the configuration you just published does not have an error status.
   
   1. Try to republish your configuration
   2. Try to refresh your API keys
   3. Reconnect your shop to Sendcloud. Please note your checkout configuration will be deleted and you will have to create a new one.
      
      
2. Your plugin or Woocommerce/Wordpress may need to be updated.
   Please make sure you have the latest version of the Sendcloud plugin installed, and that you have your Woocommerce and Wordpress up to date (version 4.0 and up). 
   
   
3. You tried creating a nominated day method in Woocommerce settings instead of the Sendcloud panel.
   Because of the way that Woocommerce works, the method "Nominated Day Delivery" is a selectable option in the Woocommerce shipping zone settings.  Trying to create a method this way will not display the correct method in the checkout, since there is nothing configured in your Sendcloud merchant account. The method must first be configured in the Sendcloud panel, then published to the plugin. Please delete the manual method and configure a shipping method in the Sendcloud Dynamic Checkout tab.
   
   
4. It could be due to duplicate shipping zones in WooCommerce.
   See below.
   
   
5. Pricing is missing for the selected shipping method. 

   You must add pricing to a shipping method in Woocommerce before it will be visible in the checkout for your customer.

   • Find out more about shipping rates and how to enable free shipping and discount coupons in this article. 
   • If you decide not to use shipping rates, you can still set up manual pricing in WooCommerce by following this guide.

Duplicate shipping zones

If you have created a delivery zone in your Dynamic Checkout configuration for a zone that was already present in WooCommerce, you may see duplicate zones appear in your WooCommerce dashboard. The old shipping zone may be cancelling out the newly created delivery zone.

To resolve this issue, you need to give priority to the zone you just created in Sendcloud. 

• Go to your WooCommerce dashboard > Settings > Shipping
• Make sure that the new zone you created in Sendcloud appears above the list in WooCommerce by dragging and dropping the new zone above the pre-existing zone
  
  
• Recreate any WooCommerce created methods from the old zone that you want to continue using (e.g. local pick up, service point, etc."
• You will only have to complete this step the very first time you publish your Dynamic Checkout configuration. Additional methods will now appear in this newly created zone. 

Tip: You can easily see which shipping zone is the one created via Dynamic Checkout because, under the Shipping method(s) column, the name shown will be the one you entered during Dynamic Checkout configuration.

In the example above, you can see the name entered under Method details ("PostNL - Signature Required") appears in WooCommerce Shipping Zones. This is the shipping method that needs to be given priority. 

Q: I'm seeing an error message when I try to publish my Dynamic Checkout configuration. How do I fix this? 

If, for some reason, your Dynamic Checkout configuration can't be published, one of the following error messages will be displayed which also indicate how to resolve the issue:

1. Currency mismatch
   Solution - change the currency to match your WooCommerce shop currency via the dropdown menu next to New delivery zone
   
   
   
   
2. Invalid signature
   Solution - refresh your API keys
   
   
   
   
3. Missing fields
   Solution - check that you have supplied a delivery method in the checkout configuration page 
   

Q: I added pricing, but the shipping method is still missing. What else could be going wrong? 

A: The customer must select a country before seeing a shipping method at checkout

Because Dynamic Checkout shipping methods are configured for a specific country, the customer must first select their shipping country in the checkout before the method will be visible to them. 

Some themes will display a message such as "Enter your address to view shipping options" to the customer.  Double check if this error message is displayed in your particular theme/setup configuration and ensure that your customers are clearly instructed at checkout to enter their address details to see available shipping methods.

Q: I added pricing for a custom Woocommerce shipping class and the Sendcloud method is not visible in the checkout. What's going wrong? 

A: This could be due to the way you set up pricing for the delivery method in WooCommerce. Sendcloud delivery methods can be configured in the same way as WooCommerce Flat Rate shipping works. 

For example, if you:

Set the cost to 0, add only custom class pricing: 

• Delivery method is visible in the checkout since main cost has a value
• If items in cart don’t have a custom shipping class price defined, method price is 0
• If items have a custom shipping class, the price for that custom class is used

Set the cost to none (leave the field empty), add only custom class pricing: 

• If no items in the cart have that custom shipping class, delivery method is hidden
• If an item in the cart has that custom shipping class, the delivery method is available

Please note that in the future we will add the possibility to disable delivery methods based on weight classes. 

Q: Why can't I see the delivery date or service point widgets?

If the custom shipping options UI from Dynamic Checkout are not visible, this is the result of a conflicting plugin. Deactivate your plugins to resolve the issue. 

Q: Why is the service point picker/widget not displaying properly on mobile view or small screens?

For standard mobile sizes, the service point picker should appear correctly within the screen space available. However, in some WooCommerce themes, the picker may appear distorted as in the example below:

This is a result of the actual theme being used, and not due to the design of the Sendcloud service point picker. A workaround is to include the following custom CSS to ensure that the widget exists in its own row:

.woocommerce-shipping-totals {
display: flex;
flex-direction: column;
}

.woocommerce-shipping-methods li {
flex-direction: column;
}

The widget should now appear correctly: 

Note: This may work for some custom WooCommerce themes, but not all. If a theme uses a row-based layout to provide an overview of shipping methods on the checkout page, this kind of layout issue can appear. 

Q: Why is the widget not displaying correctly?

The shop theme may be interfering with the style of the widget, resulting in the date selectors appearing smaller, such as in the below example:

To ensure that the date selectors appear as intended, follow these steps:

1. Navigate to Appearance in the Wordpress/WooCommerce dashboard
2. Click  Customize
3. Click Additional CSS in the theme customization menu
4. Paste the following line into the text field: 

 .sc-delivery-date-wrapper { display: block !important; }

The widget should now be displayed correctly:

Remember to click on Publish to save your changes. 

Q: How can I style the Checkout widget so that it reflects my brand?

The Checkout widget has been designed to meet accessibility standards, however, we do understand if you would like to restyle it to have it represent your brand. Follow these steps to override the standard styling:

1. Navigate to Appearance in the Wordpress/WooCommerce dashboard
2. Click  Customize
3. Click Additional CSS in the theme customization menu
4. Paste this block of code into the text field:

.sc-shipping-option.sc-shipping-option {
/* typography */
--sc-font-size: 15px;
--sc-font-weight: inherit;
--sc-font-family: Georgia, serif;
​
/* colors */
--sc-accent-color: #d71c00;
--sc-accent-color-dark: #a30916;
--sc-focus-color: #e58722;
--sc-text-color: #fff;
--sc-dimmed-text-color: #d4d4d4;
--sc-background-color: #fff;
--sc-delivery-date-background-color: #323232;
--sc-border-color: #e7e7e7;
--sc-box-shadow-color: #1128570d;
--sc-sendcloud-logo-color: #c4c4c4;
​
/* miscellaneous */
--sc-spacing: 4px;
--sc-border-width: 2px;
--sc-selected-border-width: 2px;
--sc-border-radius: 12px;
​
/* private */
--sc-item-width: 120px;
--sc-item-gap-width: 8px;
}

You'll notice that the widget style has changed:

Now you can adapt the colors, font style and size to fit your brand style.

When you're happy with the appearance of your widget, click Publish.

Q: Can I change the appearance of my service point picker?

If you've created a Service point delivery Dynamic Checkout method, you can customize the appearance of the Sendcloud service point picker using CSS. 

1. Navigate to Appearance in the Wordpress/WooCommerce dashboard
2. Click  Customize
3. Click Additional CSS in the theme customization menu
4. Provide CSS custom properties on the .sc-shipping-option element

.sc-shipping-option {
--sc-font-size: 1em;
--sc-font-family: Georgia, Times, serif;
--sc-border-radius: 0;

--sc-accent-color: #e24c00;
--sc-text-color: #ffffff;
--sc-dimmed-text-color: #afa6a6;
--sc-background-color: #111111;
--sc-panel-background-color: #232323;
--sc-border-color: #8a2b03;
}

You can also change the appearance of the service point picker by overriding your shop's default theme using CSS. Note: Make sure to add these styles after the link element that’s referencing the main checkout-plugin-ui.css file; otherwise, the stylesheet will override your styles.