Checkout feature FAQ's & Troubleshooting for WooCommerce

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

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 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: Can I disable a method for a specific weight class? 

Weight based pricing and disabling/enabling delivery methods for specific weight classes is currently not available. This something we are actively working on including in the future.

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.