Checkout feature FAQ's & Troubleshooting for WooCommerce

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

Related articles

→ How to install the checkout feature for WooCommerce

→ How to configure the checkout

→ How to add nominated day checkout pricing in WooCommerce

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

There are two main reasons why this could happen:

It could be that your configuration was not published correctly. Go to the Checkout tab in your Sendcloud panel and make sure the configuration you just published does not have an error status. If so, try to republish the configuration. If the error persists, try to reconnect the shop or contact support.

Click here to see how to reconnect your shop to Sendcloud. Please note that you will have to enter a new checkout configuration if you reset the connection in this way.
It could be due to duplicate shipping zones in WooCommerce. See below.

Duplicate shopping zones

If you have created a delivery zone in your 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

Tip: You can easily see which shipping zone is the one created via your Sendcloud Checkout because, under the Shipping method(s) column, the name shown will be the one you entered during 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: 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:

Navigate to Appearance in the Wordpress/WooCommerce dashboard
Click Customize
Click Additional CSS in the theme customization menu
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:

Navigate to Appearance in the Wordpress/WooCommerce dashboard
Click Customize
Click Additional CSS in the theme customization menu
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;
}