Even if Woocommerce automatically builds the Cart and Checkout pages(by using its own shortcodes), we can still use Divi Builder to add a personal touch to those pages.

Customize the Cart Page

The Cart page is built by WooCommerce using this shortcode: [woocommerce_cart] , that's all it take to render the Cart Page. 

Since that's a simple shortcode we can use Divi Builder to customize that page.

First edit the Cart Page. Usually the page as the name Cart. When editing that page the WooCommerce shortcode is present:

Copy the shortcode to the clipboard and activate Divi Builder. By default the shortcode will be placed in a text module. 

It's always a good practice to use the Code Module when working with shortcodes. As long as the shortcode is placed anywhere on the page, in a Code module, you can add any other modules with the Divi Builder.

An example of you can use a pre-made layout and in the layout place the Woocommerce Cart Shortcode:

Customize the Checkout Page

Similar to the Cart Page, the Checkout Page is created using the the checkout shortcode: [woocommerce_checkout] 

Just like in the case of the Cart Page, we can place that shortcode in a Code Module anywhere in the layout.

All the functionality that WooCommerce creates for both the Cart Page and the Checkout Page is still in place.

Did this answer your question?