--- title: Advanced Checkout Details Overview description: "The [DiviMerc Advanced Checkout Details module](https://divimerc.com/modules/advanced-checkout-details/) replaces WooCommerce's default order summary with a customizable display of order items, coupons, shipping, delivery details, and totals. It updates automatically as customers make changes during checkout. **Important Note:** - The module only works…" url: "https://divimerc.com/docs/advanced-checkout-details/" updated: "2026-10-27" category: Modules --- # Advanced Checkout Details Overview The [DiviMerc Advanced Checkout Details module](https://divimerc.com/modules/advanced-checkout-details/) replaces WooCommerce's default order summary with a customizable display of order items, coupons, shipping, delivery details, and totals. It updates automatically as customers make changes during checkout. **Important Note:** - The module only works on the WooCommerce checkout page, either directly or through a Divi Theme Builder template assigned to that page. - Only one Advanced Checkout Details module can appear on a checkout page. Additional instances will not be displayed. Let's see the settings in brief and how to make better use of them — ## Content Tab The Content tab lets you choose a layout, manage order details, customize coupons and shipping options, arrange summary sections, and configure checkout behavior. ### Content ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-1.webp) - **Source:** Choose which order data appears in the Divi Visual Builder. - **Default:** Display sample products, coupons, shipping rates, and taxes for previewing the module. - **Cart Data:** Display products, coupons, shipping rates, and taxes from your own cart. **Note:** Source only affects the Visual Builder preview. The live checkout always displays the customer's actual cart. If your cart is empty, Cart Data falls back to sample data. ### Template ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-2.webp) - **Select Template:** Choose a layout for the checkout order summary. - **Minimal:** Display a clean layout with product images and simple rows without dividers. - **Table:** Display a table-style layout with row dividers and a highlighted title area. ### Title ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-3.webp) - **Show Title:** Show or hide the order summary title. - **Title:** Enter a custom title for the order summary. - **Show Item Count:** Display the total number of items beside the title, including product quantities. ### Totals The Totals settings let you choose which order totals appear and customize their labels and details. They are divided into Actions and Settings tabs. #### Actions ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-4.webp) - **Subtotal:** Show or hide the subtotal before discounts and other charges. - **Discount:** Show or hide the total discount applied through coupons. - **Shipping:** Show or hide the shipping cost. - **Tax:** Show or hide applicable tax amounts. - **Order Total:** Show or hide the final order total. #### Settings ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-5.webp) - **Item Count On Subtotal:** Display the number of items beside the subtotal label. - **Subtotal Label:** Customize the subtotal text. - **Coupon Codes On Discount:** Display applied coupon codes beside the discount label. - **Discount Label:** Customize the discount text. - **Method On Shipping:** Display the selected shipping method's name beside the shipping label. - **No Address Yet:** Enter a message to show when shipping costs cannot yet be calculated. - **Shipping Label:** Customize the shipping cost label. - **Rate On Tax:** Display applicable tax rates beside the tax label. - **One Row Per Tax:** Display each tax rate in a separate row. Disable it to combine the rates into one row. - **Tax Label:** Customize the label for the combined tax row. (Applies when One Row Per Tax is disabled.) - **Tax Value:** Customize the combined tax text using {tax} for the amount and {tax_name} for the tax rate names. (Applies when One Row Per Tax is disabled.) - **Total Label:** Customize the final total label. **Note:** The Discount row only appears when a coupon is applied. The Tax row appears when tax applies, even if product prices already include tax. ### Order Items The Order Items settings let you control how products and their details appear in the summary. ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-6.webp) - **Show Order Items:** Show or hide the products included in the order. - **Items Layout:** Choose how products appear. - **List:** Display product names and prices in a list. - **Images only:** Display product thumbnails without the product list. - **Images, then the list:** Display product thumbnails followed by a list of product details. - **Show Product Image:** Show or hide product thumbnails. (List layout only.) - **Show Product Attributes:** Display selected product attributes, such as size and color, along with other item details. (Not displayed in Images only layout.) - **Hide Attribute Label:** Hide attribute labels and display only their values. (Applies when Show Product Attributes is enabled.) - **Quantity Position:** Choose where product quantities appear. - **On the image (badge):** Display quantities as badges over product thumbnails. - **After the name:** Display quantities after product names. - **Before the name:** Display quantities before product names. - **Show Discounted Price:** Display product prices after coupon discounts instead of their original prices. (Not available in Images only layout.) - **Maximum Products Shown:** Limit how many products appear. Set to 0 to display all products. **Note:** When a product limit is set, additional products are grouped into a "+ n more" indicator. If Quantity Position is set to On the image but product images are hidden, the quantity appears after the product name. ### Coupons The Coupons settings let you display applied discounts and customize the coupon input field. They are divided into Applied and Field tabs. #### Applied ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-7.webp) - **Show Applied Coupons:** Show or hide coupons already applied to the cart. - **View Type:** Choose how applied coupons appear. - **Chips:** Display applied coupons as compact tags. - **Rows:** Display applied coupons in separate rows. - **Show Discount Amount:** Display the discount for each applied coupon. - **Show Remove:** Display a button to remove applied coupons. - **Show Tag Icon:** Show or hide the tag icon beside applied coupons. #### Coupon Field ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-8.webp) - **Coupon Field:** Show or hide the coupon input field. - **Field Layout:** Choose how the coupon field appears. - **Inline:** Display the input and Apply button side by side. - **Stacked:** Display the input and Apply button vertically. - **Collapsed:** Hide the input behind a clickable link until customers open it. - **Field Label:** Enter a custom label for the coupon field. - **Tag Icon In Field:** Show or hide the tag icon inside the coupon field. - **Placeholder:** Customize the placeholder text. - **Button Text:** Customize the Apply button text. **Note:** The coupon field only appears when coupons are enabled in WooCommerce settings. ### Shipping & Delivery The Shipping & Delivery settings let you display available shipping methods and additional delivery information. They are divided into Shipping and Delivery tabs. #### Shipping Method ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-9.webp) - **Shipping Methods:** Show or hide available shipping methods in the order summary. - **Methods Heading:** Enter a custom heading for the shipping methods section. - **Methods Style:** Choose how shipping methods appear. - **Radio List:** Display shipping methods with radio buttons. - **Cards:** Display shipping methods as selectable cards. - **Compact:** Display shipping methods in a compact list. **Note:** If the Checkout Form includes a Shipping Methods step, customers choose their method there instead of in Advanced Checkout Details. The selected shipping cost can still appear in the summary's Shipping row. #### Delivery Info ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-10.webp) - **Delivery Info:** Show or hide additional delivery information. - **Delivery Shows:** Choose which delivery details appear. - **Address + Method:** Display both the delivery address and selected shipping method. - **Address Only:** Display only the delivery address. - **Method Only:** Display only the selected shipping method. - **Delivery Layout:** Choose how delivery details appear. - **One Line:** Display delivery information on a single line. - **Line Per Detail, With Icons:** Display delivery details on separate lines with optional icons. - **Delivery Icons:** Show or hide icons beside delivery information. (Applies to Line Per Detail, With Icons.) - **Method Label:** Customize the label before the shipping method. - **Address Label:** Customize the label before the delivery address. ### Elements Order The Elements Order settings let you rearrange sections of the order summary using drag and drop. Sections are organized into three areas: ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-11.webp) - **Header:** The top area of the order summary. - **Body:** The main area for products, coupons, shipping, and other details. - **Footer:** The bottom area, typically used for the final total. Drag sections within an area or between areas to change their positions. You can also use the up and down arrows to move them. **Note:** Disabled sections keep their positions and return to the same place when enabled again. ### Place Order Button The Place Order Button settings let customers complete checkout directly from the order summary. ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-12.webp) - **Show Place Order Button:** Display a Place Order button below the summary. - **Button Text:** Customize the button text. Use {total} to include the current order total. - **Show Order Total:** Display the current order total after the button text. - **Separator:** Customize the separator between the button text and total. - **Full Width:** Make the button span the available width. - **Enable After Terms Accepted:** Keep the button disabled until customers accept the terms and conditions. **Important Note:** - Only one Place Order button appears on the checkout page. When enabled in Advanced Checkout Details, the Checkout Form's Review & Place Order and Payment steps do not show their own buttons. - The terms checkbox only appears when a Terms and conditions page is configured in WooCommerce. Without one, the button does not wait for terms acceptance. - In a multi-step checkout, clicking Place Order before completing the required steps takes customers to the first incomplete step instead of submitting the order. ### Mobile The Mobile settings let you control the order summary on smaller screens. ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-13.webp) - **Collapse on Mobile:** Display the summary as a collapsible bar showing the current order total. - **Show Label:** Customize the text shown when the summary is collapsed. - **Hide Label:** Customize the text shown when the summary is expanded. **Note:** Mobile collapse applies to screens up to 767px wide. **Background:** Customize the background of the entire module using Divi's standard background settings. **Element Label:** Set a custom admin label to easily identify the module in the Divi Builder. ## Design Tab The Design tab lets you customize the appearance of order items, totals, coupons, shipping methods, delivery information, and more. ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-14.webp) **Title:** Customize the title's typography and spacing, including the item count displayed beside it. **Area:** Customize the Header, Body, and Footer areas separately using spacing, border, box shadow, and background settings. ### Order Items Customize product details using the Item, Thumbnail, Badge, and Attributes tabs. (Available when Show Order Items is enabled.) #### Item List ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-15.webp) - **Gap Between Items:** Adjust the spacing between products in the list. You can also customize product titles, prices, quantities, backgrounds, borders, and spacing. #### Thumbnail ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-16.webp) - **Thumbnail Size:** Adjust the size of product thumbnails. - **Gap Between Thumbnails:** Adjust the spacing between product images. (Applies to Images only layout.) You can also customize thumbnail borders and backgrounds when product images are displayed. #### Quantity Badge Customize the quantity badge's vertical and horizontal position, typography, border, spacing, and background. (Applies when Quantity Position is set to On the image and product thumbnails are displayed.) #### Attributes Customize the typography, border, spacing, and background of product attribute labels and values. (Applies when Show Product Attributes is enabled.) **Total Row:** Customize the typography, border, and spacing of total rows through five tabs: Default, Subtotal, Discount, Tax, and Total. The Default tab styles all rows, while the other tabs let you customize each row individually using Divi's standard design settings. ### Shipping & Delivery Customize shipping methods and delivery information through three tabs: Shipping Method, Selected Shipping Method, and Delivery Info. #### Shipping Method ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-17.webp) - **Radio Button Size:** Adjust the size of the shipping method radio buttons. - **Radio Outline Color:** Customize the outline color of unselected radio buttons. You can also customize the method text, labels, prices, no-address message, borders, spacing, and background. #### Selected Shipping Method ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-18.webp) - **Selected Color:** Set the highlight color of the selected shipping method. - **Radio Outline Color:** Customize the outline color of the selected radio button. You can also customize the background, border, and box shadow. #### Delivery Info ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-19.webp) - **Icon Color:** Customize the color of delivery information icons. (Available when Delivery Layout is set to Line Per Detail, With Icons.) - **Icon Size:** Adjust the size of delivery information icons. (Available when Delivery Layout is set to Line Per Detail, With Icons.) You can also customize delivery text, borders, spacing, and background.  ### Coupons Customize applied coupons, the coupon field, buttons, and messages. #### Applied Coupons ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-20.webp) - **Tag Icon Color:** Set the color of the tag icon displayed with applied coupons. - **Remove Icon Color:** Set the color of the icon used to remove applied coupons. You can also customize typography, border, spacing, and background. (Applies when Show Applied Coupons is enabled.) #### Coupon Code Field ![](https://divimerc.com/wp-content/uploads/2026/10/advanced-checkout-details-21.webp) - **Tag Icon Color:** Customize the color of the tag icon inside the coupon field. - **Tag Icon Size:** Adjust the size of the tag icon. - **Tag Icon Position:** Choose the tag icon's position in the field. You can also customize the label, input text, placeholder, borders, spacing, and background. (Applies when Coupon Field is enabled.) #### Apply Button Customize the Apply button's typography, border, spacing, and background. (Applies when Coupon Field is enabled.) #### Success and Error Message Customize the typography, background, border, and spacing of coupon success and error messages. (Applies when Coupon Field is enabled.) ### Place Order Button The Place Order Button settings let you customize the button and terms checkbox through two tabs. #### Place Order Button Customize the button's typography, background, border, spacing, and box shadow using Divi's standard design settings. #### Terms Checkbox and Privacy Text Customize the terms and privacy text and links, checkbox size, border radius, and colors. You can also style the checkmark, error state, and required asterisk. **Mobile Toggle Bar:** Customize the typography, background, border, and spacing of the collapsible mobile summary bar. You can also style the order total shown inside it. (Available when Collapse on Mobile is enabled.) **Background:** Customize the background of the entire module using Divi's standard background settings. **Sizing:** Adjust the width, height, and alignment of the module. **Spacing:** Customize the margin and padding around the module. **Border:** Customize the module's border style, width, and color. You can style each side separately or apply the same settings to all sides. **Box Shadow:** Add and customize shadow effects around the module. **Filters:** Apply color filters to adjust the module's appearance. **Transform:** Scale, rotate, move, or skew the module. **Animation:** Add animation effects and customize their type, duration, delay, and repeat settings. ## Advanced Tab The Advanced tab provides additional controls, including Custom CSS, Position, Visibility, Conditions, and other standard Divi settings. ## Need Help? If you have any questions or need assistance, contact our support team: support@wprio.com.