在进一步讨论之前,我假设你已经熟悉了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)