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.

Add Payment Method #

Access the Pannello di controllo di WordPress and follow the steps.

Step 1: Enable Account Payment Method Widget #

• Navigare verso ShopEngine
• Find and enable Account Payment Methods aggeggio
• Salvare le modifiche

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.

Creare un My account payment template with ShopEngine.

• Nome: 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
• Azioni: 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 Navigazione dell'account widget and drag and drop it.

Now, search and drag and drop the Account Payment Methods aggeggio.

View and fill up your payment form.

Click add payment method.

Here you go, your payment method is added.

If you need, you can add more payment methods.

Step 4:Customize the Payment Methods Widget #

You can style the widget according to your preferences.

Intestazione della tabella #

• Colore del testo: Changes the font color of the table heading text (e.g., “Method”, “Expires”).
• Sfondo: Changes the background color behind the table heading row.
• Tipografia: 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.
• Allinea testo: Aligns the heading text to the Left, Center, or Right within the cell.

Corpo del tavolo #

• Body Background: Sets the background color of the table’s body rows.
• Colore del testo: Sets the font color of the body text.
• Tipografia del testo: Customize font family, size, weight, and spacing of body text.

Row Border –

• Tipo di bordo: Sets the row border style (Solid, Dashed, Double, etc.).
• Larghezza del bordo: Sets the thickness of row borders (Top, Right, Bottom, Left).
• Colore del bordo: Sets the color of row borders.
• Cell Padding: Sets the spacing (Top, Right, Bottom, Left) between text and cell borders.

Action Buttons #

• Imbottitura: Sets the spacing (Top, Right, Bottom, Left) inside the buttons.
• Raggio del confine: Sets the corner roundness (Top, Right, Bottom, Left) of the buttons.
• Tipografia dei pulsanti: Customize font family, size, weight, and spacing of button text.
• Colore: Sets the text color of the buttons. Sfondo: Sets the background color of the buttons.
• Tipo di bordo: Sets the button border style (Solid, Dashed, Double, etc.).
• Larghezza del bordo: Sets the thickness of the button border (Top, Right, Bottom, Left).

Add Payment Method Link

• Imbottitura: Sets the spacing (Top, Right, Bottom, Left) inside the link/button.
• Raggio del confine: Sets the corner roundness (Top, Right, Bottom, Left) of the link/button.
• Margin Top: Sets the top spacing above the link/button.
• Tipografia: Customize font family, size, weight, and spacing of the link text.
• Colore: Sets the text color of the link.
• Sfondo: Sets the background color of the link/button.

Notice / Empty State

• Colore del testo: Sets the font color of the notice message.
• Sfondo: Sets the background color of the notice box.
• Tipografia: Customize font family, size, weight, and spacing of the notice text.
• Imbottitura: Sets the spacing (Top, Right, Bottom, Left) inside the notice box.

That’s it! You’ve successfully learned how to add and manage payment methods using ShopEngine. Now you can easily customize this section as per your needs.