Product Checkout Page

The Product Checkout Page Widget allows you to add, style, and manage a checkout page section anywhere on your Elementor-powered page. It’s perfect for integrating a seamless WooCommerce checkout process, including customer details, order summary, and payment options, with customizable styling options and responsive settings.

Whether you’re designing a streamlined checkout flow, a single-page checkout, or a custom checkout section, the Product Checkout Page Widget makes it easy to present the checkout process with precision and style.

Key Features:

• Display a complete WooCommerce checkout form
• Show customer details, order summary, and payment methods
• Customize form fields, buttons, and labels
• Style checkout sections individually
• Fully responsive and optimized

🚀 How to Enable the Product Checkout Page Widget

To start using the Product Checkout Page Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Product Checkout Page Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Checkout Page Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Product Checkout Page” in the Elementor widget panel.
• Drag and drop the Product Checkout Page Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Checkout Settings

• Under the Content → Settings section:

Use shortcode if you want to show a custom checkout page. This allows you to embed the checkout form anywhere on your website, such as on a dedicated landing page or within a custom layout. By placing the shortcode in your desired location, you gain full control over the design and positioning of the checkout process.

Step 3: Style the Form Fields

• Under the Style → Form Fields section:
  • Adjust Typography to set font size, weight, and style for form labels and inputs.
  • Set Color for the text and borders, and adjust Margin and Padding to control spacing (e.g., top, right, bottom, left).

Step 4: Style the Order Summary

• Under the Style → Order Summary section:
  • Customize Table Border Type, Border Radius, and Box Shadow for the order summary table.
  • Adjust Typography and Color for the table text, and set Margin and Padding for spacing.

Step 5: Style the Payment Section and Buttons

• Under the Style → Payment and Style → Buttons sections:
  • Customize Payment Method Typography and Color for payment option labels.
  • Set Button Background Color, Text Color, and Hover Effects for the checkout button.
  • Adjust Button Border Type, Border Radius, and Padding for better presentation.

Step 6: Style the Container

• Under the Style → Container section:
  • Adjust Alignment to position the checkout form (e.g., left, center, right).
  • Set Background Type (e.g., Classic) and customize Background Color.
  • Adjust Border Type, Border Radius, and Box Shadow for the container.

✅ Final Preview and Save

Once your Product Checkout Page Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.