The ShopEngine Payment Method widget lets you display and manage your store’s available payment options right on the checkout page. This guide covers how to add, customize, and configure the widget to match your store’s needs.

支払方法 #

Let’s learn the steps.

Step 1: Enable Account Payment Method Widget #

Find and enable Account Payment Method widget

Make sure WooCommerce Stripe Gateway plugin is installed and activated.

Step 2: Create an Account Payment Method Template #

Click Add new template from ShopEngine Builder Templates.

を作成します My account payment template with ShopEngine.

• 名前： Give a name to the template
• Template Type: Choose My Account Payment Methods
• Template Activation: Yes (toggle enabled)
• Starting Option: Create from scratch with a blank template
• Builder Type: Select Elementor
• アクション: Edit With Elementor / Save Changes

Step 3: Customize the My Account Payment Template with ShopEngine #

Now you’re in the Elementor editor. Search for the アカウントのナビゲーション widget and drag and drop it.

Now, search and drag and drop the Account Payment Methods ウィジェット。

View and fill up your payment form.

Click add payment method.

Your payment method is added.

Add more payment methods as you need.

Step 3:Customize the Payment Methods Widget #

You can style the widget according to your preferences.

表の見出し #

• テキストの色： Changes the font color of the table heading text (e.g., “Method”, “Expires”).
• 背景： Changes the background color behind the table heading row.
• タイポグラフィ： Lets you customize font family, size, weight, style, line height, and letter spacing of the heading text.
• Cell Padding: Controls the inner spacing (Top, Right, Bottom, Left) inside each heading cell. This adjusts the gap between the text and the cell borders.
• テキストの配置: Aligns the heading text to the Left, Center, or Right within the cell.

表本体 #

• Body Background: Sets the background color of the table’s body rows.
• テキストの色： Sets the font color of the body text.
• テキストのタイポグラフィ: Customize font family, size, weight, and spacing of body text.

Row Border –

• 枠線の種類: Sets the row border style (Solid, Dashed, Double, etc.).
• 枠線の幅: Sets the thickness of row borders (Top, Right, Bottom, Left).
• ボーダの色： Sets the color of row borders.
• Cell Padding: Sets the spacing (Top, Right, Bottom, Left) between text and cell borders.

Action Buttons #

Style add payment method link of account payment methods.

Style or notice empty state of account payment methods.