如何从其他按钮或链接启动叠加层

本文详细介绍了如何为您的 WordPress 网站添加自定义代码，面向开发者。虽然我们不提供自定义开发服务，但如果您需要帮助，我们强烈推荐 Seahawk Media。

自定义代码段按原样提供，且不保证它们在 WP Simple Pay 的多个版本中都能继续正常工作。

步骤 1：更新按钮网址

要通过自定义按钮链接启动 Stripe Checkout 或叠加付款表单，您需要更改按钮链接的网址。调整按钮链接的网址将取决于您编辑内容的方式。将网址更新为以下内容：

#form-176

将 176 替换为您想启动的付款表单的 ID。您可以在表单编辑屏幕中找到付款表单的 ID。表单 ID 是 Simple Pay 短代码的数字部分，如下所示。

接下来，像平常一样将 WP Simple Pay 付款表单短代码嵌入您的页面：。这将导致付款表单输出到页面上，但在下一步中我们会将其隐藏，以确保只有自定义按钮链接可见。

步骤 2：添加自定义 JavaScript

有许多方法可以将自定义 JavaScript 代码添加到您的 WordPress 网站。请参阅我们的推荐的代码段添加指南。我们建议您使用免费插件WP Code将 JavaScript 添加到您主题的页脚。转到代码段 → 页眉和页脚，然后将自定义 JavaScript 添加到页脚部分，如下所示。

<script>
( function( $ ) {
	// Update comma separated list with payment form ID(s) to launch.
	var ids = [ '123' ];

	// Do not modify.
	ids.forEach( function( id ) { 
		$( 'a[href~="#form-' + id + '"]' ).click( function( e ) {
			e.preventDefault(); 
			$( '.simpay-form-' + id + ' .simpay-payment-btn' ).click();
			$( '#simpay-modal-control-' + id ).click(); 
		}); 
	});
})( jQuery );
</script>

将第 4 行的 123 替换为您付款表单的 ID。如果您在页面上创建了多个按钮，可以添加一个逗号分隔的付款表单 ID 列表，您希望能够启动这些表单。

步骤 3：添加自定义 CSS

有许多方法可以将自定义 CSS 代码添加到您的 WordPress 网站。我们在文档中概述了几种方法。我们建议您使用免费插件WP Code将 CSS 添加到您主题的页眉。转到代码段 → 页眉和页脚，然后将您的 CSS 添加到页眉部分：

<style>
body:not(.simpay-form-preview) .simpay-form-wrap {
  display: none;
} 
</style>

这将隐藏默认的 短代码输出，因此只有自定义按钮链接可见。