All Collections
Divi Documentation
Customizing Divi
Using the Divi Builder on WooCommerce Cart/Checkout pages
Using the Divi Builder on WooCommerce Cart/Checkout pages

Woocommerce automatically creates the Cart page and Checkout page using it's own shortcodes

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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 takes 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 has 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.

As an example, you can use a pre-made layout and in the layout place the Woocommerce Cart Shortcode:

Customize the Checkout Page

Similarly, the Checkout Page is created using the checkout shortcode: [woocommerce_checkout] 

Just like in the case of the Cart Page, we can place that shortcode in the 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?