在进一步讨论之前，我假设你已经熟悉了WooCommerce。如果你只是一个技术爱好者，在那里学习新东西，我会尝试为这篇文章提供一些基础知识。
WooCommerce简单如他们所说：
为WordPress构建的完全可定制的开源电子商务平台。
要了解更多信息，请单击此链接。
要查看使用WooCommerce的实际网站，请检查我正在开发的网站。转到现场演示。
典型的WooCommerce网站的工作流程如下：
- 用户点击Home / Shop页面上显示的任何产品。
- 现在，他/她正在“单一产品页面”上。此页面提供有关产品的更多深入信息。
- 点击“添加到购物车”按钮。该产品已添加到购物车中。
- 访问’购物车页面’。然后单击“结帐”按钮。
- 在“结账页面”填写详细信息，然后继续付款。
所有这些功能都是通过WooCommerce免费提供的，并且适用于大多数用例。
但…
每个解决方案都可以进一步优化
您是否在上述工作流程中找到了一些开销？
如果我们的用户只想购买该产品，我们真的需要第4步吗？
我们应该直接将他发送到结账页面。我们不应该吗？
所以现在我们遇到了问题：
我们需要在“添加到购物车”按钮旁添加一个简单的“立即购买”按钮，该按钮将直接将我们的用户发送到结帐页面而不是购物车页面。
让我们为此找到一些解决方案。
首先是第一件事。谷歌一下。搜索插件。
疑难杂症！。找到一个。
哦，等等。我不希望在那里显示按钮。它的风格不匹配。它看起来像开箱即用的东西。
我是一个非技术人员。我现在被困住了。我应该聘请开发人员吗？
你有这种情况吗？
不要担心人们。解决方案非常简单。跟我来吧
我假设您可以访问您的主题文件。
注意：我们永远不应该直接更新主题文件。相反，使用子主题。如果您想学习如何创建一个，请阅读本文。如果您的主题提供者提供了儿童主题，请上传并激活它。请注意，在某些情况下，您可能需要再次添加自定义程序设置。因此，请务必仔细检查您的网站。如果某些内容被破坏而您不知道如何修复它，请重新激活您的父主题，一切都会好的。
但为了简单起见，我将直接对父主题进行更改。我们有兴趣更改的文件应位于：
/wp-content/themes/your-theme/woocommerce/single-product/add-to-cart/simple.php
如果没有，只需创建它保持相同的文件夹结构。如果您使用子主题，请创建相同的文件夹结构。它看起来像：
您的孩子主题/ woocommerce /单品/添加到购物车/ simple.php
你会在这里看到几行代码。我们感兴趣的代码部分如下所示：
<button class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr( $product->get_id() ); ?>"><!–?php echo esc_html( $product->single_add_to_cart_text() ); ?–></button>
如果您的代码看起来有些不同，请不要担心。它非常好，因为您的主题开发人员添加了一些额外的代码。我们必须确保找到“添加到购物车”按钮的代码。
现在根据我们的任务，我们必须在它旁边添加“立即购买”按钮。只需添加下面的代码即可。
<button id="buy_now_button" class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr($product->get_id()); ?>">
<!–?php _e('立即购买','salong'); ?–>
</button>
<input id="is_buy_now" name="is_buy_now" type="hidden" value="0" />
注意：使用主题用于“添加到购物车”按钮的相同类。或者只需复制并粘贴相同的“添加到购物车”按钮并进行必要的更改。
这段代码的作用是，它会在“添加到购物车”按钮后添加一个新的“立即购买”按钮。
你注意到两个按钮之间的区别吗？
- 我们已经提供了新的按钮ID“buy_now_button”，稍后我们将在提交表单时使用。
- 我们添加了额外的隐藏输入字段，其ID为“is_buy_now”，值为0.这将帮助我们了解用户是否已点击“立即购买”按钮。
我希望一切都适合你。如果您是开发人员，那么对您来说很容易。我正在为非技术人员详细解释它。
现在我们已经有了按钮。如果您保存并访问产品页面，则会看到添加的按钮。现在点击它。
哦，等等。它与“添加到购物车”按钮的工作方式相同。对。我们还没有处理主要逻辑。
现在我们必须为我们的逻辑添加一些javascript才能工作。在主题文件夹中打开functions.php文件。它将在：
你的主题/ functions.php中
或者如果您正在使用子主题，则在您的子主题文件夹中创建它。
在functions.php文件的末尾添加以下代码：
<button id="buy_now_button" class="single_add_to_cart_button button alt" name="add-to-cart" type="submit" value="<?php echo esc_attr($product->get_id()); ?>">
<!–?php _e('立即购买','salong'); ?–>
</button>
<input id="is_buy_now" name="is_buy_now" type="hidden" value="0" />
此代码添加以下javascript代码添加到购物车表单。我们的javascript代码会在“立即购买”按钮上收听点击事件。当有人点击按钮时，我们将id为’is_buy_now’的隐藏输入值设置为1.我们稍后会使用此值来检查是否点击了“立即购买”按钮。
注意：您还可以在主题的主javascript文件中添加此代码。但为了简单起见，我更喜欢在这里添加它。
现在在相同的functions.php文件末尾添加以下php代码：
function buy_now_submit_form() {
?>
<script>
jQuery(document).ready(function(){
// listen if someone clicks 'Buy Now' button
jQuery('#buy_now_button').click(function(){
// set value to 1
jQuery('#is_buy_now').val('1');
//submit the form
jQuery('form.cart').submit();
});
});
</script>
<!–?php <br ?–> }
add_action('woocommerce_after_add_to_cart_form', 'buy_now_submit_form');
这是帮助我们将用户重定向到结帐页面的主要代码。默认情况下，重定向网址是购物车页面的网址。
请记住，我们已将ID为’is_buy_now’的隐藏输入设置为值1.此处，我们使用它来区分用户是单击“立即购买”按钮还是常规“添加到购物车”按钮。
因此，如果点击“立即购买”按钮，我们会将重定向网址设置为结帐页面的网址。
而已。我们完了！
保存该文件，一切都应该正常。
综上所述：
- 我们在“添加到购物车”按钮旁添加了“立即购买”按钮，可将用户直接重定向到结帐页面。
- 为了区分单击了哪个按钮，我们使用了一个id为’is_buy_now’的隐藏输入元素。
- 如果点击“立即购买”按钮，我们将此重定向网址更改为结帐页面的网址。
如果在某些情况下你只需要一个重定向到结帐页面的按钮，你只需要在functions.php文件中使用以下代码
add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($redirect_url) {
if (isset($_REQUEST['is_buy_now']) && $_REQUEST['is_buy_now']) {
global $woocommerce;
$redirect_url = wc_get_checkout_url();
}
return $redirect_url;
}
不需要那个javascript代码。另外，不要忘记在simple.php文件中重命名“添加到购物车”按钮（如果需要）。
请注意，此解决方案仅适用于“简单产品”，不适用于“可变产品”或任何其他产品类型。为此，您必须使用我们在simple.php文件中使用的相同逻辑在同一文件夹中的其他文件中（例如，variation-add-to-cart-button.php）
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/262174.html